优化主题样式和全局样式引入

Author: hooray

src/assets/styles/globals.css

@@ -12,7 +12,6 @@
 * {
   scrollbar-color: hsl(var(--scrollbar-color)) transparent;
   scrollbar-width: thin;
-  border-color: hsl(var(--border));
 }
 
 html {
@@ -22,8 +21,6 @@ html {
 body {
   box-sizing: border-box;
   margin: 0;
-  color: hsl(var(--foreground));
-  background: hsl(var(--background));
   -webkit-tap-highlight-color: transparent;
 }
 

src/main.ts

@@ -10,8 +10,9 @@ import './utils/system.copyright'
 
 // 加载 svg 图标
 import 'virtual:svg-icons-register'
-import 'virtual:uno.css'
+// UnoCSS
 import '@unocss/reset/tailwind-compat.css'
+import 'virtual:uno.css'
 // 全局样式
 import '@/assets/styles/globals.css'
 

uno.config.ts

@@ -1,5 +1,5 @@
 import type { Theme } from 'unocss/preset-uno'
-import { entriesToCss, toArray } from '@unocss/core'
+import { entriesToCss } from '@unocss/core'
 import presetLegacyCompat from '@unocss/preset-legacy-compat'
 import presetRemToPx from '@unocss/preset-rem-to-px'
 import presetSafeArea from '@yeungkc/unocss-preset-safe-area'
@@ -55,66 +55,6 @@ export default defineConfig<Theme>({
       return cls.join(' ')
     }],
   ],
-  preflights: [
-    {
-      getCSS: () => {
-        const returnCss: any = []
-        // 明亮主题
-        const lightCss = entriesToCss(Object.entries(lightTheme))
-        const lightRoots = toArray([`*,::before,::after`, `::backdrop`])
-        returnCss.push(lightRoots.map(root => `${root}{${lightCss}}`).join(''))
-        // 暗黑主题
-        const darkCss = entriesToCss(Object.entries(darkTheme))
-        const darkRoots = toArray([`html.dark,html.dark *,html.dark ::before,html.dark ::after`, `html.dark ::backdrop`])
-        returnCss.push(darkRoots.map(root => `${root}{${darkCss}}`).join(''))
-
-        return returnCss.join('')
-      },
-    },
-  ],
-  theme: {
-    colors: {
-      border: 'hsl(var(--border))',
-      input: 'hsl(var(--input))',
-      ring: 'hsl(var(--ring))',
-      background: 'hsl(var(--background))',
-      foreground: 'hsl(var(--foreground))',
-      primary: {
-        DEFAULT: 'hsl(var(--primary))',
-        foreground: 'hsl(var(--primary-foreground))',
-      },
-      secondary: {
-        DEFAULT: 'hsl(var(--secondary))',
-        foreground: 'hsl(var(--secondary-foreground))',
-      },
-      destructive: {
-        DEFAULT: 'hsl(var(--destructive))',
-        foreground: 'hsl(var(--destructive-foreground))',
-      },
-      muted: {
-        DEFAULT: 'hsl(var(--muted))',
-        foreground: 'hsl(var(--muted-foreground))',
-      },
-      accent: {
-        DEFAULT: 'hsl(var(--accent))',
-        foreground: 'hsl(var(--accent-foreground))',
-      },
-      popover: {
-        DEFAULT: 'hsl(var(--popover))',
-        foreground: 'hsl(var(--popover-foreground))',
-      },
-      card: {
-        DEFAULT: 'hsl(var(--card))',
-        foreground: 'hsl(var(--card-foreground))',
-      },
-    },
-    borderRadius: {
-      xl: 'calc(var(--radius) + 4px)',
-      lg: 'var(--radius)',
-      md: 'calc(var(--radius) - 2px)',
-      sm: 'calc(var(--radius) - 4px)',
-    },
-  },
   presets: [
     presetWind3(),
     presetAnimations(),
@@ -131,6 +71,77 @@ export default defineConfig<Theme>({
     presetLegacyCompat({
       legacyColorSpace: true,
     }),
+    {
+      name: 'unocss-preset-shadcn',
+      preflights: [
+        {
+          getCSS: () => {
+            const returnCss: any = []
+            // 明亮主题
+            const lightCss = entriesToCss(Object.entries(lightTheme))
+            returnCss.push(`:root{${lightCss}}`)
+            // 暗黑主题
+            const darkCss = entriesToCss(Object.entries(darkTheme))
+            returnCss.push(`html.dark{${darkCss}}`)
+            return `
+${returnCss.join('\n')}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+}
+`
+          },
+        },
+      ],
+      theme: {
+        colors: {
+          border: 'hsl(var(--border))',
+          input: 'hsl(var(--input))',
+          ring: 'hsl(var(--ring))',
+          background: 'hsl(var(--background))',
+          foreground: 'hsl(var(--foreground))',
+          primary: {
+            DEFAULT: 'hsl(var(--primary))',
+            foreground: 'hsl(var(--primary-foreground))',
+          },
+          secondary: {
+            DEFAULT: 'hsl(var(--secondary))',
+            foreground: 'hsl(var(--secondary-foreground))',
+          },
+          destructive: {
+            DEFAULT: 'hsl(var(--destructive))',
+            foreground: 'hsl(var(--destructive-foreground))',
+          },
+          muted: {
+            DEFAULT: 'hsl(var(--muted))',
+            foreground: 'hsl(var(--muted-foreground))',
+          },
+          accent: {
+            DEFAULT: 'hsl(var(--accent))',
+            foreground: 'hsl(var(--accent-foreground))',
+          },
+          popover: {
+            DEFAULT: 'hsl(var(--popover))',
+            foreground: 'hsl(var(--popover-foreground))',
+          },
+          card: {
+            DEFAULT: 'hsl(var(--card))',
+            foreground: 'hsl(var(--card-foreground))',
+          },
+        },
+        borderRadius: {
+          xl: 'calc(var(--radius) + 4px)',
+          lg: 'var(--radius)',
+          md: 'calc(var(--radius) - 2px)',
+          sm: 'calc(var(--radius) - 4px)',
+        },
+      },
+    },
   ],
   transformers: [
     transformerDirectives(),