diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css index c301d982..83d5ce52 100755 --- a/src/assets/styles/globals.css +++ b/src/assets/styles/globals.css @@ -53,7 +53,6 @@ * { scrollbar-color: hsl(var(--border)) transparent; scrollbar-width: thin; - border-color: hsl(var(--border)); } html, @@ -64,9 +63,6 @@ body { body { box-sizing: border-box; margin: 0; - font-family: var(--font-family); - color: hsl(var(--foreground)); - background: hsl(var(--background)); -webkit-tap-highlight-color: transparent; } diff --git a/src/main.ts b/src/main.ts index 6198cd2a..4763b8fa 100755 --- a/src/main.ts +++ b/src/main.ts @@ -13,8 +13,9 @@ import '@/utils/systemCopyright' // 加载 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' diff --git a/uno.config.ts b/uno.config.ts index 129bfe43..15f69fcc 100644 --- a/uno.config.ts +++ b/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 { defineConfig, @@ -42,66 +42,6 @@ export default defineConfig({ 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(), @@ -116,6 +56,77 @@ export default defineConfig({ 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(),