feat: preview dark mode class + transparent bg

histoire-dev · Mar 7, 2022 · 56a5ec3 · 56a5ec3
1 parent 23f2808
commit 56a5ec3
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 3 deletions.
diff --git a/examples/vue3/src/components/DarkMode.story.vue b/examples/vue3/src/components/DarkMode.story.vue
@@ -0,0 +1,28 @@
+<template>
+  <Story title="Dark mode">
+    <Variant
+      title="default"
+    >
+      <div class="meow">
+        <span class="only-dark">Dark</span>
+        Meow
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.dark .meow {
+  color: #fff;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.only-dark {
+  display: none;
+}
+
+.dark .only-dark {
+  display: inline;
+}
+</style>
diff --git a/packages/histoire/src/client/app/components/StoryVariantSingleView.vue b/packages/histoire/src/client/app/components/StoryVariantSingleView.vue
@@ -236,7 +236,7 @@ function onIframeLoad () {
     >
       <template #first>
         <div class="htw-p-4 htw-h-full htw-overflow-hidden htw-bg-white dark:htw-bg-gray-700 htw-rounded-l-lg htw-relative">
-          <div class="htw-w-full htw-h-full htw-border htw-border-gray-100 dark:htw-border-gray-800 htw-bg-white htw-rounded-sm htw-relative">
+          <div class="htw-w-full htw-h-full htw-border htw-border-gray-100 dark:htw-border-gray-800 htw-rounded-sm htw-relative">
             <div class="bind-preview-bg htw-absolute htw-inset-0" />
 
             <CheckerboardPattern

diff --git a/packages/histoire/src/client/app/preview-settings.ts b/packages/histoire/src/client/app/preview-settings.ts
@@ -8,7 +8,7 @@ export interface PreviewSettings {
 
 export function usePreviewSettings () {
   return useStorage<PreviewSettings>('_histoire-sandbox-settings', {
-    backgroundColor: '#fff',
+    backgroundColor: 'transparent',
     checkerboard: false,
   })
 }

diff --git a/packages/histoire/src/client/app/sandbox.ts b/packages/histoire/src/client/app/sandbox.ts
@@ -10,6 +10,8 @@ import { mapFile } from './util/mapping'
 import { files } from '$histoire-stories'
 import { PREVIEW_SETTINGS_SYNC, STATE_SYNC } from './util/const.js'
 import { applyPreviewSettings } from './preview-settings.js'
+import { isDark } from './util/dark.js'
+import { histoireConfig } from './util/config.js'
 
 const query = parseQuery(window.location.search)
 const file = ref<StoryFile>(mapFile(files.find(f => f.id === query.storyId)))
@@ -68,3 +70,13 @@ const app = createApp({
 app.use(createPinia())
 registerGlobalComponents(app)
 app.mount('#app')
+
+watch(isDark, value => {
+  if (value) {
+    document.documentElement.classList.add(histoireConfig.sandboxDarkClass)
+  } else {
+    document.documentElement.classList.remove(histoireConfig.sandboxDarkClass)
+  }
+}, {
+  immediate: true,
+})
diff --git a/packages/histoire/src/client/app/style/sandbox.css b/packages/histoire/src/client/app/style/sandbox.css
@@ -1,6 +1,10 @@
+html,
+body {
+  background: transparent !important;
+}
+
 body {
   margin: 0;
-  background: transparent;
 }
 
 html,

diff --git a/packages/histoire/src/node/config.ts b/packages/histoire/src/node/config.ts
@@ -111,6 +111,10 @@ export interface HistoireConfig {
    * Background color of the story preview.
    */
   backgroundPresets?: BackgroundPreset[]
+  /**
+   * Class added to the html root of the story preview when dark mode is enabled.
+   */
+  sandboxDarkClass?: string
   /**
    * Vite config override
    */
@@ -168,6 +172,10 @@ export function getDefaultConfig (): HistoireConfig {
       },
     ],
     backgroundPresets: [
+      {
+        label: 'Transparent',
+        color: 'transparent',
+      },
       {
         label: 'White',
         color: '#fff',
@@ -185,6 +193,7 @@ export function getDefaultConfig (): HistoireConfig {
         color: '#000',
       },
     ],
+    sandboxDarkClass: 'dark',
   }
 }