From 564beeca9269fc379f4e74788dd98c2f86fde738 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 16 Oct 2024 15:18:32 +0530
Subject: [PATCH] chore: Add dark mode switcher

---
 histoire.config.ts |  5 +++--
 histoire.setup.ts  | 15 ++++++++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/histoire.config.ts b/histoire.config.ts
index 47ed43a9..c3cfc58b 100644
--- a/histoire.config.ts
+++ b/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',
diff --git a/histoire.setup.ts b/histoire.setup.ts
index 27cd82ac..94f1f4ce 100644
--- a/histoire.setup.ts
+++ b/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')
+    }
+  })