MovieLog_Server/css/themes.css

/* ============================================
   文件: css/themes.css
   说明: 界面配色主题（5 套经典配色）。

   生效方式：<html data-theme="<key>">（由 lib/theme.php 的 themeAttr() 输出）。
   本文件必须排在 css/style.css **之后**加载：[data-theme] 与 style.css 里作为
   兜底的 :root 优先级相同（都是 0,1,0），靠「后出现者胜」来覆盖。

   每套主题都要给全下面这一组变量，缺一个就会退回 style.css 的默认值：
     --primary / --primary-dark / --primary-light / --primary-rgb
     --bg-primary / --bg-secondary / --card-bg / --input-bg / --nav-bg
     --text-primary / --text-secondary / --border-color
     --shadow / --shadow-hover
     --scroll-thumb / --scroll-thumb-hover
   注意 --primary-rgb 必须与 --primary 同色（写成 "R, G, B"），
   页面里的淡色底/光晕一律用 rgba(var(--primary-rgb), α) 取色。

   另外每套都要声明 color-scheme：它决定浏览器原生控件（下拉、日期选择器、
   滚动条）走明色还是暗色渲染 —— 暗色主题少了这一条，日期输入框会是刺眼的白底。
   ============================================ */

/* ---------- 1. 复古票根（默认）：暖橙 + 浅灰白 ---------- */
[data-theme="ticket"] {
    color-scheme: light;
    --primary: #e67e22;
    --primary-dark: #d35400;
    --primary-light: #f39c12;
    --primary-rgb: 230, 126, 34;
    --bg-primary: #f0f2f5;
    --bg-secondary: #e8eaed;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --nav-bg: rgba(255, 255, 255, 0.92);
    --text-primary: #1a1a2e;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.12);
    --scroll-thumb: #d1d5db;
    --scroll-thumb-hover: #b0b4ba;
}

/* ---------- 2. 靛蓝：经典蓝 + 冷调浅灰 ---------- */
[data-theme="indigo"] {
    color-scheme: light;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #60a5fa;
    --primary-rgb: 37, 99, 235;
    --bg-primary: #f4f6fb;
    --bg-secondary: #e7ecf6;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --nav-bg: rgba(255, 255, 255, 0.92);
    --text-primary: #141a2e;
    --text-secondary: #64748b;
    --border-color: #e2e8f4;
    --shadow: 0 4px 24px rgba(30, 58, 138, 0.07), 0 1px 4px rgba(30, 58, 138, 0.05);
    --shadow-hover: 0 12px 48px rgba(30, 58, 138, 0.14);
    --scroll-thumb: #c7d2e4;
    --scroll-thumb-hover: #a8b8d2;
}

/* ---------- 3. 松林：墨绿 + 米灰白 ---------- */
[data-theme="forest"] {
    color-scheme: light;
    --primary: #2f855a;
    --primary-dark: #276749;
    --primary-light: #48bb78;
    --primary-rgb: 47, 133, 90;
    --bg-primary: #f2f6f3;
    --bg-secondary: #e6eee9;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --nav-bg: rgba(255, 255, 255, 0.92);
    --text-primary: #15251d;
    --text-secondary: #647a70;
    --border-color: #dfe8e2;
    --shadow: 0 4px 24px rgba(20, 60, 40, 0.07), 0 1px 4px rgba(20, 60, 40, 0.05);
    --shadow-hover: 0 12px 48px rgba(20, 60, 40, 0.14);
    --scroll-thumb: #cbd8d0;
    --scroll-thumb-hover: #aec2b6;
}

/* ---------- 4. 绛红：酒红 + 暖白 ---------- */
[data-theme="wine"] {
    color-scheme: light;
    --primary: #b03a5b;
    --primary-dark: #8e2d48;
    --primary-light: #d45c7d;
    --primary-rgb: 176, 58, 91;
    --bg-primary: #faf5f6;
    --bg-secondary: #f2e7ea;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --nav-bg: rgba(255, 255, 255, 0.92);
    --text-primary: #26161c;
    --text-secondary: #7a6a70;
    --border-color: #ece0e4;
    --shadow: 0 4px 24px rgba(90, 20, 40, 0.07), 0 1px 4px rgba(90, 20, 40, 0.05);
    --shadow-hover: 0 12px 48px rgba(90, 20, 40, 0.14);
    --scroll-thumb: #e0cdd4;
    --scroll-thumb-hover: #cbb0b9;
}

/* ---------- 5. 暗夜：深灰蓝底 + 靛紫点缀 ---------- */
[data-theme="midnight"] {
    color-scheme: dark;
    --primary: #7c5cf5;
    --primary-dark: #6a45e0;
    --primary-light: #9d84f8;
    --primary-rgb: 124, 92, 245;
    --bg-primary: #14161c;
    --bg-secondary: #1b1e26;
    --card-bg: #22262f;
    --input-bg: #1b1e26;
    --nav-bg: rgba(34, 38, 47, 0.92);
    --text-primary: #e8eaf0;
    --text-secondary: #9aa3b2;
    --border-color: #333846;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.6);
    --scroll-thumb: #3a3f4d;
    --scroll-thumb-hover: #4a5060;
}