From 44318e0e4dbe199ec84280f7db88f259c10cda9e Mon Sep 17 00:00:00 2001
From: CGH0S7 <776459475@qq.com>
Date: Wed, 24 Jun 2026 10:44:15 +0800
Subject: [PATCH] updated website style

---
 website/index.html |  83 ++++++++++++++++++---
 website/styles.css | 178 +++++++++++++++++++++++++++++++++++++++------
 2 files changed, 227 insertions(+), 34 deletions(-)

diff --git a/website/index.html b/website/index.html
index 8153dd0..7725c7c 100644
--- a/website/index.html
+++ b/website/index.html
@@ -17,18 +17,25 @@
         <img src="assets/hightube-icon.png" alt="" />
         <span>Hightube</span>
       </a>
-      <button class="hamburger" aria-label="Toggle navigation" aria-expanded="false">
-        <span></span>
-        <span></span>
-        <span></span>
-      </button>
       <nav class="nav" aria-label="Primary navigation">
         <a href="#architecture">Architecture</a>
         <a href="#features">Features</a>
         <a href="#downloads">Downloads</a>
         <a href="#source">Source</a>
-        <a class="nav-cta" href="https://stream.nudt.space" target="_blank" rel="noopener">立即尝试</a>
+        <a class="nav-cta" href="https://stream.nudt.space" target="_blank" rel="noopener">Try Now</a>
       </nav>
+      <div class="topbar-actions">
+        <button class="theme-toggle" data-state="auto" aria-label="Theme: Auto" title="Theme: Auto — click to force Light">
+          <svg class="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+          <svg class="icon-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+          <svg class="icon-auto" viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
+        </button>
+        <button class="hamburger" aria-label="Toggle navigation" aria-expanded="false">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+      </div>
     </header>
 
     <main id="home">
@@ -267,19 +274,71 @@
 
     <script>
       (function () {
+        /* ---- hamburger menu ---- */
         var btn = document.querySelector('.hamburger');
         var nav = document.querySelector('.nav');
-        if (!btn || !nav) return;
-        btn.addEventListener('click', function () {
-          var open = nav.classList.toggle('open');
-          btn.setAttribute('aria-expanded', open);
+        if (btn && nav) {
+          btn.addEventListener('click', function () {
+            var open = nav.classList.toggle('open');
+            btn.setAttribute('aria-expanded', open);
+          });
+        }
+
+        /* ---- theme toggle ---- */
+        var toggle = document.querySelector('.theme-toggle');
+        if (!toggle) return;
+
+        var STATES = ['auto', 'light', 'dark'];
+        var LABELS = {
+          auto: 'Theme: Auto — click to force Light',
+          light: 'Theme: Light — click to force Dark',
+          dark: 'Theme: Dark — click to return to Auto'
+        };
+
+        function getTheme() {
+          return localStorage.getItem('theme') || 'auto';
+        }
+
+        function applyTheme(state) {
+          if (state === 'light') {
+            document.documentElement.setAttribute('data-theme', 'light');
+          } else if (state === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+          } else {
+            document.documentElement.removeAttribute('data-theme');
+          }
+          toggle.setAttribute('data-state', state);
+          toggle.setAttribute('aria-label', 'Theme: ' + state.charAt(0).toUpperCase() + state.slice(1));
+          toggle.setAttribute('title', LABELS[state]);
+          localStorage.setItem('theme', state);
+        }
+
+        function nextTheme(current) {
+          var idx = STATES.indexOf(current);
+          return STATES[(idx + 1) % STATES.length];
+        }
+
+        // init
+        var current = getTheme();
+        applyTheme(current);
+
+        toggle.addEventListener('click', function () {
+          applyTheme(nextTheme(getTheme()));
+        });
+
+        // listen for system changes (only matters in auto mode)
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+          if (getTheme() === 'auto') {
+            // force a repaint by re-applying auto
+            applyTheme('auto');
+          }
         });
       })();
     </script>
     <footer class="footer">
-      <span>Hightube</span>
+      <span class="footer-hide-mobile">Hightube</span>
       <span>Built with ❤️ by HighGround-soft 2026</span>
-      <span>Open Source Live Platform</span>
+      <span class="footer-hide-mobile">Open Source Live Platform</span>
     </footer>
   </body>
 </html>
diff --git a/website/styles.css b/website/styles.css
index b0de4a1..ad42d7c 100644
--- a/website/styles.css
+++ b/website/styles.css
@@ -1,19 +1,90 @@
 :root {
-  color-scheme: light;
+  color-scheme: light dark;
   --primary: #0b57d0;
   --on-primary: #ffffff;
   --primary-container: #d7e3ff;
+  --on-primary-container: #001b3f;
   --secondary: #565f71;
   --tertiary: #705575;
   --surface: #fbfcff;
+  --surface-rgb: 251 252 255;
   --surface-container: #eef3fb;
   --surface-container-high: #e5ebf5;
   --outline: #727782;
+  --outline-rgb: 114 119 130;
   --text: #191c20;
   --muted: #42474f;
   --success: #146c2e;
   --warning: #7a5900;
   --shadow: 0 24px 60px rgba(11, 87, 208, 0.16);
+  --topbar-bg: rgba(251, 252, 255, 0.68);
+  --topbar-border: rgba(114, 119, 130, 0.18);
+  --topbar-shadow: 0 12px 36px rgba(11, 87, 208, 0.08);
+  --grid-divider: rgba(114, 119, 130, 0.24);
+  --card-border: rgba(114, 119, 130, 0.24);
+  --device-border: rgba(114, 119, 130, 0.32);
+  --status-available-bg: rgba(20, 108, 46, 0.12);
+  --status-planned-bg: rgba(122, 89, 0, 0.12);
+}
+
+/* ---- Dark theme: forced ---- */
+[data-theme="dark"] {
+  --primary: #a8c7ff;
+  --on-primary: #001b3f;
+  --primary-container: #003a7a;
+  --on-primary-container: #d7e3ff;
+  --secondary: #bcc7db;
+  --tertiary: #d7bde0;
+  --surface: #111318;
+  --surface-rgb: 17 19 24;
+  --surface-container: #1a1d25;
+  --surface-container-high: #21242d;
+  --outline: #8b909c;
+  --outline-rgb: 139 144 156;
+  --text: #e3e3e8;
+  --muted: #b0b3bd;
+  --success: #81c784;
+  --warning: #ffe08a;
+  --shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
+  --topbar-bg: rgba(17, 19, 24, 0.72);
+  --topbar-border: rgba(139, 144, 156, 0.18);
+  --topbar-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
+  --grid-divider: rgba(139, 144, 156, 0.2);
+  --card-border: rgba(139, 144, 156, 0.2);
+  --device-border: rgba(139, 144, 156, 0.28);
+  --status-available-bg: rgba(129, 199, 132, 0.15);
+  --status-planned-bg: rgba(255, 224, 138, 0.15);
+}
+
+/* ---- Dark theme: auto (system preference, no manual override) ---- */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --primary: #a8c7ff;
+    --on-primary: #001b3f;
+    --primary-container: #003a7a;
+    --on-primary-container: #d7e3ff;
+    --secondary: #bcc7db;
+    --tertiary: #d7bde0;
+    --surface: #111318;
+    --surface-rgb: 17 19 24;
+    --surface-container: #1a1d25;
+    --surface-container-high: #21242d;
+    --outline: #8b909c;
+    --outline-rgb: 139 144 156;
+    --text: #e3e3e8;
+    --muted: #b0b3bd;
+    --success: #81c784;
+    --warning: #ffe08a;
+    --shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
+    --topbar-bg: rgba(17, 19, 24, 0.72);
+    --topbar-border: rgba(139, 144, 156, 0.18);
+    --topbar-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
+    --grid-divider: rgba(139, 144, 156, 0.2);
+    --card-border: rgba(139, 144, 156, 0.2);
+    --device-border: rgba(139, 144, 156, 0.28);
+    --status-available-bg: rgba(129, 199, 132, 0.15);
+    --status-planned-bg: rgba(255, 224, 138, 0.15);
+  }
 }
 
 * {
@@ -33,6 +104,7 @@ body {
     Inter, Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     sans-serif;
   line-height: 1.6;
+  transition: background-color 300ms ease, color 300ms ease;
 }
 
 a {
@@ -48,9 +120,9 @@ a {
   justify-content: space-between;
   gap: 24px;
   padding: 14px clamp(20px, 5vw, 72px);
-  background: rgba(251, 252, 255, 0.68);
-  border-bottom: 1px solid rgba(114, 119, 130, 0.18);
-  box-shadow: 0 12px 36px rgba(11, 87, 208, 0.08);
+  background: var(--topbar-bg);
+  border-bottom: 1px solid var(--topbar-border);
+  box-shadow: var(--topbar-shadow);
   -webkit-backdrop-filter: blur(22px) saturate(160%);
   backdrop-filter: blur(22px) saturate(160%);
 }
@@ -97,15 +169,14 @@ a {
   color: var(--on-primary) !important;
   margin-left: 8px;
   font-weight: 800 !important;
-  box-shadow: 0 4px 14px rgba(11, 87, 208, 0.28);
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
   transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
 }
 
 .nav-cta:hover {
-  background: #0a4eb8 !important;
-  color: var(--on-primary) !important;
+  filter: brightness(0.88);
   transform: translateY(-1px);
-  box-shadow: 0 8px 20px rgba(11, 87, 208, 0.34);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
 }
 
 /* Hamburger menu button — hidden on desktop */
@@ -145,6 +216,70 @@ a {
   transform: translateY(-7.5px) rotate(-45deg);
 }
 
+/* Right-side controls group (theme + hamburger) */
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+/* Theme toggle button */
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--text);
+  font-size: 1.25rem;
+  cursor: pointer;
+  transition: background 200ms ease, transform 200ms ease;
+  flex-shrink: 0;
+}
+
+.theme-toggle:hover {
+  background: var(--surface-container);
+  transform: scale(1.08);
+}
+
+.theme-toggle:active {
+  transform: scale(0.94);
+}
+
+.theme-toggle svg {
+  width: 22px;
+  height: 22px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* hide all icons by default, show based on data-state */
+.theme-toggle .icon-sun,
+.theme-toggle .icon-moon,
+.theme-toggle .icon-auto {
+  display: none;
+}
+
+.theme-toggle[data-state="light"] .icon-sun {
+  display: block;
+}
+
+.theme-toggle[data-state="dark"] .icon-moon {
+  display: block;
+}
+
+.theme-toggle[data-state="auto"] .icon-auto {
+  display: block;
+}
+
 .hero {
   display: grid;
   grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
@@ -234,12 +369,12 @@ h3 {
 .primary {
   background: var(--primary);
   color: var(--on-primary);
-  box-shadow: 0 10px 24px rgba(11, 87, 208, 0.22);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
 }
 
 .secondary {
   background: var(--primary-container);
-  color: #001b3f;
+  color: var(--on-primary-container);
 }
 
 .hero-panel {
@@ -250,7 +385,7 @@ h3 {
 .device-window {
   width: min(100%, 560px);
   overflow: hidden;
-  border: 1px solid rgba(114, 119, 130, 0.32);
+  border: 1px solid var(--device-border);
   border-radius: 28px;
   background: var(--surface-container);
   box-shadow: var(--shadow);
@@ -260,7 +395,7 @@ h3 {
   display: flex;
   gap: 8px;
   padding: 16px 18px;
-  border-bottom: 1px solid rgba(114, 119, 130, 0.24);
+  border-bottom: 1px solid var(--card-border);
 }
 
 .window-bar span {
@@ -316,7 +451,7 @@ h3 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
-  background: rgba(114, 119, 130, 0.24);
+  background: var(--grid-divider);
 }
 
 .stats-grid div {
@@ -366,7 +501,7 @@ h3 {
 .download-card {
   min-width: 0;
   padding: 24px;
-  border: 1px solid rgba(114, 119, 130, 0.24);
+  border: 1px solid var(--card-border);
   border-radius: 24px;
   background: var(--surface-container);
 }
@@ -399,9 +534,9 @@ h3 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1px;
   overflow: hidden;
-  border: 1px solid rgba(114, 119, 130, 0.24);
+  border: 1px solid var(--card-border);
   border-radius: 28px;
-  background: rgba(114, 119, 130, 0.24);
+  background: var(--grid-divider);
 }
 
 .feature-item {
@@ -425,14 +560,14 @@ h3 {
   margin-bottom: 18px;
   padding: 5px 10px;
   border-radius: 14px;
-  background: rgba(20, 108, 46, 0.12);
+  background: var(--status-available-bg);
   color: var(--success);
   font-size: 0.78rem;
   font-weight: 850;
 }
 
 .status.muted {
-  background: rgba(122, 89, 0, 0.12);
+  background: var(--status-planned-bg);
   color: var(--warning);
 }
 
@@ -501,7 +636,7 @@ h3 {
     flex-direction: column;
     gap: 2px;
     padding: 8px 0 4px;
-    border-top: 1px solid rgba(114, 119, 130, 0.14);
+    border-top: 1px solid var(--topbar-border);
     margin-top: 10px;
   }
 
@@ -633,8 +768,7 @@ h3 {
     padding: 24px 16px;
   }
 
-  .footer span,
-  .footer span:last-child {
-    text-align: left;
+  .footer-hide-mobile {
+    display: none;
   }
 }