Fix theme bootstrapping and mobile search button

- Initialize root theme data from stored selection before paint - Hide the search label on mobile and tighten button padding
2026-08-14 17:02:11 +00:00 · 2026-04-18 18:07:48 -05:00
3 changed files with 13 additions and 1 deletions
@@ -117,6 +117,11 @@ function RootDocument({ children }: { children: React.ReactNode }) {
    <html lang="en">
      <head>
        <HeadContent />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var d=document.documentElement,s='clawhub-theme-selection',k='clawhub-theme',n='clawhub-theme-name',l='clawdhub-theme';var sel;try{var raw=localStorage.getItem(s);if(raw){sel=JSON.parse(raw)}}catch(e){}if(!sel){var m=localStorage.getItem(k),t=localStorage.getItem(n);if(m||t){sel={theme:t||'claw',mode:m||'system'}}else{var lg=localStorage.getItem(l);if(lg){var map={dark:'dark',light:'light',system:'system',defaultTheme:'dark',docsTheme:'light',lightTheme:'dark',landingTheme:'dark',newTheme:'dark',openknot:'dark',fieldmanual:'dark',clawdash:'light'};sel={theme:'claw',mode:map[lg]||'system'}}}}if(!sel)sel={theme:'claw',mode:'system'};var themes=['claw'],modes=['system','light','dark'];if(themes.indexOf(sel.theme)<0)sel.theme='claw';if(modes.indexOf(sel.mode)<0)sel.mode='system';var resolved=sel.mode==='system'?(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):sel.mode;d.dataset.theme=resolved;d.dataset.themeResolved=resolved;d.dataset.themeMode=sel.mode;d.dataset.themeFamily=sel.theme;if(resolved==='dark')d.classList.add('dark');else d.classList.remove('dark')}catch(e){}})()`,
+          }}
+        />
      </head>
      <body>
        <AppProviders>
@@ -438,7 +438,8 @@ function SkillsHome() {
            />
            <kbd>/</kbd>
            <button type="submit" className="home-v2-search-go">
-              Search <ArrowRight size={16} />
+              <span className="home-v2-search-go-label">Search</span>{" "}
+              <ArrowRight size={16} />
            </button>
          </form>
        </div>
@@ -8747,6 +8747,12 @@ html.theme-transition::view-transition-new(theme) {
    padding: 20px;
    gap: 16px;
  }
+  .home-v2-search-go-label {
+    display: none;
+  }
+  .home-v2-search-go {
+    padding: 13px 16px;
+  }
 }

 /* ═══ HOME V2 — Full-width overrides ═══ */