theme.css 6.11 KB
/* 全局主题变量定义 - 默认为浅色主题,防止加载时黑屏 */
:root {
  color-scheme: light;
  --color-bg: #ffffff;
  --color-text: rgba(0, 0, 0, 0.88);
  --color-text-secondary: #999;
  --color-primary: #1e70ff;
  --color-primary-dark: #1373ea;
  --color-primary-hover: #1e70ff;
  --color-accent: #2871f6;
  --color-border: #e0e0e0;
  --color-info: #e0e0e0;
  --color-card: #f3f5f7;
  --color-title: #f3f5f7;
  --color-tertiary: #f8f9fa;
  --color-secondary: #888;
  --color-hover: #f7f8f9;
  --color-btn-hover: #4a90e2;
  --color-danger: #ff7875;
  --color-danger-hover: #ff4d4f;
  --color-code-bg: #f5f5f5;
  --color-table-header: #f5f5f5;
  --color-table-bottom: #f5f5f5;
  --box-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --color-table-hover: #f0f4fa;
  --color-input: #fff;
  --color-btn-primary: #1e70ff;
  --color-btn-primary-hover: #4a90e2;
  --color-sidebar-active: #1e70ff;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --table-row-even: #f8f9fa;
  --table-row-odd: #ffffff;
  --table-row-hover: #e6f3ff;
  --icon-filter: brightness(0) saturate(100%) invert(35%);
  --tab-selected: #e7ebee;
  --table-other-text: #000000a3;
  --color-bag-hover: #e7ebee;
  --color-bag-active: #ffffff;
  --color-chat-input: #ffffff;
  --color-login-bg: #ffffff;
  --color-login-card: #ffffff;
  --checkbox__inner: #cccccc;
  --box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
  --color-hover-bar: #e7ebee;
  --color-table-th: #f5f5f5;
  --color-table-td1: #5b5b5b;
  --color-table-td2: #5c5c5c;
  --color-card-bg: #ffffff;
  --resize-bar-color: #c2d8ff;
}

.theme-dark {
  color-scheme: dark;
  --color-bg: #141518;
  --color-text: #ffffff;
  --color-text-secondary: #999;
  --color-primary: #3399ff;
  --color-primary-hover: #2980d9;
  --color-accent: #00d4aa;
  --color-border: #35363a;
  --color-card: #18191a;
  --color-tertiary: #23232a;
  --color-secondary: #969696;
  --color-hover: #212222;
  --color-btn-hover: #2980d9;
  --color-danger: #ff4d4f;
  --color-danger-hover: #d9363e;
  --color-code-bg: #2d2d2d;
  --color-table-header: #2d2d2d;
  --box-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.18);
  --color-table-hover: #343746;
  --color-input: #2d2d2d;
  --color-sidebar-active: #52d49f;
  --table-row-even: #23252e;
  --table-row-odd: #1e1f25;
  --table-row-hover: #343746;
  --icon-filter: brightness(0) saturate(100%) invert(55%);
  --color-tab-bar: #1f2020;
  --color-tab-bar-active: #3c3c3c;
  --color-tab-bar-color: #ffffff;
  --user-question-bg: #2a2a2a;
  --user-question-text: #e0e0e0;
  --ai-answer-bg: transparent;
  --ai-answer-text: #e0e0e0;
  --color-table-bottom: #2a2b2b;
  --tab-selected: #252626;
  --table-other-text: #ffffffad;
  --color-bag-hover: #37373d;
  --color-bag-active: hsla(0, 0%, 100%, 0.92);
  --color-chat-input: #252626;
  --color-login-bg: #0f0f0f;
  --color-login-card: rgba(26, 26, 26, 0.95);
  --checkbox__inner: rgba(255, 255, 255, 0.3);
  --box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --color-hover-bar: #2a2a2a;
  --color-table-th: #35363a;
  --color-table-td1: #ffffff;
  --color-table-td2: #ffffff;
  --color-card-bg: #2a2a2a;
  --resize-bar-color: #409eff;
  --color-pdf-bg: #323639;
}

.theme-light {
  color-scheme: light;
  --color-bg: #ffffff;
  --color-text: rgba(0, 0, 0, 0.88);
  --color-text-secondary: #999;
  --color-primary: #1e70ff;
  --color-primary-hover: #1e70ff;
  --color-accent: #2871f6;
  --color-border: #e0e0e0;
  --color-card: #f3f5f7;
  --color-tertiary: #f8f9fa;
  --color-secondary: #888;
  --color-hover: #f7f8f9;
  --color-btn-hover: #4a90e2;
  --color-danger: #ff7875;
  --color-danger-hover: #ff4d4f;
  --color-code-bg: #f5f5f5;
  --color-table-header: #f5f5f5;
  --box-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --color-table-hover: #f0f4fa;
  --color-input: #fff;
  --table-row-even: #f8f9fa;
  --table-row-odd: #ffffff;
  --table-row-hover: #e6f3ff;
  --icon-filter: brightness(0) saturate(100%) invert(35%);
  --color-tab-bar: #d3e3fd;
  --color-tab-bar-active: #ffffff;
  --color-tab-bar-color: #1f2020;
  --user-question-bg: #d3e3fd;
  --user-question-text: #1f2020;
  --ai-answer-bg: transparent;
  --ai-answer-text: #242424;
  --color-table-bottom: #f5f5f5;
  --tab-selected: #e7ebee;
  --table-other-text: #000000a3;
  --color-bag-hover: #e7ebee;
  --color-bag-active: #ffffff;
  --color-chat-input: #ffffff;
  --color-login-bg: #ffffff;
  --color-login-card: #ffffff;
  --checkbox__inner: #cccccc;
  --box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
  --color-hover-bar: #e7ebee;
  --color-table-th: #f5f5f5;
  --color-table-td1: #5b5b5b;
  --color-table-td2: #5c5c5c;
  --color-card-bg: #ffffff;
  --resize-bar-color: #c2d8ff;
  --color-pdf-bg: #f0f0f0;
}

body,
html {
  background: var(--color-bg);
  color: var(--color-text);
  transition:
    background 0.2s,
    color 0.2s;
}

/* 图标颜色统一 - 只针对特定图标 */
img[src*="writing.png"]:not([src*="logo.png"]) {
  filter: var(--icon-filter, brightness(0) saturate(100%) invert(60%));
  transition: filter 0.2s;
}

/* 确保logo不受过滤器影响 */
img[src*="logo.png"],
.logo-img,
.logo-icon,
.logo {
  filter: none !important;
}

/* Logo宽高比修复 */
.logo-img {
  width: auto !important;
  height: 100% !important;
  object-fit: contain !important;
}

.logo {
  width: auto !important;
  height: 64px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* 统一所有图标的颜色 */
.nav-item i,
.nav-item img,
.nav-icon {
  color: var(--color-text-secondary);
  transition:
    color 0.2s,
    filter 0.2s;
}

.theme-light .nav-item i,
.theme-light .nav-item img,
.theme-light .nav-icon {
  color: var(--color-text-secondary);
  filter: var(--icon-filter, brightness(0) saturate(100%) invert(40%));
}

.theme-dark .nav-item i,
.theme-dark .nav-item img,
.theme-dark .nav-icon {
  color: var(--color-text-secondary);
  filter: var(--icon-filter, brightness(0) saturate(100%) invert(60%));
}