From 2723bd66ad4628a7b998414322912b97c938f22f Mon Sep 17 00:00:00 2001
From: admin <admin@viaeon.com>
Date: Sun, 14 Jun 2026 16:13:53 +0800
Subject: [PATCH] style: revert to cyan accent, fix dark hover button priority

---
 .../components/layout/components/footer.tsx   |  6 ++--
 .../layout/components/public-header.tsx       | 12 +++----
 .../home/components/sections/hero.tsx         | 34 +++++++++----------
 web/default/src/styles/theme.css              | 12 +++----
 4 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/web/default/src/components/layout/components/footer.tsx b/web/default/src/components/layout/components/footer.tsx
index cb311a945..108187fe4 100644
--- a/web/default/src/components/layout/components/footer.tsx
+++ b/web/default/src/components/layout/components/footer.tsx
@@ -58,7 +58,7 @@ function FooterLinkItem(props: { link: FooterLink }) {
           href={props.link.href}
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#8B8D97] hover:text-[#28C840] text-sm transition-colors duration-200'
+          className='text-[#8B8D97] hover:text-[#00D2FF] text-sm transition-colors duration-200'
         >
           {label}
         </a>
@@ -110,7 +110,7 @@ function LegalLinks(props: { leadingSeparator?: boolean }) {
           )}
           <Link
             to={item.href}
-            className='text-[#8B8D97] hover:text-[#28C840] transition-colors duration-200'
+            className='text-[#8B8D97] hover:text-[#00D2FF] transition-colors duration-200'
           >
             {item.label}
           </Link>
@@ -131,7 +131,7 @@ function ProjectAttribution(props: { currentYear: number; inline?: boolean }) {
         href='https://git.viaeon.com/admin/new-api'
         target='_blank'
         rel='noopener noreferrer'
-        className='text-[#8B8D97] hover:text-[#28C840] font-medium transition-colors'
+        className='text-[#8B8D97] hover:text-[#00D2FF] font-medium transition-colors'
       >
         {t('ModelsToken')}
       </a>
diff --git a/web/default/src/components/layout/components/public-header.tsx b/web/default/src/components/layout/components/public-header.tsx
index 7a9ff1d95..c541967ae 100644
--- a/web/default/src/components/layout/components/public-header.tsx
+++ b/web/default/src/components/layout/components/public-header.tsx
@@ -260,11 +260,11 @@ export function PublicHeader(props: PublicHeaderProps) {
                 <div className='mx-2 h-4 w-px bg-white/10' />
               )}
 
-              {showLanguageSwitcher && <LanguageSwitcher className='text-white/70 hover:bg-white/10 hover:text-white' />}
-              {showThemeSwitch && <ThemeSwitch className='text-white/70 hover:bg-white/10 hover:text-white' />}
+              {showLanguageSwitcher && <LanguageSwitcher className='text-white/70 hover:bg-white/10 hover:text-white dark:hover:bg-white/10' />}
+              {showThemeSwitch && <ThemeSwitch className='text-white/70 hover:bg-white/10 hover:text-white dark:hover:bg-white/10' />}
               {showNotifications && (
                 <NotificationPopover
-                  className='text-white/70 hover:bg-white/10 hover:text-white'
+                  className='text-white/70 hover:bg-white/10 hover:text-white dark:hover:bg-white/10'
                   open={notifications.popoverOpen}
                   onOpenChange={notifications.setPopoverOpen}
                   unreadCount={notifications.unreadCount}
@@ -286,7 +286,7 @@ export function PublicHeader(props: PublicHeaderProps) {
                   ) : (
                     <Button
                       size='sm'
-                      className='h-8 rounded-lg bg-[#28C840] px-3.5 text-xs font-semibold text-[#0A0E14] hover:bg-[#22A836]'
+                      className='h-8 rounded-lg bg-[#00D2FF] px-3.5 text-xs font-semibold text-[#0A0E14] hover:bg-[#00B8E6]'
                       render={<Link to='/sign-in' />}
                     >
                       {t('Sign in')}
@@ -298,7 +298,7 @@ export function PublicHeader(props: PublicHeaderProps) {
 
             {/* Mobile: compact actions + hamburger */}
             <div className='flex items-center gap-2 sm:hidden'>
-              {showThemeSwitch && <ThemeSwitch className='text-white/70 hover:bg-white/10 hover:text-white' />}
+              {showThemeSwitch && <ThemeSwitch className='text-white/70 hover:bg-white/10 hover:text-white dark:hover:bg-white/10' />}
               {showAuthButtons && !loading && isAuthenticated && (
                 <ProfileDropdown />
               )}
@@ -405,7 +405,7 @@ export function PublicHeader(props: PublicHeaderProps) {
               <Link
                 to={isAuthenticated ? '/dashboard' : '/sign-in'}
                 onClick={() => setMobileOpen(false)}
-                className='bg-[#28C840] text-[#0A0E14] inline-flex h-10 items-center justify-center rounded-lg text-sm font-semibold transition-opacity hover:opacity-90 active:opacity-80'
+                className='bg-[#00D2FF] text-[#0A0E14] inline-flex h-10 items-center justify-center rounded-lg text-sm font-semibold transition-opacity hover:opacity-90 active:opacity-80'
               >
                 {isAuthenticated ? t('Go to Dashboard') : t('Sign in')}
               </Link>
diff --git a/web/default/src/features/home/components/sections/hero.tsx b/web/default/src/features/home/components/sections/hero.tsx
index 642d2a97d..684bd514f 100644
--- a/web/default/src/features/home/components/sections/hero.tsx
+++ b/web/default/src/features/home/components/sections/hero.tsx
@@ -28,14 +28,14 @@ interface HeroProps {
   isAuthenticated?: boolean
 }
 
-/* Termius-dark terminal palette */
+/* Termius-dark palette: black bg, cyan accent */
 const T = {
   bg: '#0A0E14',
   surface: '#0F1419',
   border: '#1A1F29',
+  accent: '#00D2FF',
+  accentDim: '#0099BB',
   green: '#28C840',
-  greenDim: '#1B7A2B',
-  cyan: '#00D2FF',
   yellow: '#FEBC2E',
   gray: '#5C6370',
   grayLight: '#8B8D97',
@@ -67,7 +67,7 @@ export function Hero(props: HeroProps) {
         className='pointer-events-none absolute inset-0'
         style={{
           background:
-            'radial-gradient(ellipse 60% 35% at 50% -5%, rgba(40,200,64,0.06) 0%, transparent 70%)',
+            'radial-gradient(ellipse 60% 35% at 50% -5%, rgba(0,210,255,0.06) 0%, transparent 70%)',
         }}
       />
 
@@ -76,7 +76,7 @@ export function Hero(props: HeroProps) {
         <div className='flex min-h-[calc(100svh-3rem)] flex-col items-center justify-center py-20 text-center'>
           <h1
             className='max-w-3xl text-[clamp(2rem,5.5vw,3.5rem)] leading-[1.1] font-bold tracking-[-0.025em]'
-            style={{ color: T.green }}
+            style={{ color: T.accent }}
           >
             {t('Unified LLM Gateway')}
           </h1>
@@ -89,7 +89,7 @@ export function Hero(props: HeroProps) {
             {props.isAuthenticated ? (
               <Button
                 className='group h-11 rounded-lg px-6 text-sm font-semibold hover:opacity-90'
-                style={{ backgroundColor: T.green, color: T.bg }}
+                style={{ backgroundColor: T.accent, color: T.bg }}
                 render={<Link to='/dashboard' />}
               >
                 {t('Go to Dashboard')}
@@ -99,7 +99,7 @@ export function Hero(props: HeroProps) {
               <>
                 <Button
                   className='group h-11 rounded-lg px-6 text-sm font-semibold hover:opacity-90'
-                  style={{ backgroundColor: T.green, color: T.bg }}
+                  style={{ backgroundColor: T.accent, color: T.bg }}
                   render={<Link to='/sign-up' />}
                 >
                   {t('Get Started')}
@@ -137,7 +137,7 @@ export function Hero(props: HeroProps) {
                 <div>
                   <span style={{ color: T.green }}>$</span>{' '}
                   <span style={{ color: T.white }}>curl</span>{' '}
-                  <span style={{ color: T.cyan }}>{serverAddress}/v1/chat/completions</span>{' '}
+                  <span style={{ color: T.accent }}>{serverAddress}/v1/chat/completions</span>{' '}
                   <span style={{ color: T.gray }}>\</span>
                 </div>
                 <div className='pl-4'>
@@ -156,11 +156,11 @@ export function Hero(props: HeroProps) {
                 </div>
                 <div className='mt-2'>
                   <span style={{ color: T.gray }}>{"{"}</span>{' '}
-                  <span style={{ color: T.cyan }}>"model"</span>
+                  <span style={{ color: T.accent }}>"model"</span>
                   <span style={{ color: T.gray }}>:</span>{' '}
                   <span style={{ color: T.yellow }}>"gpt-4o"</span>
                   <span style={{ color: T.gray }}>,</span>{' '}
-                  <span style={{ color: T.cyan }}>"usage"</span>
+                  <span style={{ color: T.accent }}>"usage"</span>
                   <span style={{ color: T.gray }}>:</span>{' '}
                   <span style={{ color: T.gray }}>{"{...}"}</span>
                   <span style={{ color: T.gray }}>{"}"}</span>
@@ -195,7 +195,7 @@ export function Hero(props: HeroProps) {
                   backgroundColor: T.surface,
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.borderColor = T.greenDim
+                  e.currentTarget.style.borderColor = T.accentDim
                 }}
                 onMouseLeave={(e) => {
                   e.currentTarget.style.borderColor = T.border
@@ -205,9 +205,9 @@ export function Hero(props: HeroProps) {
                 <div className={i % 2 === 1 ? 'lg:order-2' : ''}>
                   <div
                     className='mb-3 flex size-9 items-center justify-center rounded-md'
-                    style={{ backgroundColor: `${T.green}15` }}
-                  >
-                    <feature.icon className='size-[18px]' style={{ color: T.green }} />
+                    style={{ backgroundColor: `${T.accent}15` }}
+                >
+                  <feature.icon className='size-[18px]' style={{ color: T.accent }} />
                   </div>
                   <h3 className='text-base font-semibold' style={{ color: T.white }}>
                     {t(feature.title)}
@@ -275,9 +275,9 @@ function tokenize(line: string, keywords: Set<string>, _stringRe: RegExp) {
     if (wordMatch) {
       const word = wordMatch[1]
       if (keywords.has(word)) {
-        tokens.push(<span key={key++} style={{ color: T.cyan }}>{word}</span>)
+        tokens.push(<span key={key++} style={{ color: T.accent }}>{word}</span>)
       } else if (/^[A-Z]/.test(word)) {
-        tokens.push(<span key={key++} style={{ color: T.cyan }}>{word}</span>)
+        tokens.push(<span key={key++} style={{ color: T.accent }}>{word}</span>)
       } else {
         tokens.push(<span key={key++} style={{ color: T.white }}>{word}</span>)
       }
@@ -298,7 +298,7 @@ function tokenize(line: string, keywords: Set<string>, _stringRe: RegExp) {
     if ('(){}[].:;,'.includes(ch)) {
       tokens.push(<span key={key++} style={{ color: T.grayLight }}>{ch}</span>)
     } else if ('=<>!+-*/%&|?'.includes(ch)) {
-      tokens.push(<span key={key++} style={{ color: T.cyan }}>{ch}</span>)
+      tokens.push(<span key={key++} style={{ color: T.accent }}>{ch}</span>)
     } else {
       tokens.push(<span key={key++} style={{ color: T.white }}>{ch}</span>)
     }
diff --git a/web/default/src/styles/theme.css b/web/default/src/styles/theme.css
index 05e7424c4..fbab16209 100644
--- a/web/default/src/styles/theme.css
+++ b/web/default/src/styles/theme.css
@@ -146,14 +146,14 @@ For commercial licensing, please contact admin@modelstoken.com
 }
 
 .dark {
-  /* Termius-dark: deep black bg, green accent (#28C840 ≈ oklch(0.72 0.19 145)) */
+  /* Termius-dark: deep black bg, cyan accent (#00D2FF ≈ oklch(0.78 0.15 210)) */
   --background: oklch(0.10 0.005 270);
   --foreground: oklch(0.93 0.005 270);
   --card: oklch(0.14 0.005 270);
   --card-foreground: oklch(0.93 0.005 270);
   --popover: oklch(0.14 0.005 270);
   --popover-foreground: oklch(0.93 0.005 270);
-  --primary: oklch(0.72 0.19 145);
+  --primary: oklch(0.78 0.15 210);
   --primary-foreground: oklch(0.10 0.005 270);
   --secondary: oklch(0.22 0.005 270);
   --secondary-foreground: oklch(0.88 0.005 270);
@@ -173,20 +173,20 @@ For commercial licensing, please contact admin@modelstoken.com
   --neutral-foreground: oklch(0.10 0.005 270);
   --border: oklch(0.22 0.005 270);
   --input: oklch(0.22 0.005 270);
-  --ring: oklch(0.72 0.19 145);
-  --chart-1: oklch(0.72 0.19 145);
+  --ring: oklch(0.78 0.15 210);
+  --chart-1: oklch(0.78 0.15 210);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
   --sidebar: oklch(0.08 0.005 270);
   --sidebar-foreground: oklch(0.88 0.005 270);
-  --sidebar-primary: oklch(0.72 0.19 145);
+  --sidebar-primary: oklch(0.78 0.15 210);
   --sidebar-primary-foreground: oklch(0.10 0.005 270);
   --sidebar-accent: oklch(0.18 0.005 270);
   --sidebar-accent-foreground: oklch(0.88 0.005 270);
   --sidebar-border: oklch(0.22 0.005 270);
-  --sidebar-ring: oklch(0.72 0.19 145);
+  --sidebar-ring: oklch(0.78 0.15 210);
   --skeleton-base: oklch(0.18 0.005 270);
   --skeleton-highlight: oklch(0.26 0.005 270);
 }