Remove Material 3 palette selector and related logic

Author: Bikram Gole

about.html

@@ -63,12 +63,6 @@
         <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,12 +63,6 @@
         <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,12 +63,6 @@
         <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,7 +131,6 @@ 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");
@@ -145,7 +144,6 @@ 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 = "╰─❯";
@@ -170,7 +168,6 @@ const THEME_OPTIONS = [
   "paper",
   "blackflag",
 ];
-const MATERIAL3_PALETTES = ["lavender", "emerald", "sunset"];
 const MAX_TERMINAL_LINES = 220;
 const TERMINAL_COMMANDS = [
   "help", "whoami", "mission", "status", "clear",
@@ -184,7 +181,6 @@ let launches = 0;
 let adToBsConverter = null;
 let startPersonaQuiz = null;
 let currentTheme = "neo";
-let currentMaterial3Palette = "lavender";
 let terminalHistory = [];
 let terminalHistoryIndex = 0;
 let terminalDraft = "";
@@ -731,11 +727,6 @@ 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) {
@@ -748,73 +739,33 @@ 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) {
@@ -825,10 +776,6 @@ 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];
@@ -1489,9 +1436,6 @@ 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,11 +768,6 @@ 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;
@@ -3148,12 +3143,6 @@ body[data-theme="material3"] .site-footer {
   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);
@@ -3167,40 +3156,3 @@ 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%);
-}