主题样式修改

themes/index.ts

@@ -1,44 +1,85 @@
 import { hex2rgba } from '@unocss/preset-mini/utils'
-
+//默认主题
+// export const lightTheme = {
+//   'color-scheme': 'light',
+//   // 内置 UI
+//   '--ui-primary': hex2rgba('#0f0f0f')!.join(' '),
+//   '--ui-text': hex2rgba('#fcfcfc')!.join(' '),
+//   // 主体
+//   '--g-bg': '#f2f2f2',
+//   '--g-container-bg': '#fff',
+//   '--g-border-color': '#f2f2f2',
+//   // 头部
+//   '--g-header-bg': '#fff',
+//   '--g-header-color': '#0f0f0f',
+//   '--g-header-menu-color': '#0f0f0f',
+//   '--g-header-menu-hover-bg': '#dde1e3',
+//   '--g-header-menu-hover-color': '#0f0f0f',
+//   '--g-header-menu-active-bg': '#334067',
+//   '--g-header-menu-active-color': '#fff',
+//   // 主导航
+//   '--g-main-sidebar-bg': '#222b45',
+//   '--g-main-sidebar-menu-color': '#0f0f0f',
+//   '--g-main-sidebar-menu-hover-bg': '#dde1e3',
+//   '--g-main-sidebar-menu-hover-color': '#0f0f0f',
+//   '--g-main-sidebar-menu-active-bg': '#334067',
+//   '--g-main-sidebar-menu-active-color': '#fff',
+//   // 次导航
+//   '--g-sub-sidebar-bg': '#fff',
+//   '--g-sub-sidebar-logo-bg': '#0f0f0f',
+//   '--g-sub-sidebar-logo-color': '#fff',
+//   '--g-sub-sidebar-menu-color': '#0f0f0f',
+//   '--g-sub-sidebar-menu-hover-bg': '#dde1e3',
+//   '--g-sub-sidebar-menu-hover-color': '#0f0f0f',
+//   '--g-sub-sidebar-menu-active-bg': '#409eff',
+//   '--g-sub-sidebar-menu-active-color': '#fff',
+//   // 标签栏
+//   '--g-tabbar-dividers-bg': '#a3a3a3',
+//   '--g-tabbar-tab-color': '#a3a3a3',
+//   '--g-tabbar-tab-hover-bg': '#e5e5e5',
+//   '--g-tabbar-tab-hover-color': '#0f0f0f',
+//   '--g-tabbar-tab-active-color': '#0f0f0f',
+// }
+//自定义主题
 export const lightTheme = {
   'color-scheme': 'light',
   // 内置 UI
-  '--ui-primary': hex2rgba('#0f0f0f')!.join(' '),
-  '--ui-text': hex2rgba('#fcfcfc')!.join(' '),
+  '--ui-primary': hex2rgba('#0376F9')!.join(' '),
+  '--ui-text': hex2rgba('#333333')!.join(' '),
   // 主体
-  '--g-bg': '#f2f2f2',
-  '--g-container-bg': '#fff',
-  '--g-border-color': '#f2f2f2',
+  '--g-bg': '#F5F8FF',
+  '--g-container-bg': '#FFFFFF',
+  '--g-border-color': '#E0E0E0',
   // 头部
-  '--g-header-bg': '#fff',
-  '--g-header-color': '#0f0f0f',
-  '--g-header-menu-color': '#0f0f0f',
-  '--g-header-menu-hover-bg': '#dde1e3',
-  '--g-header-menu-hover-color': '#0f0f0f',
-  '--g-header-menu-active-bg': '#334067',
-  '--g-header-menu-active-color': '#fff',
+  '--g-header-bg': '#0376F9',
+  '--g-header-color': '#ffffff',
+  '--g-header-menu-color': '#ffffff',
+  '--g-header-menu-hover-bg': '#E6F0FF',
+  '--g-header-menu-hover-color': '#333333',
+  '--g-header-menu-active-bg': '#ffffff',
+  '--g-header-menu-active-color': '#0376F9',
   // 主导航
-  '--g-main-sidebar-bg': '#222b45',
-  '--g-main-sidebar-menu-color': '#0f0f0f',
-  '--g-main-sidebar-menu-hover-bg': '#dde1e3',
-  '--g-main-sidebar-menu-hover-color': '#0f0f0f',
-  '--g-main-sidebar-menu-active-bg': '#334067',
-  '--g-main-sidebar-menu-active-color': '#fff',
+  '--g-main-sidebar-bg': '#0376F9',
+  '--g-main-sidebar-menu-color': '#FFFFFF',
+  '--g-main-sidebar-menu-hover-bg': '#0258C7',
+  '--g-main-sidebar-menu-hover-color': '#FFFFFF',
+  '--g-main-sidebar-menu-active-bg': '#FFFFFF',
+  '--g-main-sidebar-menu-active-color': '#0376F9',
   // 次导航
-  '--g-sub-sidebar-bg': '#fff',
-  '--g-sub-sidebar-logo-bg': '#0f0f0f',
-  '--g-sub-sidebar-logo-color': '#fff',
-  '--g-sub-sidebar-menu-color': '#0f0f0f',
-  '--g-sub-sidebar-menu-hover-bg': '#dde1e3',
-  '--g-sub-sidebar-menu-hover-color': '#0f0f0f',
-  '--g-sub-sidebar-menu-active-bg': '#409eff',
-  '--g-sub-sidebar-menu-active-color': '#fff',
+  '--g-sub-sidebar-bg': '#262930',
+  '--g-sub-sidebar-logo-bg': '#0376F9',
+  '--g-sub-sidebar-logo-color': '#FFFFFF',
+  '--g-sub-sidebar-menu-color': 'rgba(255,255,255,0.65)',
+  '--g-sub-sidebar-menu-hover-bg': '#E6F0FF',
+  '--g-sub-sidebar-menu-hover-color': '#0376F9',
+  '--g-sub-sidebar-menu-active-bg': '#0376F9',
+  '--g-sub-sidebar-menu-active-color': '#FFFFFF',
   // 标签栏
-  '--g-tabbar-dividers-bg': '#a3a3a3',
-  '--g-tabbar-tab-color': '#a3a3a3',
-  '--g-tabbar-tab-hover-bg': '#e5e5e5',
-  '--g-tabbar-tab-hover-color': '#0f0f0f',
-  '--g-tabbar-tab-active-color': '#0f0f0f',
+  '--g-tabbar-dividers-bg': '#E0E0E0',
+  '--g-tabbar-tab-color': '#666666',
+  '--g-tabbar-tab-hover-bg': '#E6F0FF',
+  '--g-tabbar-tab-hover-color': '#0376F9',
+  '--g-tabbar-tab-active-color': '#0376F9',
 }
 
 export const darkTheme = {