feat: add system dark theme foundation

2026-09-13 15:23:33 +07:00
parent b7b49a3a63
commit 8ffbd7f9ec
5 changed files with 130 additions and 2 deletions
@@ -0,0 +1,108 @@
+:root {
+  color-scheme: light dark;
+  --canvas: #f2f5ee;
+  --surface-elevated: #ffffff;
+  --surface-raised: #fbfcf9;
+  --surface-control: #f3f6f1;
+  --text-primary: #092226;
+  --text-secondary: #526662;
+  --text-tertiary: #647572;
+  --text-on-dark: #f5f8f3;
+  --border-strong: #cbd6ce;
+  --border-subtle: #d6dfd7;
+  --shadow-color: #14333812;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --canvas: #071719;
+    --surface-elevated: #0d2325;
+    --surface-raised: #10282a;
+    --surface-control: #0a1d1f;
+    --text-primary: #edf5ef;
+    --text-secondary: #b8c7c3;
+    --text-tertiary: #93a7a2;
+    --text-on-dark: #f4f8f5;
+    --border-strong: #3a5658;
+    --border-subtle: #294244;
+    --shadow-color: #00000052;
+    --paper: var(--canvas);
+    --surface: var(--surface-elevated);
+    --surface-soft: var(--surface-raised);
+    --surface-field: var(--surface-control);
+    --ink: var(--text-primary);
+    --text: var(--text-primary);
+    --text-muted: var(--text-secondary);
+    --text-subtle: var(--text-tertiary);
+    --line: var(--border-strong);
+    --border: var(--border-strong);
+    --border-soft: var(--border-subtle);
+    --focus: #c9f45b;
+    --success: #c9ec8a;
+    --success-soft: #243e25;
+    --warning: #f3ce7a;
+    --warning-soft: #46391d;
+    --danger: #ffafa3;
+    --danger-soft: #4b2928;
+  }
+
+  body { background: var(--canvas); color: var(--text-primary); }
+  .brand-name span, .topbar nav a, .live-badge, .eyebrow, .overline,
+  .intro-copy > p, .active-filters a, .result-count, .spot-rank,
+  .spot-topline, .spot-meta, .bait-line div span, .spot-stats span,
+  .data-note, .principles p, .principles article > span, .official-note,
+  .privacy, .field-help, .record-row > span, .record-row > time,
+  .report-form label, .screenshot-retry label, .back, .note,
+  .moderation-summary > p, .moderation-summary dt,
+  .moderation-provenance summary, .legal-page p, .legal-page li {
+    color: var(--text-secondary);
+  }
+
+  .topbar nav a.active, .eyebrow b, .state h2, .admin-kpis strong,
+  .data-passport, .data-passport dd, .legal-page h1, .legal-page h2 {
+    color: var(--text-primary);
+  }
+
+  .active-filters span, .spot-card, .record-table, .report-form,
+  .periods, .detail-grid aside, .screenshot-retry, .moderation-card,
+  .admin-kpis > a, .admin-kpis > article, .admin-dashboard-grid > section,
+  .source-health-grid article, .state, .load-more, .signal-more {
+    background: var(--surface-elevated);
+    border-color: var(--border-subtle);
+  }
+
+  .alpha-banner { background: linear-gradient(90deg, #132a26, #102426); color: var(--text-secondary); border-color: var(--border-strong); }
+  .alpha-banner strong { color: var(--text-primary); }
+  .alpha-banner__cta { background: var(--lime); color: #082226; }
+
+  .spot-card:hover { background: var(--surface-raised); border-color: #6f8988; box-shadow: 0 18px 40px var(--shadow-color); }
+  .report-form input, .report-form textarea, .report-form select,
+  .moderation-actions textarea { background: var(--surface-control); color: var(--text-primary); border-color: var(--border-strong); }
+  .record-head, .no-proof { background: var(--surface-raised); }
+  .record-row, .periods > div, .catch-list article, .detail-grid aside li,
+  .bait-line, .spot-stats, .moderation-summary dl div,
+  .moderation-actions, .how-it-works, .signal-heading {
+    border-color: var(--border-subtle);
+  }
+
+  .signal-card { background: linear-gradient(145deg, #20291f, #151f20); border-color: #756b3d; }
+  .signal-card > p, .signal-card dd, .signal-heading p { color: var(--text-secondary); }
+  .signal-card dt { color: #b9ae82; }
+  .signal-card .missing-note { background: #453c20; color: #f0d889; }
+  .signal-card .data-passport { background: #172628; border-color: #59605a; }
+  .source-chip { background: color-mix(in srgb, var(--chip) 24%, var(--surface-elevated)); }
+  .notice.success { background: var(--success-soft); color: var(--success); }
+  .notice.warning, .data-quality { background: var(--warning-soft); color: var(--warning); }
+  .notice.error { background: var(--danger-soft); color: var(--danger); }
+  .moderation-summary blockquote { background: var(--surface-raised); color: var(--text-secondary); }
+  .moderation-actions .reject { background: var(--danger-soft); color: var(--danger); }
+  .moderation-actions .delete { color: var(--danger); border-color: #82504c; }
+  .activity-timeline { background: var(--surface-elevated); border-color: var(--border-subtle); }
+  .timeline-chart { border-color: var(--border-strong); background: repeating-linear-gradient(to top, transparent 0, transparent 35px, #294244 36px); }
+  .timeline-slot strong { color: var(--text-primary); }
+  .timeline-slot small, .activity-legend { color: var(--text-tertiary); }
+}
+
+@media print {
+  :root { color-scheme: light; }
+}