Paint storybook to dark

.storybook/preview.scss

@@ -0,0 +1,9 @@
+@use "sass:color";
+@use '../lib/styles/base.scss' as base;
+@use '../lib/styles/colors.scss' as colors;
+
+html, body {
+    scrollbar-color: color.adjust(base.$color-bg, $lightness: 6%) color.adjust(base.$color-bg, $lightness: -4.25%);
+    background-color: base.$color-bg;
+    color: colors.$white;
+}

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import previewTheme from './previewTheme.ts';
 import '../stories/assets/fonts.css';
 import '../stories/assets/all.min.css';
 import { withConsole } from '@storybook/addon-console';
@@ -12,6 +13,13 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    backgrounds: {
+      default: 'Section',
+      values: [{ name: 'Section', value: 'rgba(0, 0, 0, 0.33)' }],
+    },
+    docs: {
+      theme: previewTheme,
+    },
   },
   decorators: [(storyFn, context) => withConsole()(storyFn)(context)],
   tags: ['autodocs'],

.storybook/previewTheme.ts

@@ -0,0 +1,12 @@
+import { create } from '@storybook/theming/create';
+import './preview.scss';
+
+export default create({
+    base: 'dark',
+    brandTitle: 'TGUI-core',
+    brandUrl: 'https://github.com/tgstation/tgui-core',
+
+    appBg: 'hsl(0, 0%, 14%)',
+    appContentBg: 'hsl(0, 0%, 14%)',
+    appPreviewBg: 'hsl(0, 0%, 14%)',
+  });

package.json

@@ -47,6 +47,7 @@
     "@storybook/blocks": "^8.4.7",
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
     "@storybook/test": "^8.4.7",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.3",