operation-Backend/themes/index.ts

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('#0376F9')!.join(' '),
  '--ui-text': hex2rgba('#333333')!.join(' '),
  // 主体
  '--g-bg': '#F5F8FF',
  '--g-container-bg': '#FFFFFF',
  '--g-border-color': '#E0E0E0',
  // 头部
  '--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': '#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': '#0376F9',
  '--g-sub-sidebar-logo-color': '#FFFFFF',
  '--g-sub-sidebar-menu-color': '#666666',
  '--g-sub-sidebar-menu-hover-bg': '#E6F0FF',
  '--g-sub-sidebar-menu-hover-color': '#000',
  '--g-sub-sidebar-menu-active-bg': 'linear-gradient( 91deg, #4FCAFF 0%, #2B62FF 100%)',
  '--g-sub-sidebar-menu-active-color': '#FFFFFF',
  // 标签栏
  '--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 = {
  'color-scheme': 'dark',
  // 内置 UI
  '--ui-primary': hex2rgba('#e5e5e5')!.join(' '),
  '--ui-text': hex2rgba('#0f0f0f')!.join(' '),
  // 主体
  '--g-bg': '#0a0a0a',
  '--g-container-bg': '#141414',
  '--g-border-color': '#15191e',
  // 头部
  '--g-header-bg': '#141414',
  '--g-header-color': '#e5e5e5',
  '--g-header-menu-color': '#a8a29e',
  '--g-header-menu-hover-bg': '#141414',
  '--g-header-menu-hover-color': '#e5e5e5',
  '--g-header-menu-active-bg': '#e5e5e5',
  '--g-header-menu-active-color': '#0a0a0a',
  // 主导航
  '--g-main-sidebar-bg': '#0a0a0a',
  '--g-main-sidebar-menu-color': '#a8a29e',
  '--g-main-sidebar-menu-hover-bg': '#141414',
  '--g-main-sidebar-menu-hover-color': '#e5e5e5',
  '--g-main-sidebar-menu-active-bg': '#e5e5e5',
  '--g-main-sidebar-menu-active-color': '#0a0a0a',
  // 次导航
  '--g-sub-sidebar-bg': '#141414',
  '--g-sub-sidebar-logo-bg': '#0f0f0f',
  '--g-sub-sidebar-logo-color': '#e5e5e5',
  '--g-sub-sidebar-menu-color': '#a8a29e',
  '--g-sub-sidebar-menu-hover-bg': '#0a0a0a',
  '--g-sub-sidebar-menu-hover-color': '#e5e5e5',
  '--g-sub-sidebar-menu-active-bg': '#e5e5e5',
  '--g-sub-sidebar-menu-active-color': '#0a0a0a',
  // 标签栏
  '--g-tabbar-dividers-bg': '#a8a29e',
  '--g-tabbar-tab-color': '#a8a29e',
  '--g-tabbar-tab-hover-bg': '#1b1b1b',
  '--g-tabbar-tab-hover-color': '#e5e5e5',
  '--g-tabbar-tab-active-color': '#e5e5e5',
}