Add Material 3 palettes and segmented tabs

Author: Bikram Gole

about.html

@@ -63,6 +63,12 @@
         <option value="paper">Paper Link</option>
         <option value="blackflag">Black Flag Uprising</option>
       </select>
+      <label for="m3-palette-select" class="theme-top-label m3-palette-label">M3</label>
+      <select id="m3-palette-select" class="theme-top-select m3-palette-select" aria-label="Material 3 palette">
+        <option value="lavender">Lavender</option>
+        <option value="emerald">Emerald</option>
+        <option value="sunset">Sunset</option>
+      </select>
     </div>
   </header>
 

contact.html

@@ -63,6 +63,12 @@
         <option value="paper">Paper Link</option>
         <option value="blackflag">Black Flag Uprising</option>
       </select>
+      <label for="m3-palette-select" class="theme-top-label m3-palette-label">M3</label>
+      <select id="m3-palette-select" class="theme-top-select m3-palette-select" aria-label="Material 3 palette">
+        <option value="lavender">Lavender</option>
+        <option value="emerald">Emerald</option>
+        <option value="sunset">Sunset</option>
+      </select>
     </div>
   </header>
 

index.html

@@ -63,6 +63,12 @@
         <option value="paper">Paper Link</option>
         <option value="blackflag">Black Flag Uprising</option>
       </select>
+      <label for="m3-palette-select" class="theme-top-label m3-palette-label">M3</label>
+      <select id="m3-palette-select" class="theme-top-select m3-palette-select" aria-label="Material 3 palette">
+        <option value="lavender">Lavender</option>
+        <option value="emerald">Emerald</option>
+        <option value="sunset">Sunset</option>
+      </select>
       <button id="theme-cycle-btn" class="theme-cycle-btn" type="button" aria-label="Cycle theme">↻</button>
     </div>
   </header>

script.js

@@ -131,6 +131,7 @@ const quizStartBtn = document.getElementById("quiz-start");
 const quizResetBtn = document.getElementById("quiz-reset");
 const quizScore = document.getElementById("quiz-score");
 const headerThemeSelect = document.getElementById("header-theme-select");
+const material3PaletteSelect = document.getElementById("m3-palette-select");
 const themeCycleBtn = document.getElementById("theme-cycle-btn");
 const heroName = document.getElementById("hero-name");
 const heroStatus = document.getElementById("hero-status");
@@ -144,6 +145,7 @@ const miniTerminalTheme = document.getElementById("mini-terminal-theme");
 const NEPAL_TIMEZONE = "Asia/Kathmandu";
 const BS_CONVERTER_URL = "https://cdn.jsdelivr.net/npm/nepali-date-library@1.1.9/+esm";
 const THEME_STORAGE_KEY = "neoThemeVariant.v1";
+const M3_PALETTE_STORAGE_KEY = "neoMaterial3Palette.v1";
 const ACTION_STORAGE_KEY = "neoAutoAction.v1";
 const HERO_TYPED_KEY = "neoHeroTyped.v1";
 const MINI_PROMPT = "╰─❯";
@@ -168,6 +170,7 @@ const THEME_OPTIONS = [
   "paper",
   "blackflag",
 ];
+const MATERIAL3_PALETTES = ["lavender", "emerald", "sunset"];
 const MAX_TERMINAL_LINES = 220;
 const TERMINAL_COMMANDS = [
   "help", "whoami", "mission", "status", "clear",
@@ -181,6 +184,7 @@ let launches = 0;
 let adToBsConverter = null;
 let startPersonaQuiz = null;
 let currentTheme = "neo";
+let currentMaterial3Palette = "lavender";
 let terminalHistory = [];
 let terminalHistoryIndex = 0;
 let terminalDraft = "";
@@ -727,6 +731,11 @@ function applyTheme(theme, notify = false) {
     miniTerminalTheme.textContent = `theme: ${selected}`;
   }
 
+  document.body.classList.toggle("m3-palette-active", selected === "material3");
+  if (selected === "material3") {
+    applyMaterial3Palette(currentMaterial3Palette, false);
+  }
+
   try {
     window.localStorage.setItem(THEME_STORAGE_KEY, selected);
   } catch (error) {
@@ -739,33 +748,73 @@ function applyTheme(theme, notify = false) {
   if (notify) showToast(`Theme changed: ${selected}`);
 }
 
+function applyMaterial3Palette(palette, notify = false) {
+  const selected = MATERIAL3_PALETTES.includes(palette) ? palette : "lavender";
+  currentMaterial3Palette = selected;
+  document.documentElement.dataset.m3Palette = selected;
+  document.body.dataset.m3Palette = selected;
+  if (material3PaletteSelect) {
+    material3PaletteSelect.value = selected;
+  }
+
+  try {
+    window.localStorage.setItem(M3_PALETTE_STORAGE_KEY, selected);
+  } catch (error) {
+    // Ignore storage errors.
+  }
+
+  if (notify && currentTheme === "material3") {
+    showToast(`M3 palette: ${selected}`);
+  }
+}
+
 function initThemeSwitcher() {
   let savedTheme = "neo";
   let urlTheme = null;
+  let savedPalette = "lavender";
   try {
     urlTheme = getThemeFromUrl();
     const storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
+    const storedPalette = window.localStorage.getItem(M3_PALETTE_STORAGE_KEY);
     savedTheme = storedTheme || urlTheme || "neo";
+    savedPalette = MATERIAL3_PALETTES.includes(storedPalette) ? storedPalette : "lavender";
     if (!storedTheme && urlTheme) {
       window.localStorage.setItem(THEME_STORAGE_KEY, urlTheme);
     }
   } catch (error) {
     savedTheme = "neo";
+    savedPalette = "lavender";
   }
 
+  applyMaterial3Palette(savedPalette, false);
   applyTheme(savedTheme, false);
   window.addEventListener("pageshow", () => {
     let latestTheme = "neo";
+    let latestPalette = "lavender";
     try {
       latestTheme = window.localStorage.getItem(THEME_STORAGE_KEY) || getThemeFromUrl() || "neo";
+      const storedPalette = window.localStorage.getItem(M3_PALETTE_STORAGE_KEY);
+      latestPalette = MATERIAL3_PALETTES.includes(storedPalette) ? storedPalette : "lavender";
     } catch (error) {
       latestTheme = "neo";
+      latestPalette = "lavender";
+    }
+    if (latestPalette !== currentMaterial3Palette) {
+      applyMaterial3Palette(latestPalette, false);
     }
     if (latestTheme !== currentTheme) {
       applyTheme(latestTheme, false);
     }
   });
   window.addEventListener("storage", (event) => {
+    if (event.key === M3_PALETTE_STORAGE_KEY && event.newValue) {
+      if (!MATERIAL3_PALETTES.includes(event.newValue)) return;
+      if (event.newValue !== currentMaterial3Palette) {
+        applyMaterial3Palette(event.newValue, false);
+      }
+      return;
+    }
+
     if (event.key !== THEME_STORAGE_KEY || !event.newValue) return;
     if (!THEME_OPTIONS.includes(event.newValue)) return;
     if (event.newValue !== currentTheme) {
@@ -776,6 +825,10 @@ function initThemeSwitcher() {
     applyTheme(event.target.value, true);
   });
 
+  material3PaletteSelect?.addEventListener("change", (event) => {
+    applyMaterial3Palette(event.target.value, true);
+  });
+
   themeCycleBtn?.addEventListener("click", () => {
     const idx = THEME_OPTIONS.indexOf(currentTheme);
     const next = THEME_OPTIONS[(idx + 1 + THEME_OPTIONS.length) % THEME_OPTIONS.length];
@@ -1436,6 +1489,9 @@ function initCommandPalette() {
     { label: "Theme: Sunset Warp", keywords: "theme sunset orange", run: () => applyTheme("sunset", true) },
     { label: "Theme: Liquid Glass", keywords: "theme liquid glass apple", run: () => applyTheme("liquidglass", true) },
     { label: "Theme: Material 3", keywords: "theme material3 google", run: () => applyTheme("material3", true) },
+    { label: "M3 Palette: Lavender", keywords: "material3 palette lavender", run: () => applyMaterial3Palette("lavender", true) },
+    { label: "M3 Palette: Emerald", keywords: "material3 palette emerald", run: () => applyMaterial3Palette("emerald", true) },
+    { label: "M3 Palette: Sunset", keywords: "material3 palette sunset", run: () => applyMaterial3Palette("sunset", true) },
     { label: "Theme: Paper Link", keywords: "theme paper", run: () => applyTheme("paper", true) },
     { label: "Theme: Black Flag Uprising", keywords: "theme blackflag anarchy", run: () => applyTheme("blackflag", true) },
     { label: "Mode: Toggle Matrix Rain", keywords: "matrix rain mode", run: () => toggleMatrixMode() },

styles.css

@@ -768,6 +768,11 @@ nav a.active {
   text-transform: uppercase;
 }
 
+.m3-palette-label,
+.m3-palette-select {
+  display: none;
+}
+
 .theme-top-select {
   border: 1px solid rgba(107, 155, 227, 0.44);
   border-radius: 7px;
@@ -3142,3 +3147,60 @@ body[data-theme="material3"] .site-footer {
   background: rgba(50, 52, 67, 0.8);
   padding: 0.48rem 0.84rem;
 }
+
+/* Material 3 extras: segmented tabs + palette presets. */
+body[data-theme="material3"] .m3-palette-label,
+body[data-theme="material3"] .m3-palette-select {
+  display: inline-flex;
+}
+
+body[data-theme="material3"] nav {
+  background: rgba(63, 64, 83, 0.62);
+  border: 1px solid rgba(189, 182, 220, 0.28);
+  border-radius: 999px;
+  padding: 0.16rem;
+  gap: 0.16rem;
+  box-shadow: inset 0 1px 0 rgba(242, 236, 255, 0.1);
+}
+
+body[data-theme="material3"] nav a {
+  min-width: 5.2rem;
+  justify-content: center;
+}
+
+body[data-theme="material3"][data-m3-palette="lavender"] {
+  --blue: #d0bcff;
+  --blue-2: #ebe1ff;
+  --orange: #7ee6c0;
+  --orange-2: #bdf4df;
+}
+
+body[data-theme="material3"][data-m3-palette="emerald"] {
+  --blue: #84f7c2;
+  --blue-2: #cfffe9;
+  --orange: #7cdfff;
+  --orange-2: #b8efff;
+}
+
+body[data-theme="material3"][data-m3-palette="sunset"] {
+  --blue: #ffbf8c;
+  --blue-2: #ffe2c7;
+  --orange: #ff8ea9;
+  --orange-2: #ffc8d6;
+}
+
+body[data-theme="material3"][data-m3-palette="emerald"] {
+  background:
+    radial-gradient(860px 320px at 10% -12%, rgba(116, 241, 191, 0.3), transparent 64%),
+    radial-gradient(760px 300px at 92% -8%, rgba(132, 224, 255, 0.22), transparent 66%),
+    radial-gradient(680px 260px at 46% 108%, rgba(145, 255, 211, 0.18), transparent 68%),
+    linear-gradient(156deg, #111a17 0%, #172623 44%, #1d2f2b 100%);
+}
+
+body[data-theme="material3"][data-m3-palette="sunset"] {
+  background:
+    radial-gradient(860px 320px at 10% -12%, rgba(255, 189, 130, 0.32), transparent 64%),
+    radial-gradient(760px 300px at 92% -8%, rgba(255, 141, 172, 0.23), transparent 66%),
+    radial-gradient(680px 260px at 46% 108%, rgba(255, 214, 165, 0.19), transparent 68%),
+    linear-gradient(156deg, #211517 0%, #2b1c22 44%, #33242a 100%);
+}