chore: Add dark mode switcher

histoire.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'histoire'
 import { HstVue } from '@histoire/plugin-vue'
+import { defineConfig } from 'histoire'
 import resolveConfig from 'tailwindcss/resolveConfig'
 import tailwindConfig from './tailwind.config.js'
 
@@ -11,7 +11,8 @@ export default defineConfig({
  theme: {
  title: 'Frappe UI',
  defaultColorScheme: 'light',
- hideColorSchemeSwitch: true,
+ hideColorSchemeSwitch: false,
+ storeColorScheme: false,
  favicon: 'frappe-ui-square.png',
  logo: {
  square: './frappe-ui-square.png',

histoire.setup.ts

@@ -1,2 +1,15 @@
-import './src/style.css'
 import './histoire.css'
+import './src/style.css'
+
+document
+ .querySelector(
+ '#app > div.htw-h-screen.htw-bg-white.dark\\:htw-bg-gray-700.dark\\:htw-text-gray-100 > div > div.htw-relative.htw-top-0.htw-left-0.htw-z-20.htw-border-r.htw-border-gray-300\\/30.dark\\:htw-border-gray-800 > div.htw-flex.htw-flex-col.htw-h-full.htw-bg-gray-100.dark\\:htw-bg-gray-750.__histoire-pane-shadow-from-right > div.histoire-app-header.htw-px-4.htw-h-16.htw-flex.htw-items-center.htw-gap-2.htw-flex-none > div.htw-ml-auto.htw-flex-none.htw-flex > a:nth-child(2)',
+ )
+ ?.addEventListener('click', () => {
+ // set data-theme to dark if root element has htw-dark class
+ if (document.documentElement.classList.contains('htw-dark')) {
+ document.documentElement.setAttribute('data-theme', 'dark')
+ } else {
+ document.documentElement.setAttribute('data-theme', 'light')
+ }
+ })