Bring the light/dark pair over from bigtrippr, and point "system" at it

ad5582c · Gabriel Morell · 2026-09-14 02:57

5 files +65 -4
Message
{commit_body(@commit)}

Files changed

modified assets/tailwind.config.js
+61 −0
@@ -73,6 +73,67 @@ module.exports = {
73 73 "warning": "#fef08a",
74 74 "error": "#fca5a5",
75 75 },
76 + // The light/dark pair, ported from bigtrippr's daisyUI v5 themes so
77 + // the family looks the same across apps. These two are what "system"
78 + // resolves to, and the only ones declaring a `color-scheme`, so the
79 + // browser renders form controls and scrollbars to match.
80 + light: {
81 + "color-scheme": "light",
82 + "primary": "oklch(64% 0.076 19)",
83 + "primary-content": "oklch(98% 0.010 19)",
84 + "secondary": "oklch(55% 0.060 19)",
85 + "secondary-content": "oklch(98% 0.010 19)",
86 + "accent": "oklch(0% 0 0)",
87 + "accent-content": "oklch(100% 0 0)",
88 + "neutral": "oklch(44% 0.017 285.786)",
89 + "neutral-content": "oklch(98% 0 0)",
90 + "base-100": "oklch(98% 0.008 24)",
91 + "base-200": "oklch(96% 0.014 24)",
92 + "base-300": "oklch(92% 0.022 24)",
93 + "base-content": "oklch(25% 0.050 24)",
94 + "info": "oklch(62% 0.214 259.815)",
95 + "info-content": "oklch(97% 0.014 254.604)",
96 + "success": "oklch(70% 0.14 182.503)",
97 + "success-content": "oklch(98% 0.014 180.72)",
98 + "warning": "oklch(66% 0.179 58.318)",
99 + "warning-content": "oklch(98% 0.022 95.277)",
100 + "error": "oklch(58% 0.253 17.585)",
101 + "error-content": "oklch(96% 0.015 12.422)",
102 + "--rounded-box": "0.5rem",
103 + "--rounded-btn": "0.25rem",
104 + "--rounded-badge": "0.25rem",
105 + "--border-btn": "1.5px",
106 + },
107 + dark: {
108 + "color-scheme": "dark",
109 + "primary": "oklch(64% 0.076 19)",
110 + "primary-content": "oklch(10% 0.010 19)",
111 + "secondary": "oklch(58% 0.090 19)",
112 + "secondary-content": "oklch(98% 0.010 19)",
113 + // A rose in primary's hue family rather than daisyUI's violet, held
114 + // light enough to read on a base-100 at 30% lightness -- the depth
115 + // comes from hue and chroma, not from going literally dark.
116 + "accent": "oklch(64% 0.135 15)",
117 + "accent-content": "oklch(10% 0.012 15)",
118 + "neutral": "oklch(37% 0.044 257.287)",
119 + "neutral-content": "oklch(98% 0.003 247.858)",
120 + "base-100": "oklch(30.33% 0.016 252.42)",
121 + "base-200": "oklch(25.26% 0.014 253.1)",
122 + "base-300": "oklch(20.15% 0.012 254.09)",
123 + "base-content": "oklch(97.807% 0.029 256.847)",
124 + "info": "oklch(58% 0.158 241.966)",
125 + "info-content": "oklch(97% 0.013 236.62)",
126 + "success": "oklch(60% 0.118 184.704)",
127 + "success-content": "oklch(98% 0.014 180.72)",
128 + "warning": "oklch(66% 0.179 58.318)",
129 + "warning-content": "oklch(98% 0.022 95.277)",
130 + "error": "oklch(58% 0.253 17.585)",
131 + "error-content": "oklch(96% 0.015 12.422)",
132 + "--rounded-box": "0.5rem",
133 + "--rounded-btn": "0.25rem",
134 + "--rounded-badge": "0.25rem",
135 + "--border-btn": "1.5px",
136 + },
76 137 },
77 138 "lofi",
78 139 "black"
modified templates/_theme_toggle.html
+2 −2
@@ -5,11 +5,11 @@
5 5 </div>
6 6 <ul tabindex="0" class="dropdown-content menu bg-base-200 border border-base-300 rounded-box z-10 mt-1 w-44 p-1 shadow-lg">
7 7 <li><button type="button" onclick="window.dmsSetTheme('system')"><i class="fas fa-display fa-fw"></i> System</button></li>
8 − {% for theme in ["her", "afterdark", "forest", "sky", "clays", "stones", "lofi", "black"] %}
8 + {% for theme in ["light", "dark", "her", "afterdark", "forest", "sky", "clays", "stones", "lofi", "black"] %}
9 9 <li>
10 10 <button type="button" onclick="window.dmsSetTheme('{{ theme }}')" class="flex items-center justify-between">
11 11 <span class="capitalize">{{ theme }}</span>
12 − <span class="size-3 rounded-full border border-base-content/20" data-theme="{{ theme }}" style="background: var(--color-primary)"></span>
12 + <span class="size-3 rounded-full border border-base-content/20" data-theme="{{ theme }}" style="background: oklch(var(--p))"></span>
13 13 </button>
14 14 </li>
15 15 {% endfor %}
modified templates/root.html
+2 −2
@@ -11,8 +11,8 @@
11 11 <style>body { font-family: "B612 Mono", monospace; }</style>
12 12 <script>
13 13 (() => {
14 − const SYSTEM_DARK = "afterdark";
15 − const SYSTEM_LIGHT = "her";
14 + const SYSTEM_DARK = "dark";
15 + const SYSTEM_LIGHT = "light";
16 16 const mq = window.matchMedia("(prefers-color-scheme: dark)");
17 17 const systemTheme = () => mq.matches ? SYSTEM_DARK : SYSTEM_LIGHT;
18 18 window.dmsSetTheme = (theme) => {

Parents: 56f5292