feat: add auto-theme that follows system dark/light preference

New default theme mgit-auto uses @media (prefers-color-scheme) to automatically switch between light and dark mode.
2026-02-06 00:02:08 +00:00 · 2026-02-06 00:51:52 +01:00
parent c6b90f1153
commit df0513443e
1 changed files with 77 additions and 0 deletions
--- a/public/assets/css/theme-mgit-auto.css
+++ b/public/assets/css/theme-mgit-auto.css
@@ -0,0 +1,77 @@
+/* mGit Auto Theme — follows system preference */
+gitea-theme-meta-info {
+  --theme-display-name: "mGit Auto";
+}
+
+/* Light mode (default) */
+:root {
+  --is-dark-theme: false;
+  --color-primary: #2563eb;
+  --color-primary-dark-1: #1e40af;
+  --color-primary-dark-2: #1e3a8a;
+  --color-primary-light-1: #3b82f6;
+  --color-primary-light-2: #60a5fa;
+  --color-primary-alpha-20: rgba(37, 99, 235, 0.1);
+  --color-primary-alpha-60: rgba(37, 99, 235, 0.6);
+  --color-secondary: #64748b;
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-body: #ffffff;
+  --color-box-body: #f8fafc;
+  --color-box-body-highlight: #f1f5f9;
+  --color-text: #1e293b;
+  --color-text-light: #64748b;
+  --color-text-light-1: #475569;
+  --color-text-light-2: #94a3b8;
+  --color-secondary-dark-2: #e2e8f0;
+  --color-secondary-dark-1: #cbd5e1;
+  --color-code-bg: #f8fafc;
+  --color-input-background: #ffffff;
+  --color-input-border: #e2e8f0;
+  --color-shadow: rgba(0, 0, 0, 0.06);
+  --color-accent: #2563eb;
+  --fonts-regular: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --fonts-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code', 'Consolas', monospace;
+}
+
+body::before {
+  content: '';
+  display: block;
+  height: 3px;
+  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark-2) 100%);
+}
+
+/* Dark mode override */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --is-dark-theme: true;
+    --color-primary: #3b82f6;
+    --color-primary-dark-1: #2563eb;
+    --color-primary-dark-2: #1e40af;
+    --color-primary-light-1: #60a5fa;
+    --color-primary-light-2: #93c5fd;
+    --color-primary-alpha-20: rgba(59, 130, 246, 0.2);
+    --color-primary-alpha-60: rgba(59, 130, 246, 0.6);
+    --color-secondary: #94a3b8;
+    --color-body: #0f172a;
+    --color-box-body: #1e293b;
+    --color-box-body-highlight: #334155;
+    --color-text: #f1f5f9;
+    --color-text-light: #94a3b8;
+    --color-text-light-1: #cbd5e1;
+    --color-text-light-2: #64748b;
+    --color-secondary-dark-2: #334155;
+    --color-secondary-dark-1: #475569;
+    --color-code-bg: #1e293b;
+    --color-input-background: #1e293b;
+    --color-input-border: #334155;
+    --color-shadow: rgba(0, 0, 0, 0.4);
+    --color-accent: #3b82f6;
+  }
+
+  body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}