From 85946a2b40ea214fd88f2e37379ae2844a1bb5f8 Mon Sep 17 00:00:00 2001
From: Caleb Braaten <git@cbraaten.dev>
Date: Tue, 13 Jan 2026 03:45:27 -0800
Subject: [PATCH] Add a non-js placeholder for the theme picker

---
 src/frontend/clientJS/theme-picker.ts    | 3 +++
 src/frontend/components/theme-picker.tsx | 5 +++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/frontend/clientJS/theme-picker.ts b/src/frontend/clientJS/theme-picker.ts
index 4e25471..9f59d15 100644
--- a/src/frontend/clientJS/theme-picker.ts
+++ b/src/frontend/clientJS/theme-picker.ts
@@ -1,3 +1,6 @@
+// JS is enabled, show theme picker interface
+const elem = document.querySelector(".theme-controls")?.classList.remove('hidden')
+
 // Theme switching functionality
 const LIGHT_THEMES = ['latte', 'solarized-light', 'gruvbox-light'];
 const DARK_THEMES = ['frappe', 'macchiato', 'mocha', 'solarized-dark', 'gruvbox-dark', 'nord', 'dracula', 'one-dark', 'tokyo-night'];
diff --git a/src/frontend/components/theme-picker.tsx b/src/frontend/components/theme-picker.tsx
index 56b535f..69bcaf7 100644
--- a/src/frontend/components/theme-picker.tsx
+++ b/src/frontend/components/theme-picker.tsx
@@ -24,9 +24,10 @@ const THEME_NAMES: Record<string, string> = {
 
 export function ThemePicker() {
     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>
-            <div className="theme-controls">
+            <div className="theme-controls hidden">
                 <div className="theme-mode-toggle">
                     <button
                         className="mode-btn active"