Add Material 3 theme

Author: Bikram Gole

about.html

@@ -17,7 +17,7 @@
   <script>
     (() => {
       try {
-        const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "liquidglass", "paper", "blackflag"]);
+        const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "liquidglass", "material3", "paper", "blackflag"]);
         const themeKey = "neoThemeVariant.v1";
         const params = new URLSearchParams(window.location.search);
         const urlTheme = params.get("theme");
@@ -59,6 +59,7 @@
         <option value="ocean">Ocean Drift</option>
         <option value="bloodmoon">Blood Moon</option>
         <option value="liquidglass">Liquid Glass</option>
+        <option value="material3">Material 3</option>
         <option value="paper">Paper Link</option>
         <option value="blackflag">Black Flag Uprising</option>
       </select>

contact.html

@@ -17,7 +17,7 @@
   <script>
     (() => {
       try {
-        const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "liquidglass", "paper", "blackflag"]);
+        const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "liquidglass", "material3", "paper", "blackflag"]);
         const themeKey = "neoThemeVariant.v1";
         const params = new URLSearchParams(window.location.search);
         const urlTheme = params.get("theme");
@@ -59,6 +59,7 @@
         <option value="ocean">Ocean Drift</option>
         <option value="bloodmoon">Blood Moon</option>
         <option value="liquidglass">Liquid Glass</option>
+        <option value="material3">Material 3</option>
         <option value="paper">Paper Link</option>
         <option value="blackflag">Black Flag Uprising</option>
       </select>

index.html

@@ -17,7 +17,7 @@
   <script>
     (() => {
       try {
-        const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "liquidglass", "paper", "blackflag"]);
+        const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "liquidglass", "material3", "paper", "blackflag"]);
         const themeKey = "neoThemeVariant.v1";
         const params = new URLSearchParams(window.location.search);
         const urlTheme = params.get("theme");
@@ -59,6 +59,7 @@
         <option value="ocean">Ocean Drift</option>
         <option value="bloodmoon">Blood Moon</option>
         <option value="liquidglass">Liquid Glass</option>
+        <option value="material3">Material 3</option>
         <option value="paper">Paper Link</option>
         <option value="blackflag">Black Flag Uprising</option>
       </select>

script.js

@@ -164,6 +164,7 @@ const THEME_OPTIONS = [
   "ocean",
   "bloodmoon",
   "liquidglass",
+  "material3",
   "paper",
   "blackflag",
 ];
@@ -1434,6 +1435,7 @@ function initCommandPalette() {
     { label: "Theme: Mint Matrix", keywords: "theme mint green", run: () => applyTheme("mint", true) },
     { 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: "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

@@ -204,6 +204,25 @@ body[data-theme="liquidglass"] {
   --header: rgba(16, 28, 48, 0.58);
 }
 
+:root[data-theme="material3"],
+body[data-theme="material3"] {
+  --bg-0: #0d131f;
+  --bg-1: #141c2b;
+  --bg-2: #1e2737;
+  --ink: #e5ebfb;
+  --muted: #afb9ce;
+  --blue: #b9c6ff;
+  --blue-2: #dde5ff;
+  --orange: #8adbd1;
+  --orange-2: #b5efe8;
+  --card: rgba(28, 36, 52, 0.88);
+  --border: rgba(169, 183, 215, 0.28);
+  --header: rgba(23, 30, 46, 0.94);
+  --clean-glow-cyan: rgba(185, 198, 255, 0.2);
+  --clean-glow-orange: rgba(138, 219, 209, 0.18);
+  --clean-shadow: 0 12px 28px rgba(4, 8, 16, 0.34);
+}
+
 * {
   box-sizing: border-box;
 }
@@ -235,6 +254,13 @@ body[data-theme="liquidglass"] {
     linear-gradient(160deg, var(--bg-0), var(--bg-1) 45%, var(--bg-2));
 }
 
+body[data-theme="material3"] {
+  background:
+    radial-gradient(740px 260px at 12% -16%, rgba(164, 184, 255, 0.2), transparent 66%),
+    radial-gradient(620px 220px at 90% 2%, rgba(133, 215, 205, 0.18), transparent 68%),
+    linear-gradient(160deg, var(--bg-0), var(--bg-1) 45%, var(--bg-2));
+}
+
 #starfield {
   position: fixed;
   inset: 0;
@@ -265,6 +291,15 @@ body[data-theme="paper"] #starfield {
   opacity: 0;
 }
 
+body[data-theme="material3"] .noise {
+  opacity: 0.09;
+  background-size: 3px 3px;
+}
+
+body[data-theme="material3"] #starfield {
+  opacity: 0.44;
+}
+
 body[data-theme="paper"] .hero,
 body[data-theme="paper"] .panel {
   backdrop-filter: none;
@@ -2136,6 +2171,110 @@ body.browser-vivaldi .penguin-glasses {
   transition: opacity 200ms ease, transform 200ms ease;
 }
 
+body[data-theme="material3"] .site-header {
+  border-color: rgba(174, 188, 220, 0.34);
+  border-radius: 22px;
+  background:
+    linear-gradient(180deg, rgba(46, 57, 79, 0.34), rgba(29, 37, 54, 0.38)),
+    var(--header);
+  backdrop-filter: none;
+  box-shadow: inset 0 1px 0 rgba(232, 239, 255, 0.09), 0 12px 28px rgba(5, 10, 20, 0.35);
+}
+
+body[data-theme="material3"] .brand-name {
+  text-transform: none;
+  letter-spacing: 0.01em;
+  text-shadow: none;
+}
+
+body[data-theme="material3"] nav a {
+  border-radius: 999px;
+  padding: 0.3rem 0.72rem;
+}
+
+body[data-theme="material3"] nav a:hover,
+body[data-theme="material3"] nav a.active {
+  background: rgba(189, 201, 255, 0.16);
+  border-color: rgba(176, 192, 225, 0.44);
+  box-shadow: inset 0 1px 0 rgba(232, 239, 255, 0.1);
+}
+
+body[data-theme="material3"] .theme-top-select,
+body[data-theme="material3"] .theme-cycle-btn {
+  border-radius: 999px;
+  border-color: rgba(176, 192, 225, 0.4);
+  background: rgba(36, 46, 65, 0.96);
+}
+
+body[data-theme="material3"] .hero,
+body[data-theme="material3"] .panel {
+  border-radius: 24px;
+  border-color: rgba(170, 184, 215, 0.26);
+  background:
+    linear-gradient(180deg, rgba(42, 52, 72, 0.84), rgba(29, 37, 53, 0.92)),
+    var(--card);
+  backdrop-filter: none;
+  box-shadow: inset 0 1px 0 rgba(232, 239, 255, 0.08), 0 10px 24px rgba(5, 10, 20, 0.32);
+}
+
+body[data-theme="material3"] .hero {
+  background:
+    radial-gradient(460px 180px at 0% 0%, rgba(185, 198, 255, 0.18), transparent 72%),
+    radial-gradient(340px 150px at 95% 100%, rgba(138, 219, 209, 0.14), transparent 74%),
+    linear-gradient(180deg, rgba(42, 52, 72, 0.84), rgba(29, 37, 53, 0.92));
+}
+
+body[data-theme="material3"] .chaos-card,
+body[data-theme="material3"] .favorite-card,
+body[data-theme="material3"] .fact-card,
+body[data-theme="material3"] .glass-card,
+body[data-theme="material3"] .repo-card,
+body[data-theme="material3"] .contact-item,
+body[data-theme="material3"] .terminal,
+body[data-theme="material3"] .mini-terminal,
+body[data-theme="material3"] .mini-terminal-screen,
+body[data-theme="material3"] .quiz-board,
+body[data-theme="material3"] .command-shell {
+  border-radius: 18px;
+  border-color: rgba(164, 178, 208, 0.28);
+  background: rgba(34, 44, 63, 0.9);
+  backdrop-filter: none;
+  box-shadow: inset 0 1px 0 rgba(232, 239, 255, 0.07), 0 8px 20px rgba(4, 9, 18, 0.3);
+}
+
+body[data-theme="material3"] .chips span {
+  border-radius: 999px;
+  border-color: rgba(171, 186, 219, 0.33);
+  background: rgba(43, 54, 76, 0.92);
+}
+
+body[data-theme="material3"] .btn,
+body[data-theme="material3"] .egg-btn {
+  border-radius: 999px;
+}
+
+body[data-theme="material3"] .btn.primary {
+  color: #131a2a;
+  background: linear-gradient(118deg, var(--blue), var(--orange-2));
+}
+
+body[data-theme="material3"] .btn.ghost,
+body[data-theme="material3"] .egg-btn {
+  border-color: rgba(172, 187, 218, 0.36);
+  background: rgba(38, 49, 70, 0.9);
+}
+
+body[data-theme="material3"] .status-line {
+  color: #cad7f3;
+}
+
+body[data-theme="material3"] .site-footer {
+  border: 1px solid rgba(170, 184, 216, 0.26);
+  border-radius: 999px;
+  background: rgba(27, 35, 52, 0.78);
+  padding: 0.5rem 0.86rem;
+}
+
 body[data-theme="liquidglass"] .site-header {
   border-color: rgba(214, 231, 255, 0.34);
   border-radius: 18px;