/** * 梦匠 ArtStation 风格 - 深色主题 * 任务ID: JJC-20260520-001 * 创建时间: 2026-05-20 * * 基于 CSS 变量系统实现的深色模式 * 引入 theme-variables.css 后使用 */ /* ======================================== 深色主题配色方案 ======================================== */ /* 深色主题 - 自动检测 */ @media (prefers-color-scheme: dark) { :root { /* 背景色 - 深色渐变 */ --color-bg-primary: #0d1117; --color-bg-secondary: #161b22; --color-bg-tertiary: #21262d; --color-bg-elevated: #1c2128; --color-bg-overlay: rgba(0, 0, 0, 0.75); /* 表面色 */ --color-surface: #161b22; --color-surface-raised: #1c2128; --color-surface-overlay: rgba(22, 27, 34, 0.95); /* 文字色 - 高对比度 */ --color-text-primary: #f0f6fc; --color-text-secondary: #8b949e; --color-text-tertiary: #6e7681; --color-text-disabled: #484f58; --color-text-inverse: #0d1117; /* 边框色 */ --color-border-light: #21262d; --color-border: #30363d; --color-border-dark: #484f58; --color-border-focus: var(--color-primary-400); /* 主色调在深色模式下的调整 */ --color-primary-50: #312e81; --color-primary-100: #3730a3; --color-primary-200: #4338ca; --color-primary-300: #4f46e5; --color-primary-400: #6366f1; --color-primary-500: #818cf8; --color-primary-600: #a5b4fc; --color-primary-700: #c7d2fe; --color-primary-800: #e0e7ff; --color-primary-900: #eef2ff; /* 强调色在深色模式下的调整 */ --color-accent-50: #164e63; --color-accent-100: #155e75; --color-accent-200: #0e7490; --color-accent-300: #0891b2; --color-accent-400: #06b6d4; --color-accent-500: #22d3ee; --color-accent-600: #67e8f9; --color-accent-700: #a5f3fc; --color-accent-800: #cffafe; --color-accent-900: #ecfeff; /* 中性色 - 深色主题 */ --color-neutral-50: #111827; --color-neutral-100: #1f2937; --color-neutral-200: #374151; --color-neutral-300: #4b5563; --color-neutral-400: #6b7280; --color-neutral-500: #9ca3af; --color-neutral-600: #d1d5db; --color-neutral-700: #e5e7eb; --color-neutral-800: #f3f4f6; --color-neutral-900: #f9fafb; /* 成功/警告/错误色调整 */ --color-success-light: #064e3b; --color-success: #10b981; --color-success-dark: #34d399; --color-warning-light: #78350f; --color-warning: #f59e0b; --color-warning-dark: #fbbf24; --color-error-light: #7f1d1d; --color-error: #ef4444; --color-error-dark: #f87171; /* 阴影 - 深色主题 */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.24); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.24); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.16); --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5); --shadow-2xl: 0 35px 60px -15px rgba(0, 0, 0, 0.6); --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.24); /* 发光效果 */ --shadow-glow-primary: 0 0 20px rgba(129, 140, 248, 0.4); --shadow-glow-accent: 0 0 20px rgba(34, 211, 238, 0.4); /* 导航栏 - 深色 */ --navbar-bg: rgba(13, 17, 23, 0.95); /* 玻璃态 - 深色 */ --glass-bg: rgba(22, 27, 34, 0.8); --glass-border: rgba(255, 255, 255, 0.1); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* 输入框 - 深色 */ --input-bg: #0d1117; --input-border: #30363d; --input-focus-border: var(--color-primary-400); --input-focus-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); } } /* ======================================== 手动深色主题类使用: 或 ======================================== */ .dark, [data-theme="dark"] { /* 背景色 */ --color-bg-primary: #0d1117; --color-bg-secondary: #161b22; --color-bg-tertiary: #21262d; --color-bg-elevated: #1c2128; --color-bg-overlay: rgba(0, 0, 0, 0.75); /* 表面色 */ --color-surface: #161b22; --color-surface-raised: #1c2128; --color-surface-overlay: rgba(22, 27, 34, 0.95); /* 文字色 */ --color-text-primary: #f0f6fc; --color-text-secondary: #8b949e; --color-text-tertiary: #6e7681; --color-text-disabled: #484f58; --color-text-inverse: #0d1117; /* 边框色 */ --color-border-light: #21262d; --color-border: #30363d; --color-border-dark: #484f58; --color-border-focus: var(--color-primary-400); /* 主色调调整 */ --color-primary-50: #312e81; --color-primary-100: #3730a3; --color-primary-200: #4338ca; --color-primary-300: #4f46e5; --color-primary-400: #6366f1; --color-primary-500: #818cf8; --color-primary-600: #a5b4fc; --color-primary-700: #c7d2fe; --color-primary-800: #e0e7ff; --color-primary-900: #eef2ff; /* 强调色调整 */ --color-accent-50: #164e63; --color-accent-100: #155e75; --color-accent-200: #0e7490; --color-accent-300: #0891b2; --color-accent-400: #06b6d4; --color-accent-500: #22d3ee; --color-accent-600: #67e8f9; --color-accent-700: #a5f3fc; --color-accent-800: #cffafe; --color-accent-900: #ecfeff; /* 中性色 */ --color-neutral-50: #111827; --color-neutral-100: #1f2937; --color-neutral-200: #374151; --color-neutral-300: #4b5563; --color-neutral-400: #6b7280; --color-neutral-500: #9ca3af; --color-neutral-600: #d1d5db; --color-neutral-700: #e5e7eb; --color-neutral-800: #f3f4f6; --color-neutral-900: #f9fafb; /* 状态色 */ --color-success-light: #064e3b; --color-success: #10b981; --color-success-dark: #34d399; --color-warning-light: #78350f; --color-warning: #f59e0b; --color-warning-dark: #fbbf24; --color-error-light: #7f1d1d; --color-error: #ef4444; --color-error-dark: #f87171; /* 阴影 */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.24); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.24); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.16); --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5); --shadow-2xl: 0 35px 60px -15px rgba(0, 0, 0, 0.6); --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.24); /* 发光效果 */ --shadow-glow-primary: 0 0 20px rgba(129, 140, 248, 0.4); --shadow-glow-accent: 0 0 20px rgba(34, 211, 238, 0.4); /* 导航栏 */ --navbar-bg: rgba(13, 17, 23, 0.95); /* 玻璃态 */ --glass-bg: rgba(22, 27, 34, 0.8); --glass-border: rgba(255, 255, 255, 0.1); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* 输入框 */ --input-bg: #0d1117; --input-border: #30363d; --input-focus-border: var(--color-primary-400); --input-focus-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); } /* ======================================== 深色主题专用样式类 ======================================== */ /* 深色背景渐变 */ .dark-bg-gradient { background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #21262d 100%); } /* 深色卡片 */ .dark-card { background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); transition: all var(--transition-base); } .dark-card:hover { border-color: var(--color-primary-400); box-shadow: var(--shadow-lg), var(--shadow-glow-primary); } /* 深色按钮 */ .dark-btn-primary { background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600)); color: white; border: none; transition: all var(--transition-base); } .dark-btn-primary:hover { background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-500)); box-shadow: var(--shadow-glow-primary); } .dark-btn-secondary { background: var(--color-surface-raised); color: var(--color-text-primary); border: 1px solid var(--color-border); transition: all var(--transition-base); } .dark-btn-secondary:hover { border-color: var(--color-primary-400); color: var(--color-primary-400); } /* 深色输入框 */ .dark-input { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--color-text-primary); transition: all var(--transition-base); } .dark-input:focus { border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); outline: none; } .dark-input::placeholder { color: var(--color-text-tertiary); } /* 深色滚动条 */ .dark-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .dark-scrollbar::-webkit-scrollbar-track { background: var(--color-bg-secondary); } .dark-scrollbar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); } .dark-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); } /* ======================================== 主题切换过渡 ======================================== */ html, body { transition: background-color var(--transition-slow), color var(--transition-slow); } * { transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } /* 禁用首次加载时的过渡 */ .no-transition *, .no-transition *::before, .no-transition *::after { transition: none !important; } /* ======================================== 深色主题图片滤镜 ======================================== */ .dark img.auto-invert { filter: brightness(0.85) contrast(1.1); } /* Logo 在深色模式下反转 */ .dark .logo-invert { filter: brightness(0) invert(1); } /* ======================================== 代码块深色主题 ======================================== */ .dark code, .dark pre { background: var(--color-bg-primary); border-color: var(--color-border); } /* ======================================== ArtStation 风格深色特性 ======================================== */ /* 作品卡片悬停发光效果 */ .dark .art-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.3); } /* 渐变边框效果 */ .dark .gradient-border { position: relative; } .dark .gradient-border::before { content: ''; position: absolute; inset: 0; padding: 1px; background: linear-gradient(135deg, var(--color-primary-500), var(--color-accent-500)); border-radius: inherit; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: xor; -webkit-mask-composite: xor; pointer-events: none; } /* 霓虹效果 */ .dark .neon-text { color: var(--color-primary-400); text-shadow: 0 0 5px rgba(99, 102, 241, 0.5), 0 0 10px rgba(99, 102, 241, 0.3), 0 0 20px rgba(99, 102, 241, 0.2); } .dark .neon-border { border: 1px solid var(--color-primary-400); box-shadow: 0 0 5px rgba(99, 102, 241, 0.3), 0 0 10px rgba(99, 102, 241, 0.2), inset 0 0 5px rgba(99, 102, 241, 0.1); }