Apply homepage palettes with a persistent header theme selector

Author: rodrix2000

IMPLEMENTATION-NOTES.md

@@ -166,6 +166,52 @@ keyboard default actions because the browser test interface did not advance
 native controls with Arrow, Space or Tab. No custom keyboard interception was
 added. No-JavaScript fallback coverage in this pass is source-based.
 
+### Homepage-wide palettes and header dropdown — 2026-08-30
+
+Starting from `881bed54a2f2172b455744ad32d67c2f232969e8`, selecting any of the six
+desktop themes applies a coordinated palette across the redesigned homepage:
+section backgrounds and gradients, text, buttons, focus accents, terminal panes,
+video play buttons and footer. A compact, labeled native select in the sticky
+header offers the same six choices plus **Sovereign**, the original default and
+reset option. The desktop screenshot, radio selection, dropdown and polite live
+status are synchronized. Sovereign has no selected desktop radio; its caption
+explicitly identifies the unchanged Tokyo Night screenshot as a desktop preview.
+
+This is a theme-inspired adaptation of page colors, not an OS theme installer.
+Official green logo assets, photographs and screenshots remain unmodified.
+The scope is the entire redesigned homepage, not the inherited manual, gallery
+or other secondary pages. Global upstream root tokens and layouts are untouched.
+
+Files: `index.html`, `assets/css/home.css`, new `assets/css/home-themes.css`,
+`assets/js/modules/home.js`, new `assets/js/theme-preference.js`,
+`tests/home-themes.mjs`, `bin/check`, `README.md` and this document.
+The existing design tokens remain the original fallback. Six optional CSS
+palettes override their values and derive coherent panel/border/gradient tones.
+The small early script restores an allowlisted saved preference before styles
+render. The main module handles controls and same-origin storage events; both
+storage access paths tolerate blocked storage and reject unknown values.
+Only `omarchy-sovereign-theme` is stored locally, with no transmission or tracking.
+Existing button movement remains, but palette color changes are immediate.
+
+The dropdown is hidden until initialized; without JavaScript the original
+design, default screenshot and all six static screenshot links remain available.
+No dependencies, image assets or theme animations were added. The inherited
+reduced-motion behavior and all homepage destination/download link policies are
+preserved.
+
+Regression coverage now includes both control directions for all six themes,
+original reset, saved and invalid values, blocked storage, cross-tab events,
+early restoration and static fallback links. All seven palettes meet 4.5:1 for
+the tested text/muted/accent roles on solid raised panels and primary-button
+text. This is a scoped contrast check, not a claim of full accessibility audit.
+Browser checks exercised all options, swatches, reload restoration, second-tab
+restoration and live cross-tab synchronization. Header layouts were checked at
+320, 390, 768, 1024 and 1440px without overlap or horizontal overflow. The mobile
+menu still opens, navigates to the themes section and closes after activation.
+Screenshots were visually reviewed; no-JavaScript fallback and reduced motion
+were checked by the source/regression suite. The prior keyboard-test-tool
+limitation remains; controls retain native select/radio semantics.
+
 ### Push-to-deploy automation — 2026-08-30
 
 Starting from `f728d6ab0d47da60b49269affa7cced2d2bd94e7`, the existing validation

README.md

@@ -26,6 +26,10 @@ community. Text, navigation, controls and terminal output are code-native.
 The six-theme preview pairs Tokyo Night, Catppuccin and Gruvbox with Black Gold,
 Black Turq and VHS 80 from the official theme gallery: gold, phosphor turquoise
 and retro tape colors that complement the Sovereign Machine direction.
+Selecting a swatch now applies that palette across the redesigned homepage.
+A matching header dropdown includes **Sovereign**, which restores the original
+design. The preference is saved locally and synchronized between homepage tabs;
+no operating-system settings or inherited secondary pages are changed.
 
 ## Run locally
 

assets/css/home-themes.css

@@ -0,0 +1,185 @@
+/* Optional homepage palettes. Unset / sovereign preserves the original design.
+   Names describe theme-inspired site colors, not exact desktop configurations. */
+html[data-site-theme="tokyo-night"] .home {
+  --sm-void: #10121d;
+  --sm-deep: #090b13;
+  --sm-text: #c0caf5;
+  --sm-muted: #a9b1d6;
+  --sm-cyan: #7dcfff;
+  --sm-gold: #7aa2f7;
+  --sm-magenta: #bb9af7;
+  --sm-blue: #7aa2f7;
+  --sm-green: #9ece6a;
+  --sm-danger: #f7768e;
+}
+
+html[data-site-theme="catppuccin"] .home {
+  --sm-void: #181825;
+  --sm-deep: #11111b;
+  --sm-text: #cdd6f4;
+  --sm-muted: #a6adc8;
+  --sm-cyan: #94e2d5;
+  --sm-gold: #cba6f7;
+  --sm-magenta: #f5c2e7;
+  --sm-blue: #89b4fa;
+  --sm-green: #a6e3a1;
+  --sm-danger: #f38ba8;
+}
+
+html[data-site-theme="gruvbox"] .home {
+  --sm-void: #1d2021;
+  --sm-deep: #141617;
+  --sm-text: #ebdbb2;
+  --sm-muted: #bdae93;
+  --sm-cyan: #8ec07c;
+  --sm-gold: #fabd2f;
+  --sm-magenta: #d3869b;
+  --sm-blue: #83a598;
+  --sm-green: #b8bb26;
+  --sm-danger: #fb4934;
+}
+
+html[data-site-theme="black-gold"] .home {
+  --sm-void: #080909;
+  --sm-deep: #040505;
+  --sm-text: #e8dfc8;
+  --sm-muted: #b4ac97;
+  --sm-cyan: #d7b65c;
+  --sm-gold: #e5c572;
+  --sm-magenta: #ad9360;
+  --sm-blue: #c6ac73;
+  --sm-green: #b8b26c;
+  --sm-danger: #e7a17d;
+}
+
+html[data-site-theme="black-turq"] .home {
+  --sm-void: #051111;
+  --sm-deep: #020809;
+  --sm-text: #def3ee;
+  --sm-muted: #93b6b1;
+  --sm-cyan: #8ce3d1;
+  --sm-gold: #5ad6c7;
+  --sm-magenta: #79b7ad;
+  --sm-blue: #62c6d1;
+  --sm-green: #a3d9a4;
+  --sm-danger: #f0a699;
+}
+
+html[data-site-theme="vhs-80"] .home {
+  --sm-void: #151415;
+  --sm-deep: #0b0c0e;
+  --sm-text: #f3eddb;
+  --sm-muted: #bab7aa;
+  --sm-cyan: #54cbd0;
+  --sm-gold: #e7c85b;
+  --sm-magenta: #ef8390;
+  --sm-blue: #58b2ca;
+  --sm-green: #a4c872;
+  --sm-danger: #ef8390;
+}
+
+html[data-site-theme]:not([data-site-theme="sovereign"]) .home {
+  --sm-panel: color-mix(in srgb, var(--sm-void), var(--sm-text) 4%);
+  --sm-panel-raised: color-mix(in srgb, var(--sm-void), var(--sm-text) 7%);
+  --sm-line: color-mix(in srgb, var(--sm-void), var(--sm-muted) 25%);
+  --sm-line-strong: color-mix(in srgb, var(--sm-void), var(--sm-muted) 65%);
+  --sm-cyan-soft: color-mix(in srgb, var(--sm-cyan), var(--sm-text) 35%);
+  --sm-gold-soft: color-mix(in srgb, var(--sm-gold), var(--sm-text) 35%);
+  --sm-aurora-cyan: color-mix(in srgb, var(--sm-cyan) 11.5%, transparent);
+  --sm-aurora-gold: color-mix(in srgb, var(--sm-gold) 10.5%, transparent);
+  --sm-aurora-magenta: color-mix(in srgb, var(--sm-magenta) 8.5%, transparent);
+  --sm-aurora-blue: color-mix(in srgb, var(--sm-blue) 10.5%, transparent);
+  --sm-aurora-green: color-mix(in srgb, var(--sm-green) 9%, transparent);
+  --sm-focus-glow: color-mix(in srgb, var(--sm-cyan) 3.5%, transparent);
+  --sm-band-blue: color-mix(in srgb, var(--sm-void), var(--sm-blue) 6%);
+  --sm-band-violet: color-mix(in srgb, var(--sm-void), var(--sm-magenta) 6%);
+  --sm-band-warm: color-mix(in srgb, var(--sm-void), var(--sm-gold) 6%);
+  --sm-band-green: color-mix(in srgb, var(--sm-void), var(--sm-green) 6%);
+}
+
+/* Keep these controls compact, native and usable with touch or a keyboard. */
+.site-nav:has(.site-theme:not([hidden])) {
+  gap: clamp(0.75rem, 1.5vw, 1.5rem);
+  grid-template-columns: 1fr auto auto auto;
+}
+
+.site-theme {
+  min-width: 0;
+  position: relative;
+  width: 10rem;
+}
+
+.site-theme[hidden] {
+  display: none;
+}
+
+.site-theme__label {
+  color: var(--sm-muted);
+  font-family: var(--sm-font-interface);
+  font-size: 0.5rem;
+  font-weight: 700;
+  left: 0.65rem;
+  letter-spacing: 0.1em;
+  pointer-events: none;
+  position: absolute;
+  text-transform: uppercase;
+  top: 0.2rem;
+}
+
+.site-theme select {
+  appearance: none;
+  background: var(--sm-panel);
+  border: 1px solid var(--sm-muted);
+  border-radius: 2px;
+  color: var(--sm-text);
+  cursor: pointer;
+  display: block;
+  font-family: var(--sm-font-interface);
+  font-size: 0.65rem;
+  font-weight: 700;
+  min-height: 2.8rem;
+  padding: 0.9rem 1.6rem 0.25rem 0.65rem;
+  width: 100%;
+}
+
+.site-theme::after {
+  border-bottom: 1.5px solid var(--sm-cyan);
+  border-right: 1.5px solid var(--sm-cyan);
+  content: '';
+  height: 0.4rem;
+  pointer-events: none;
+  position: absolute;
+  right: 0.65rem;
+  top: 1.15rem;
+  transform: rotate(45deg);
+  width: 0.4rem;
+}
+
+.home .sm-button {
+  transition-property: transform;
+}
+
+.home .video__play svg path:first-child {
+  fill: var(--sm-gold);
+}
+
+.home .video__play svg path:last-child {
+  fill: var(--sm-deep);
+}
+
+@media (max-width: 39.99rem) {
+  .site-nav:has(.site-theme:not([hidden])) {
+    gap: 0.5rem;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+  }
+
+  .site-theme {
+    justify-self: end;
+    max-width: 10rem;
+    width: 100%;
+  }
+
+  .site-theme select {
+    font-size: 0.6rem;
+  }
+}

assets/css/home.css

@@ -20,6 +20,7 @@
   --sm-aurora-magenta: rgb(255 79 179 / 0.085);
   --sm-aurora-blue: rgb(122 162 247 / 0.105);
   --sm-aurora-green: rgb(158 206 106 / 0.09);
+  --sm-focus-glow: rgb(85 246 226 / 0.035);
   --sm-band-blue: #071018;
   --sm-band-violet: #0d0a14;
   --sm-band-warm: #100c07;
@@ -401,7 +402,7 @@ html:has(.home) {
   background: var(--sm-deep);
   border: 1px solid var(--sm-line-strong);
   border-radius: 3px;
-  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35), 0 0 28px rgb(85 246 226 / 0.035);
+  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35), 0 0 28px var(--sm-focus-glow);
   min-width: 0;
   overflow: hidden;
   position: relative;
@@ -545,7 +546,7 @@ html:has(.home) {
 .machine[data-focus="browser"] [data-pane="browser"] {
   background: var(--sm-panel-raised);
   border-color: var(--sm-cyan);
-  box-shadow: inset 0 0 0 1px var(--sm-cyan), inset 0 0 22px rgb(85 246 226 / 0.035);
+  box-shadow: inset 0 0 0 1px var(--sm-cyan), inset 0 0 22px var(--sm-focus-glow);
 }
 
 .machine[data-focus="terminal"] [data-pane="terminal"] .machine-pane__label,
@@ -938,7 +939,7 @@ html:has(.home) {
 .command-terminal {
   background: var(--sm-panel);
   border: 1px solid var(--sm-cyan);
-  box-shadow: 0 0 30px rgb(85 246 226 / 0.035);
+  box-shadow: 0 0 30px var(--sm-focus-glow);
   min-height: 28rem;
   overflow: hidden;
   position: relative;

assets/js/modules/home.js

@@ -31,6 +31,8 @@ const THEMES = {
   },
 };
 
+const THEME_STORAGE_KEY = 'omarchy-sovereign-theme';
+
 const COMMAND_TEXT = `~ > omarchy
 Omarchy command center
 
@@ -96,23 +98,63 @@ function setupPaneFocus() {
 function setupThemePreview() {
   const preview = document.querySelector('[data-theme-preview]');
   const image = preview?.querySelector('[data-theme-image]');
-  const name = preview?.querySelector('[data-theme-name]');
   const status = preview?.querySelector('[data-theme-status]');
   if (!(preview instanceof HTMLElement) || !(image instanceof HTMLImageElement)) return;
 
-  document.querySelectorAll('input[name="theme-preview"]').forEach((input) => {
+  const select = document.querySelector('[data-site-theme-select]');
+  const controls = document.querySelectorAll('input[name="theme-preview"]');
+  const validTheme = (value) => value === 'sovereign' || Object.hasOwn(THEMES, value);
+
+  const applyTheme = (value, persist = false) => {
+    const selected = validTheme(value) ? value : 'sovereign';
+    const previewKey = selected === 'sovereign' ? 'tokyo-night' : selected;
+    const theme = THEMES[previewKey];
+
+    document.documentElement.dataset.siteTheme = selected;
+    preview.dataset.themePreview = previewKey;
+    image.src = theme.image;
+    image.alt = theme.alt;
+    controls.forEach((input) => { input.checked = input.value === selected; });
+    if (select instanceof HTMLSelectElement) select.value = selected;
+    if (status != null) {
+      status.textContent = selected === 'sovereign'
+        ? 'Original site palette · Tokyo Night desktop preview.'
+        : `${theme.name} palette applied to this page · ${theme.name} desktop preview.`;
+    }
+
+    if (persist) {
+      try {
+        window.localStorage.setItem(THEME_STORAGE_KEY, selected);
+      } catch {
+        // The control still works when browser storage is unavailable.
+      }
+    }
+  };
+
+  let savedTheme = 'sovereign';
+  try {
+    savedTheme = window.localStorage.getItem(THEME_STORAGE_KEY) ?? 'sovereign';
+  } catch {
+    // Keep the original palette if storage is blocked or unavailable.
+  }
+  applyTheme(savedTheme);
+
+  controls.forEach((input) => {
     input.addEventListener('change', () => {
       if (!(input instanceof HTMLInputElement) || !input.checked) return;
-      const theme = THEMES[input.value];
-      if (theme == null) return;
-
-      preview.dataset.themePreview = input.value;
-      image.src = theme.image;
-      image.alt = theme.alt;
-      if (name != null) name.textContent = theme.name;
-      if (status != null) status.textContent = `${theme.name} preview selected.`;
+      if (validTheme(input.value)) applyTheme(input.value, true);
     });
   });
+
+  if (select instanceof HTMLSelectElement) {
+    select.addEventListener('change', () => applyTheme(select.value, true));
+    const label = select.closest('.site-theme');
+    if (label instanceof HTMLElement) label.hidden = false;
+  }
+
+  window.addEventListener('storage', (event) => {
+    if (event.key === THEME_STORAGE_KEY || event.key === null) applyTheme(event.newValue);
+  });
 }
 
 function setupCommandReplay() {

assets/js/theme-preference.js

@@ -0,0 +1,10 @@
+// Restore only this homepage's palette before its styles render. No tracking.
+(() => {
+  const themes = ['sovereign', 'tokyo-night', 'catppuccin', 'gruvbox', 'black-gold', 'black-turq', 'vhs-80'];
+  try {
+    const saved = window.localStorage.getItem('omarchy-sovereign-theme');
+    if (themes.includes(saved)) document.documentElement.dataset.siteTheme = saved;
+  } catch {
+    // Storage can be unavailable; the original design remains the fallback.
+  }
+})();

bin/check

@@ -26,7 +26,7 @@ Dir.chdir(root) do
   %w[bin/serve bin/prepare-preview bin/deploy-preview bin/check].each do |path|
     run!(RbConfig.ruby, "-c", path)
   end
-  %w[assets/js/script.js assets/js/modules/home.js assets/js/modules/video.js].each do |path|
+  %w[assets/js/script.js assets/js/theme-preference.js assets/js/modules/home.js assets/js/modules/video.js].each do |path|
     run!("node", "--input-type=module", "--check", stdin_data: File.read(path))
   end
   run!("git", "diff", "--check")