Implement light/dark theme toggle with CSS tokens and chart theming

frontend/charts.js

@@ -12,20 +12,31 @@ let radarChartInstance = null;
 let barChartInstance = null;
 let chartJsLoadPromise = null;
 let latestRenderToken = 0;
+let cachedChartPalette = null;
+
+if (typeof document !== 'undefined') {
+    document.addEventListener('themechange', () => {
+        cachedChartPalette = null;
+        applyThemeToExistingCharts();
+    });
+}
 
 export function generateCharts(subjects) {
     if (!Array.isArray(subjects) || subjects.length === 0) return;
 
     const labels = subjects.map((subject) => shortenName(subject.SubjectName));
     const myScores = subjects.map((subject) => subject.scoreValue ?? getNumericScore(subject.ScoreDisplay, subject.Score));
     const avgScores = subjects.map((subject) => subject.classAvgValue ?? getNumericScore(subject.ClassAVGScoreDisplay, subject.ClassAVGScore));
+    const palette = getChartThemePalette();
     const renderToken = ++latestRenderToken;
 
     ensureChartJsLoaded()
         .then((ChartCtor) => {
             if (renderToken !== latestRenderToken) return;
-            updateRadarChart(ChartCtor, labels, myScores, avgScores);
-            updateBarChart(ChartCtor, labels, myScores, avgScores);
+
+            const palette = getCachedChartThemePalette();
+            updateRadarChart(ChartCtor, labels, myScores, avgScores, palette);
+            updateBarChart(ChartCtor, labels, myScores, avgScores, palette);
         })
         .catch((error) => {
             console.warn('Failed to load Chart.js', error);
@@ -98,7 +109,7 @@ function ensureChartJsLoaded() {
     return chartJsLoadPromise;
 }
 
-function updateRadarChart(ChartCtor, labels, myScores, avgScores) {
+function updateRadarChart(ChartCtor, labels, myScores, avgScores, palette) {
     const radarCanvas = document.getElementById('radarChart');
     const radarCtx = radarCanvas?.getContext('2d');
     if (!radarCtx) return;
@@ -116,8 +127,8 @@ function updateRadarChart(ChartCtor, labels, myScores, avgScores) {
                         borderColor: '#6366f1',
                         borderWidth: 2,
                         pointBackgroundColor: '#6366f1',
-                        pointBorderColor: '#fff',
-                        pointHoverBackgroundColor: '#fff',
+                        pointBorderColor: palette.surface,
+                        pointHoverBackgroundColor: palette.surface,
                         pointHoverBorderColor: '#6366f1'
                     },
                     {
@@ -127,8 +138,8 @@ function updateRadarChart(ChartCtor, labels, myScores, avgScores) {
                         borderColor: '#10b981',
                         borderWidth: 2,
                         pointBackgroundColor: '#10b981',
-                        pointBorderColor: '#fff',
-                        pointHoverBackgroundColor: '#fff',
+                        pointBorderColor: palette.surface,
+                        pointHoverBackgroundColor: palette.surface,
                         pointHoverBorderColor: '#10b981'
                     }
                 ]
@@ -142,17 +153,17 @@ function updateRadarChart(ChartCtor, labels, myScores, avgScores) {
                         max: 100,
                         ticks: {
                             stepSize: 20,
-                            color: '#94a3b8',
+                            color: palette.textMuted,
                             backdropColor: 'transparent'
                         },
                         grid: {
-                            color: 'rgba(148, 163, 184, 0.2)'
+                            color: palette.grid
                         },
                         angleLines: {
-                            color: 'rgba(148, 163, 184, 0.2)'
+                            color: palette.grid
                         },
                         pointLabels: {
-                            color: '#f8fafc',
+                            color: palette.textSecondary,
                             font: {
                                 size: 12
                             }
@@ -163,7 +174,7 @@ function updateRadarChart(ChartCtor, labels, myScores, avgScores) {
                     legend: {
                         position: 'bottom',
                         labels: {
-                            color: '#f8fafc',
+                            color: palette.textMain,
                             padding: 20,
                             font: {
                                 size: 13
@@ -182,7 +193,7 @@ function updateRadarChart(ChartCtor, labels, myScores, avgScores) {
     radarChartInstance.update('none');
 }
 
-function updateBarChart(ChartCtor, labels, myScores, avgScores) {
+function updateBarChart(ChartCtor, labels, myScores, avgScores, palette) {
     const barCanvas = document.getElementById('barChart');
     const barCtx = barCanvas?.getContext('2d');
     if (!barCtx) return;
@@ -217,28 +228,28 @@ function updateBarChart(ChartCtor, labels, myScores, avgScores) {
                 scales: {
                     x: {
                         grid: {
-                            color: 'rgba(148, 163, 184, 0.1)'
+                            color: palette.gridSubtle
                         },
                         ticks: {
-                            color: '#94a3b8'
+                            color: palette.textMuted
                         }
                     },
                     y: {
                         beginAtZero: true,
                         max: 100,
                         grid: {
-                            color: 'rgba(148, 163, 184, 0.1)'
+                            color: palette.gridSubtle
                         },
                         ticks: {
-                            color: '#94a3b8'
+                            color: palette.textMuted
                         }
                     }
                 },
                 plugins: {
                     legend: {
                         position: 'bottom',
                         labels: {
-                            color: '#f8fafc',
+                            color: palette.textMain,
                             padding: 20,
                             font: {
                                 size: 13
@@ -257,6 +268,81 @@ function updateBarChart(ChartCtor, labels, myScores, avgScores) {
     barChartInstance.update('none');
 }
 
+function getChartThemePalette() {
+    const styles = getComputedStyle(document.documentElement);
+    const readVar = (name, fallback) => {
+        const value = styles.getPropertyValue(name).trim();
+        return value || fallback;
+    };
+
+    return {
+        textMain: readVar('--color-text-main', '#0f172a'),
+        textSecondary: readVar('--color-text-secondary', '#334155'),
+        textMuted: readVar('--color-text-muted', '#64748b'),
+        surface: readVar('--color-surface-elevated', '#ffffff'),
+        grid: readVar('--color-border-subtle', 'rgba(148, 163, 184, 0.22)'),
+        gridSubtle: readVar('--color-border-extra-subtle', 'rgba(148, 163, 184, 0.16)')
+    };
+}
+
+function getCachedChartThemePalette() {
+    if (!cachedChartPalette) {
+        cachedChartPalette = getChartThemePalette();
+    }
+    return cachedChartPalette;
+}
+
+function applyThemeToExistingCharts() {
+    const palette = getCachedChartThemePalette();
+
+    if (radarChartInstance) {
+        const radarOptions = radarChartInstance.options;
+        const radarScale = radarOptions.scales?.r;
+        const radarLegendLabels = radarOptions.plugins?.legend?.labels;
+        if (radarScale) {
+            radarScale.ticks.color = palette.textMuted;
+            radarScale.grid.color = palette.grid;
+            radarScale.angleLines.color = palette.grid;
+            radarScale.pointLabels.color = palette.textSecondary;
+        }
+        if (radarLegendLabels) {
+            radarLegendLabels.color = palette.textMain;
+        }
+
+        radarChartInstance.data.datasets.forEach((dataset) => {
+            dataset.pointBorderColor = palette.surface;
+            dataset.pointHoverBackgroundColor = palette.surface;
+        });
+
+        radarChartInstance.update('none');
+    }
+
+    if (barChartInstance) {
+        const barOptions = barChartInstance.options;
+        const xScale = barOptions.scales?.x;
+        const yScale = barOptions.scales?.y;
+        const barLegendLabels = barOptions.plugins?.legend?.labels;
+        if (xScale) {
+            xScale.grid.color = palette.gridSubtle;
+            xScale.ticks.color = palette.textMuted;
+        }
+        if (yScale) {
+            yScale.grid.color = palette.gridSubtle;
+            yScale.ticks.color = palette.textMuted;
+        }
+        if (barLegendLabels) {
+            barLegendLabels.color = palette.textMain;
+        }
+
+        barChartInstance.update('none');
+    }
+}
+
+export function __setChartInstancesForTest(instances = {}) {
+    if (Object.hasOwn(instances, 'radar')) radarChartInstance = instances.radar;
+    if (Object.hasOwn(instances, 'bar')) barChartInstance = instances.bar;
+}
+
 function clearCanvas(canvasId) {
     const canvas = document.getElementById(canvasId);
     const context = canvas?.getContext?.('2d');

frontend/main.js

@@ -4,6 +4,7 @@
 
 import './style.css';
 import { checkDisclaimer, loadGradesData } from './storage.js';
+import { setupThemeToggle } from './theme.js';
 
 // ── Lazy init 狀態 ──────────────────────
 let syncInited = false;
@@ -27,6 +28,7 @@ export async function ensureShareReady() {
 
 // ── 首屏必要初始化 ──────────────────────
 document.addEventListener('DOMContentLoaded', () => {
+    setupThemeToggle();
     checkDisclaimer();
     loadGradesData();
 

frontend/styles/header.css

@@ -16,7 +16,7 @@
 
     padding-right: 24px;
 
-    background: rgba(28, 28, 30, 0.72);
+    background: var(--color-header-bg);
 
     backdrop-filter: blur(20px) saturate(1.8);
 
@@ -154,6 +154,11 @@
 
 }
 
+.header-actions {
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+}
+
 
 
 .time-info {
@@ -238,7 +243,7 @@
 
     height: 40px;
 
-    padding: 0 24px;
+    padding: 0 18px;
 
     background: var(--color-primary);
 
@@ -248,7 +253,7 @@
 
     color: var(--md-sys-color-on-primary);
 
-    font-size: 14px;
+    font-size: 13px;
 
     font-weight: 500;
 
@@ -260,6 +265,10 @@
 
     touch-action: manipulation;
 
+    white-space: nowrap;
+
+    flex-shrink: 0;
+
 }
 
 
@@ -476,5 +485,3 @@ visibility: visible;
 
 }
 
-
-

frontend/styles/modal.css

@@ -6,7 +6,7 @@
 
     inset: 0;
 
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--color-modal-overlay);
 
     backdrop-filter: blur(10px);
 
@@ -382,7 +382,7 @@ visibility: visible;
 
     border-color: var(--color-primary);
 
-    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
+    box-shadow: 0 0 0 3px var(--color-focus-ring);
 
 }
 

frontend/styles/motion.css

@@ -132,7 +132,7 @@
 
 ::selection {
 
-    background: rgba(0, 122, 255, 0.25);
+    background: var(--color-selection);
 
 }
 

frontend/styles/onboarding.css

@@ -20,7 +20,7 @@
 
     inset: 0;
 
-    background: rgba(7, 10, 18, 0.68);
+    background: var(--color-tour-overlay);
 
 }
 
@@ -30,17 +30,17 @@
 
     position: fixed;
 
-    border: 2px solid rgba(168, 199, 250, 0.95);
+    border: 2px solid var(--color-tour-highlight);
 
     border-radius: 12px;
 
     box-shadow:
 
-        0 0 0 9999px rgba(7, 10, 18, 0.68),
+        0 0 0 9999px var(--color-tour-overlay),
 
-        0 0 0 1px rgba(255, 255, 255, 0.15) inset,
+        0 0 0 1px var(--color-tour-highlight-inset) inset,
 
-        0 0 24px rgba(168, 199, 250, 0.45);
+        0 0 24px var(--color-tour-highlight-glow);
 
     transition: all 0.2s var(--ease);
 
@@ -164,7 +164,7 @@
 
     z-index: 1550;
 
-    background: rgba(7, 10, 18, 0.68);
+    background: var(--color-tour-overlay);
 
     display: flex;
 

frontend/styles/responsive.css

@@ -40,6 +40,11 @@
 
     }
 
+    .header-actions {
+        width: auto;
+        justify-content: flex-end;
+    }
+
 
 
     .logo-text h1 {
@@ -190,5 +195,3 @@
 
 }
 
-
-