music: automatic light theme via prefers-color-scheme (colours moved to CSS variables; dark unchanged)

public/music/music.css

@@ -1,9 +1,38 @@
+/* --- THEME ---
+   Dark is the default; a light palette switches on automatically with the visitor's system setting. */
+:root {
+  color-scheme: dark light;
+  --bg: #0d0a14;
+  --text: #9d9aa4;
+  --accent: #6be1e9;
+  --text-rgb: 157 154 164;
+  --accent-rgb: 107 225 233;
+  --warn: #ffff00;
+  --panel-a: rgb(13 10 20 / 0.6);
+  --panel-b: rgb(50 30 80 / 0.3);
+  --shadow: rgb(0 0 0 / 0.4);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: #faf6f2;
+    --text: #4a4553;
+    --accent: #0a727c;
+    --text-rgb: 74 69 83;
+    --accent-rgb: 10 114 124;
+    --warn: #8a5a00;
+    --panel-a: rgb(255 255 255 / 0.7);
+    --panel-b: rgb(250 214 190 / 0.35);
+    --shadow: rgb(74 69 83 / 0.18);
+  }
+}
+
 /* --- BASE STYLES (Merged from style.css) --- */
 body {
-  background: #0d0a14;
+  background: var(--bg);
   padding: 40px 20px;
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
-  color: #9d9aa4;
+  color: var(--text);
   /* Fixed the no-scroll issue here: */
   min-height: 100vh;
   margin: 0;
@@ -14,7 +43,7 @@ body {
 }
 
 a {
-  color: #6be1e9;
+  color: var(--accent);
   text-decoration: none;
 }
 
@@ -35,19 +64,19 @@ a:visited {
 .music-header {
   text-align: center;
   margin-bottom: 50px;
-  border-bottom: 2px solid rgba(107, 225, 233, 0.3);
+  border-bottom: 2px solid rgb(var(--accent-rgb) / 0.3);
   padding-bottom: 20px;
 }
 
 .music-header h1 {
   margin: 0;
   font-size: 2rem;
-  color: #9d9aa4;
+  color: var(--text);
   font-weight: bold;
 }
 
 .music-header h1 a {
-  color: #6be1e9;
+  color: var(--accent);
 }
 
 /* Artists/Albums Grid */
@@ -63,16 +92,16 @@ a:visited {
 .album-card {
   text-align: center;
   padding: 20px;
-  background: rgba(157, 154, 164, 0.05);
-  border: 1px solid rgba(107, 225, 233, 0.2);
+  background: rgb(var(--text-rgb) / 0.05);
+  border: 1px solid rgb(var(--accent-rgb) / 0.2);
   border-radius: 8px;
   transition: all 0.3s ease;
 }
 
 .artist-card:hover,
 .album-card:hover {
-  background: rgba(107, 225, 233, 0.1);
-  border-color: rgba(107, 225, 233, 0.5);
+  background: rgb(var(--accent-rgb) / 0.1);
+  border-color: rgb(var(--accent-rgb) / 0.5);
   transform: translateY(-4px);
 }
 
@@ -86,12 +115,12 @@ a:visited {
 .album-card h3 {
   margin: 10px 0;
   font-size: 1.3rem;
-  color: #9d9aa4;
+  color: var(--text);
 }
 
 .artist-meta,
 .album-meta {
-  color: #6be1e9;
+  color: var(--accent);
   font-size: 0.9rem;
   margin: 0;
 }
@@ -101,7 +130,7 @@ a:visited {
   text-align: center;
   margin: 40px 0;
   padding: 40px 20px;
-  background: rgba(107, 225, 233, 0.05);
+  background: rgb(var(--accent-rgb) / 0.05);
   border-radius: 8px;
 }
 
@@ -113,7 +142,7 @@ a:visited {
 .artist-detail h2 {
   margin: 0;
   font-size: 2.5rem;
-  color: #9d9aa4;
+  color: var(--text);
 }
 
 /* Footer / Bottom Nav */
@@ -121,7 +150,7 @@ a:visited {
   text-align: center;
   margin-top: 60px;
   padding: 20px 0;
-  border-top: 2px solid rgba(107, 225, 233, 0.3);
+  border-top: 2px solid rgb(var(--accent-rgb) / 0.3);
 }
 
 .bottom-nav {
@@ -160,7 +189,7 @@ a:visited {
 .announcement {
   margin: 20px auto;
   display: block;
-  border: 1px solid #ffff00;
+  border: 1px solid var(--warn);
   padding: 10px 15px;
   border-radius: 3px;
   text-align: center;
@@ -168,7 +197,7 @@ a:visited {
 }
 
 .announcement a {
-  color: #ffff00;
+  color: var(--warn);
   font-weight: bold;
 }
 
@@ -181,11 +210,11 @@ a:visited {
 }
 
 .blog-preview {
-  border: 1px solid rgba(155, 169, 180, 0.3);
+  border: 1px solid rgb(var(--text-rgb) / 0.3);
   border-radius: 4px;
   padding: 15px;
-  background: linear-gradient(135deg, rgba(13, 10, 20, 0.6), rgba(50, 30, 80, 0.3));
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  background: linear-gradient(135deg, var(--panel-a), var(--panel-b));
+  box-shadow: 0 4px 12px var(--shadow);
 }
 
 /* --- RESPONSIVE MEDIA QUERIES --- */