|
5 | 5 | <link rel="icon" type="image/png" href="/app-icon.png" /> |
6 | 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
7 | 7 | <title>OmniSearch</title> |
| 8 | + <style> |
| 9 | + html, |
| 10 | + body { |
| 11 | + background: #262b32; |
| 12 | + } |
| 13 | + </style> |
| 14 | + <script> |
| 15 | + (() => { |
| 16 | + try { |
| 17 | + const THEME_STORAGE_KEY = "omnisearch_theme_mode"; |
| 18 | + const THEME_PRESET_STORAGE_KEY = "omnisearch_theme_preset"; |
| 19 | + const palettes = { |
| 20 | + slate: { |
| 21 | + dark: { |
| 22 | + "--bg-deep": "#171b22", |
| 23 | + "--bg-mid": "#262b32", |
| 24 | + "--body-glow-a": "rgba(86, 123, 184, 0.18)", |
| 25 | + "--body-glow-b": "rgba(122, 179, 255, 0.16)", |
| 26 | + }, |
| 27 | + light: { |
| 28 | + "--bg-deep": "#f0f3f7", |
| 29 | + "--bg-mid": "#dfe5ed", |
| 30 | + "--body-glow-a": "rgba(93, 127, 189, 0.18)", |
| 31 | + "--body-glow-b": "rgba(118, 171, 245, 0.16)", |
| 32 | + }, |
| 33 | + }, |
| 34 | + aurora: { |
| 35 | + dark: { |
| 36 | + "--bg-deep": "#07090f", |
| 37 | + "--bg-mid": "#0d1322", |
| 38 | + "--body-glow-a": "rgba(41, 116, 255, 0.22)", |
| 39 | + "--body-glow-b": "rgba(86, 212, 153, 0.15)", |
| 40 | + }, |
| 41 | + light: { |
| 42 | + "--bg-deep": "#eef4ff", |
| 43 | + "--bg-mid": "#d8e6fb", |
| 44 | + "--body-glow-a": "rgba(58, 124, 227, 0.24)", |
| 45 | + "--body-glow-b": "rgba(71, 190, 150, 0.2)", |
| 46 | + }, |
| 47 | + }, |
| 48 | + nordic: { |
| 49 | + dark: { |
| 50 | + "--bg-deep": "#0b1620", |
| 51 | + "--bg-mid": "#162635", |
| 52 | + "--body-glow-a": "rgba(59, 132, 180, 0.2)", |
| 53 | + "--body-glow-b": "rgba(86, 199, 187, 0.18)", |
| 54 | + }, |
| 55 | + light: { |
| 56 | + "--bg-deep": "#eef7fb", |
| 57 | + "--bg-mid": "#d9ebf3", |
| 58 | + "--body-glow-a": "rgba(86, 160, 194, 0.22)", |
| 59 | + "--body-glow-b": "rgba(93, 197, 184, 0.18)", |
| 60 | + }, |
| 61 | + }, |
| 62 | + ember: { |
| 63 | + dark: { |
| 64 | + "--bg-deep": "#160f10", |
| 65 | + "--bg-mid": "#2a1d21", |
| 66 | + "--body-glow-a": "rgba(242, 131, 82, 0.2)", |
| 67 | + "--body-glow-b": "rgba(255, 176, 85, 0.14)", |
| 68 | + }, |
| 69 | + light: { |
| 70 | + "--bg-deep": "#fff3eb", |
| 71 | + "--bg-mid": "#f7dfd2", |
| 72 | + "--body-glow-a": "rgba(229, 132, 83, 0.2)", |
| 73 | + "--body-glow-b": "rgba(255, 186, 91, 0.16)", |
| 74 | + }, |
| 75 | + }, |
| 76 | + cedar: { |
| 77 | + dark: { |
| 78 | + "--bg-deep": "#09110f", |
| 79 | + "--bg-mid": "#14241d", |
| 80 | + "--body-glow-a": "rgba(70, 158, 122, 0.18)", |
| 81 | + "--body-glow-b": "rgba(120, 220, 171, 0.16)", |
| 82 | + }, |
| 83 | + light: { |
| 84 | + "--bg-deep": "#eff7f1", |
| 85 | + "--bg-mid": "#dcebdd", |
| 86 | + "--body-glow-a": "rgba(66, 155, 117, 0.18)", |
| 87 | + "--body-glow-b": "rgba(109, 209, 161, 0.16)", |
| 88 | + }, |
| 89 | + }, |
| 90 | + solar: { |
| 91 | + dark: { |
| 92 | + "--bg-deep": "#15120b", |
| 93 | + "--bg-mid": "#2a2417", |
| 94 | + "--body-glow-a": "rgba(212, 164, 70, 0.18)", |
| 95 | + "--body-glow-b": "rgba(244, 214, 115, 0.14)", |
| 96 | + }, |
| 97 | + light: { |
| 98 | + "--bg-deep": "#fbf5e7", |
| 99 | + "--bg-mid": "#efe2be", |
| 100 | + "--body-glow-a": "rgba(201, 160, 67, 0.18)", |
| 101 | + "--body-glow-b": "rgba(236, 204, 111, 0.14)", |
| 102 | + }, |
| 103 | + }, |
| 104 | + }; |
| 105 | + |
| 106 | + const mode = localStorage.getItem(THEME_STORAGE_KEY) === "light" ? "light" : "dark"; |
| 107 | + const preset = localStorage.getItem(THEME_PRESET_STORAGE_KEY) || "slate"; |
| 108 | + const palette = palettes[preset] || palettes.slate; |
| 109 | + const root = document.documentElement; |
| 110 | + |
| 111 | + root.setAttribute("data-theme", mode); |
| 112 | + root.setAttribute("data-theme-preset", palette === palettes[preset] ? preset : "slate"); |
| 113 | + |
| 114 | + Object.entries(palette[mode]).forEach(([token, value]) => { |
| 115 | + root.style.setProperty(token, value); |
| 116 | + }); |
| 117 | + } catch { |
| 118 | + // Ignore startup theme bootstrap failures and let React apply theme normally. |
| 119 | + } |
| 120 | + })(); |
| 121 | + </script> |
8 | 122 | </head> |
9 | 123 |
|
10 | 124 | <body> |
|
0 commit comments