refactor(theme): follow system preferences instead of using button to toggle #1

Currently, the theme is by default black and the user must use the button located in the footer to change it.

This patch removes this button and follows the prefers-color-scheme media query: the website will follow the browser's theme. If the media query is unset, it uses the light theme.

+9 -27

1 changed file

Diff round #1

expand all

internal

tmpl

base.html

+9 -27

internal/tmpl/base.html

··· 178 178 </div> 179 179 <div class="flex flex-col gap-1.5"> 180 180 <div class="text-spot-text font-bold text-xs uppercase tracking-wide mb-1">Settings</div> 181 - <button onclick="toggleTheme()" class="text-xs text-spot-secondary hover:text-spot-text hover:underline inline-flex gap-1.5 items-center transition text-left"> 182 - <svg class="w-3.5 h-3.5 shrink-0 theme-icon-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg> 183 - <svg class="w-3.5 h-3.5 shrink-0 theme-icon-light hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg> 184 - <span class="theme-text-dark">Light mode</span> 185 - <span class="theme-text-light hidden">Dark mode</span> 186 - </button> 187 181 <button onclick="document.getElementById('shortcuts-dialog').showModal()" class="text-xs text-spot-secondary hover:text-spot-text hover:underline inline-flex gap-1.5 items-center transition text-left"> 188 182 <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"/></svg> 189 183 Keyboard shortcuts ··· 230 224 </main> 231 225 232 226 <script> 233 - function toggleTheme() { 234 - var current = document.documentElement.getAttribute('data-theme'); 235 - var next = current === 'dark' ? 'light' : 'dark'; 236 - document.documentElement.setAttribute('data-theme', next); 237 - localStorage.setItem('theme', next); 238 - updateThemeIcons(next); 227 + function updateTheme(dark) { 228 + document.documentElement.setAttribute('data-theme', dark ? "dark" : "light"); 239 229 } 240 - function updateThemeIcons(theme) { 241 - document.querySelectorAll('.theme-icon-dark').forEach(function(el) { 242 - el.classList.toggle('hidden', theme === 'light'); 243 - }); 244 - document.querySelectorAll('.theme-icon-light').forEach(function(el) { 245 - el.classList.toggle('hidden', theme === 'dark'); 246 - }); 247 - document.querySelectorAll('.theme-text-dark').forEach(function(el) { 248 - el.classList.toggle('hidden', theme === 'light'); 249 - }); 250 - document.querySelectorAll('.theme-text-light').forEach(function(el) { 251 - el.classList.toggle('hidden', theme === 'dark'); 252 - }); 253 - } 254 - updateThemeIcons(document.documentElement.getAttribute('data-theme') || 'dark'); 255 230 256 231 function closeAnnotate(el) { 257 232 var form = el.closest('.annotate-form'); ··· 297 272 htmx.ajax('GET', window.location.pathname + window.location.search, '#main-content'); 298 273 } 299 274 275 + document.addEventListener('DOMContentLoaded', () => { 276 + const query = window.matchMedia("(prefers-color-scheme: dark)"); 277 + // fallback to light theme if unset 278 + query.addEventListener("change", (e) => updateTheme(e.matches)); 279 + updateTheme(query.matches); 280 + }); 281 + 300 282 document.addEventListener('mouseup', function(e) { 301 283 var sel = window.getSelection(); 302 284 var text = sel.toString().trim();

History

2 rounds 0 comments

anhgelus.world submitted #1 3d

interdiff

1 commit

expand

0c1810a9

refactor(theme): follow system preferences instead of using button to toggle

merge conflicts detected

expand

internal/tmpl/base.html:178

expand 0 comments

anhgelus.world submitted #0 3d

diff

1 commit

expand

7a1eadb5

refactor(theme): follow system preferences instead of using button to toggle

expand 0 comments

Configure Feed

Configure Feed

History