Caleb/Blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a non-js placeholder for the theme picker

Browse Source
This commit is contained in:
Caleb Braaten 2026-01-13 03:45:27 -08:00
parent efff385570
commit 85946a2b40
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/frontend/clientJS/theme-picker.ts
View File

@ -1,3 +1,6 @@
// JS is enabled, show theme picker interface
const elem = document.querySelector(".theme-controls")?.classList.remove('hidden')
// Theme switching functionality // Theme switching functionality
const LIGHT_THEMES = ['latte', 'solarized-light', 'gruvbox-light']; const LIGHT_THEMES = ['latte', 'solarized-light', 'gruvbox-light'];
const DARK_THEMES = ['frappe', 'macchiato', 'mocha', 'solarized-dark', 'gruvbox-dark', 'nord', 'dracula', 'one-dark', 'tokyo-night']; const DARK_THEMES = ['frappe', 'macchiato', 'mocha', 'solarized-dark', 'gruvbox-dark', 'nord', 'dracula', 'one-dark', 'tokyo-night'];

3
src/frontend/components/theme-picker.tsx
View File

@ -25,8 +25,9 @@ const THEME_NAMES: Record<string, string> = {
export function ThemePicker() { export function ThemePicker() {
return ( return (
<div className="themePicker sheet-background"> <div className="themePicker sheet-background">
<noscript>Enable Javascript to select a theme</noscript>
<label htmlFor="theme" className="hidden">Theme</label> <label htmlFor="theme" className="hidden">Theme</label>
<div className="theme-controls"> <div className="theme-controls hidden">
<div className="theme-mode-toggle"> <div className="theme-mode-toggle">
<button <button
className="mode-btn active" className="mode-btn active"