docs(ui): add dark theme for storybook docs (#2062)

Author: cylewaitforit

.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook-vue/nuxt'
 
 const config = {
-  stories: ['../app/**/*.stories.@(js|ts)'],
+  stories: ['../.storybook/*.mdx', '../app/**/*.stories.@(js|ts)'],
   addons: ['@storybook/addon-a11y', '@storybook/addon-docs', '@storybook/addon-themes'],
   framework: '@storybook-vue/nuxt',
   staticDirs: ['./.public'],

.storybook/manager.ts

@@ -1,11 +1,19 @@
 import { addons } from 'storybook/manager-api'
-import { create } from 'storybook/theming'
 
-const npmxTheme = create({
-  brandTitle: 'npmx Storybook',
-  brandImage: '/npmx-storybook.svg',
-})
+import npmxDark from './theme'
 
 addons.setConfig({
-  theme: npmxTheme,
+  theme: npmxDark,
+  layoutCustomisations: {
+    showToolbar: (state, defaultValue) => {
+      if (state.viewMode === 'docs' && state.storyId) {
+        const story = state.index?.[state.storyId]
+        const tags = story?.tags || []
+        if (tags.includes('hide-toolbar')) {
+          return false
+        }
+      }
+      return defaultValue
+    },
+  },
 })

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<style>
+  /* Override docs story canvas background to match npmx theme */
+  .docs-story {
+    background-color: var(--bg, oklch(0.171 0 0)) !important;
+  }
+</style>

.storybook/preview.ts

@@ -4,6 +4,8 @@ import { currentLocales } from '../config/i18n'
 import { fn } from 'storybook/test'
 import { ACCENT_COLORS } from '../shared/utils/constants'
 
+import npmxDark from './theme'
+
 // related: https://github.com/npmx-dev/npmx.dev/blob/1431d24be555bca5e1ae6264434d49ca15173c43/test/nuxt/setup.ts#L12-L26
 // Stub Nuxt specific globals
 // @ts-expect-error - dynamic global name
@@ -25,6 +27,9 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    docs: {
+      theme: npmxDark,
+    },
   },
   // Provides toolbars to switch things like theming and language
   globalTypes: {

.storybook/storybook-welcome.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+ 
+<Meta title="Welcome" tags={['hide-toolbar']}/>
+
+# Welcome
+
+Welcome to the npmx Storybook.

.storybook/theme.ts

@@ -0,0 +1,13 @@
+import { create } from 'storybook/theming'
+
+const npmxDark = create({
+  base: 'dark',
+
+  brandTitle: 'npmx Storybook',
+  brandImage: '/npmx-storybook.svg',
+
+  // UI
+  appContentBg: '#101010', // oklch(0.171 0 0)
+})
+
+export default npmxDark