From c0362bdbef46ad4fdb3097c722bc1f905b0a594f Mon Sep 17 00:00:00 2001
From: cylewaitforit <cyle@cylewaitfor.it>
Date: Thu, 12 Mar 2026 08:39:50 -0500
Subject: [PATCH] docs(ui): add dark theme for storybook docs

---
 .storybook/manager.ts        |  8 ++------
 .storybook/preview-head.html |  6 ++++++
 .storybook/preview.ts        |  5 +++++
 .storybook/theme.ts          | 13 +++++++++++++
 4 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 .storybook/preview-head.html
 create mode 100644 .storybook/theme.ts

diff --git a/.storybook/manager.ts b/.storybook/manager.ts
index 023e4fd21d..b0934a3f4e 100644
--- a/.storybook/manager.ts
+++ b/.storybook/manager.ts
@@ -1,11 +1,7 @@
 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,
 })
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 0000000000..49c5636054
--- /dev/null
+++ b/.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>
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 3242f7788a..0d62d33be0 100644
--- a/.storybook/preview.ts
+++ b/.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: {
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
new file mode 100644
index 0000000000..10816b91cb
--- /dev/null
+++ b/.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