feat: theme.darkClass and deprecate sandboxDarkClass, fix #442

histoire-dev · Feb 10, 2023 · 6ea5bbe · 6ea5bbe
1 parent fd72c48
commit 6ea5bbe
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 15 deletions.
diff --git a/docs/reference/config.md b/docs/reference/config.md
@@ -110,6 +110,7 @@ Properties:
 - `favicon: string`: Href to the favicon file (**not** processed by Vite). Put the file in the `public` directory.
 - `colors: Object`: Customize the colors. Each color should be an object with shades as keys.
 - `logoHref: string`: Add a link to the main logo
+- `darkClass: string`: Class added to the story preview when dark mode is enabled (default is `'dark'`).
 - `defaultColorScheme: 'light' | 'dark' | 'auto'`: Default color scheme for the app. `'auto'` will use the system preference.
 - `hideColorSchemeSwitch: boolean`: Hides the dark mode button in the toolbar.
 - `storeColorScheme: boolean`: Enable persistence of the color scheme in the browser's local storage.
@@ -314,18 +315,6 @@ export default defineConfig({
 })
 ```
 
-## `sandboxDarkClass`
-
-`string` - Default: `'dark'`
-
-Class added to the html root of the story preview when dark mode is enabled.
-
-```ts
-export default defineConfig({
-  sandboxDarkClass: 'my-dark-class',
-})
-```
-
 ## `markdown`
 
 `(md: MarkdownIt) => MarkdownIt | Promise<MarkdownIt>`

diff --git a/examples/vue3/histoire.config.ts b/examples/vue3/histoire.config.ts
@@ -16,4 +16,7 @@ export default defineConfig({
   ],
   // autoApplyContrastColor: true,
   // routerMode: 'hash',
+  theme: {
+    darkClass: 'my-dark',
+  },
 })
diff --git a/examples/vue3/src/components/BaseButton.vue b/examples/vue3/src/components/BaseButton.vue
@@ -72,4 +72,8 @@ defineProps({
   font-size: 12px;
   padding: 2px 4px;
 }
+
+.my-dark .btn {
+  color: black;
+}
 </style>
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue b/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue
@@ -9,6 +9,7 @@ import { useScrollOnActive } from '../../util/scroll'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { getContrastColor } from '../../util/preview-settings'
 import { histoireConfig } from '../../util/config'
+import { isDark } from '../../util/dark'
 import GenericRenderStory from './GenericRenderStory.vue'
 import ToolbarNewTab from '../toolbar/ToolbarNewTab.vue'
 import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
@@ -136,6 +137,9 @@ const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrast
           :variant="variant"
           :story="story"
           :dir="settings.textDirection"
+          :class="{
+            [histoireConfig.theme.darkClass]: isDark,
+          }"
           @ready="onReady"
         />
       </div>

diff --git a/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewNative.vue b/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewNative.vue
@@ -54,7 +54,10 @@ const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrast
         :variant="variant"
         :story="story"
         class="htw-h-full"
-        :class="[ isDark ? histoireConfig.sandboxDarkClass : undefined ]"
+        :class="{
+          [histoireConfig.sandboxDarkClass]: isDark, // @TODO remove
+          [histoireConfig.theme.darkClass]: isDark,
+        }"
         :dir="settings.textDirection"
         @ready="onReady"
       />

diff --git a/packages/histoire-app/src/app/sandbox.ts b/packages/histoire-app/src/app/sandbox.ts
@@ -88,9 +88,11 @@ app.mount('#app')
 
 watch(isDark, value => {
   if (value) {
-    document.documentElement.classList.add(histoireConfig.sandboxDarkClass)
+    document.documentElement.classList.add(histoireConfig.sandboxDarkClass) // @TODO remove
+    document.documentElement.classList.add(histoireConfig.theme.darkClass)
   } else {
-    document.documentElement.classList.remove(histoireConfig.sandboxDarkClass)
+    document.documentElement.classList.remove(histoireConfig.sandboxDarkClass) // @TODO remove
+    document.documentElement.classList.remove(histoireConfig.theme.darkClass)
   }
 }, {
   immediate: true,

diff --git a/packages/histoire-shared/src/types/config.ts b/packages/histoire-shared/src/types/config.ts
@@ -128,6 +128,10 @@ export interface HistoireConfig {
      * Enable persistence of the color scheme in the browser.
      */
     storeColorScheme?: boolean
+    /**
+     * Class added to the story preview when dark mode is enabled.
+     */
+    darkClass?: string
   }
   /**
    * Setup file exporting a default function executed when setting up each story preview.
@@ -174,6 +178,7 @@ export interface HistoireConfig {
   autoApplyContrastColor?: boolean
   /**
    * Class added to the html root of the story preview when dark mode is enabled.
+   * @deprecated use `theme.darkClass` instead
    */
   sandboxDarkClass?: string
   /**

diff --git a/packages/histoire/src/node/config.ts b/packages/histoire/src/node/config.ts
@@ -50,6 +50,7 @@ export function getDefaultConfig (): HistoireConfig {
       },
       defaultColorScheme: 'auto',
       storeColorScheme: true,
+      darkClass: 'dark',
     },
     responsivePresets: [
       {