feat: add accent color setting and apply it dynamically across components

src/app/admin/page.tsx

@@ -61,6 +61,7 @@ export default function AdminPage() {
         longDescription: '',
         rules: '',
         bannerUrl: '',
+        accentColor: '#00D4AA',
     });
     const [savingSettings, setSavingSettings] = useState(false);
     const [isUploadingBanner, setIsUploadingBanner] = useState(false);
@@ -123,6 +124,7 @@ export default function AdminPage() {
                 longDescription: data.longDescription || '',
                 rules: data.rules || '',
                 bannerUrl: data.bannerUrl || '',
+                accentColor: data.accentColor || '#00D4AA',
             });
         } catch {
             // error
@@ -501,6 +503,24 @@ export default function AdminPage() {
                                 />
                             </div>
 
+                            <div>
+                                <label style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px', display: 'block' }}>Accent Color</label>
+                                <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+                                    <input
+                                        type="color"
+                                        value={nodeSettings.accentColor}
+                                        onChange={(e) => setNodeSettings({ ...nodeSettings, accentColor: e.target.value })}
+                                        style={{ width: '44px', height: '36px', padding: 0, border: '1px solid var(--border)', background: 'transparent', borderRadius: '8px' }}
+                                    />
+                                    <input
+                                        className="input"
+                                        value={nodeSettings.accentColor}
+                                        onChange={(e) => setNodeSettings({ ...nodeSettings, accentColor: e.target.value })}
+                                        placeholder="#00D4AA"
+                                    />
+                                </div>
+                            </div>
+
                             <div>
                                 <label style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px', display: 'block' }}>Banner image</label>
                                 <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>

src/app/api/admin/node/route.ts

@@ -33,6 +33,7 @@ export async function PATCH(req: NextRequest) {
                     longDescription: data.longDescription,
                     rules: data.rules,
                     bannerUrl: data.bannerUrl,
+                    accentColor: data.accentColor,
                     updatedAt: new Date(),
                 })
                 .where(eq(nodes.id, node.id))

src/app/login/page.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import { SynapsisLogo } from '@/components/Icons';
 
 export default function LoginPage() {
     const router = useRouter();
@@ -58,7 +59,7 @@ export default function LoginPage() {
                 {/* Logo */}
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '32px' }}>
                     <div className="logo" style={{ marginBottom: '8px', fontSize: '32px' }}>
-                        <img className="logo-icon" src="/logo.svg" alt="Synapsis" width={28} height={28} />
+                        <SynapsisLogo />
                         <span>Synapsis</span>
                     </div>
                     <p style={{ color: 'var(--foreground-secondary)', marginTop: '0' }}>

src/components/Icons.tsx

@@ -79,10 +79,30 @@ export const UsersIcon = () => (
 );
 
 export const SynapsisLogo = () => (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
-        <circle cx="16" cy="16" r="16" fill="var(--foreground)" />
+        width="28"
-        <path d="M16 6C10.477 6 6 10.477 6 16C6 21.523 10.477 26 16 26C21.523 26 26 21.523 26 16C26 10.477 21.523 6 16 6ZM16 24C11.5817 24 8 20.4183 8 16C8 11.5817 11.5817 8 16 8C20.4183 8 24 11.5817 24 16C24 20.4183 20.4183 24 16 24Z" fill="var(--background)" />
+        height="28"
-        <path d="M16 12C13.7909 12 12 13.7909 12 16C12 18.2091 13.7909 20 16 20C18.2091 20 20 18.2091 20 16C20 13.7909 18.2091 12 16 12Z" fill="var(--background)" />
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="0.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
+        <path d="M9 13a4.5 4.5 0 0 0 3-4" />
+        <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
+        <path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
+        <path d="M6 18a4 4 0 0 1-1.967-.516" />
+        <path d="M12 13h4" />
+        <path d="M12 18h6a2 2 0 0 1 2 2v1" />
+        <path d="M12 8h8" />
+        <path d="M16 8V5a2 2 0 0 1 2-2" />
+        <circle cx="16" cy="13" r=".5" />
+        <circle cx="18" cy="3" r=".5" />
+        <circle cx="20" cy="21" r=".5" />
+        <circle cx="20" cy="8" r=".5" />
     </svg>
 );
 

src/components/LayoutWrapper.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect } from 'react';
 import { usePathname } from 'next/navigation';
 import { Sidebar } from './Sidebar';
 import { RightSidebar } from './RightSidebar';
@@ -14,6 +15,37 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
         pathname?.startsWith('/install') ||
         pathname?.startsWith('/admin');
 
+    useEffect(() => {
+        const applyAccent = (color?: string | null) => {
+            if (!color) return;
+            const cleaned = color.trim();
+            const normalized = cleaned.startsWith('#') ? cleaned : `#${cleaned}`;
+            const hexMatch = /^#([0-9a-fA-F]{6})$/.exec(normalized);
+            if (!hexMatch) return;
+
+            const hex = hexMatch[1];
+            const r = parseInt(hex.slice(0, 2), 16);
+            const g = parseInt(hex.slice(2, 4), 16);
+            const b = parseInt(hex.slice(4, 6), 16);
+
+            const mix = (channel: number, target: number, amount: number) =>
+                Math.round(channel + (target - channel) * amount);
+
+            const hover = `rgb(${mix(r, 255, 0.12)}, ${mix(g, 255, 0.12)}, ${mix(b, 255, 0.12)})`;
+            const muted = `rgba(${r}, ${g}, ${b}, 0.12)`;
+
+            const root = document.documentElement;
+            root.style.setProperty('--accent', `#${hex}`);
+            root.style.setProperty('--accent-hover', hover);
+            root.style.setProperty('--accent-muted', muted);
+        };
+
+        fetch('/api/node', { cache: 'no-store' })
+            .then((res) => res.json())
+            .then((data) => applyAccent(data?.accentColor))
+            .catch(() => { });
+    }, []);
+
     if (isStandalone) {
         return <>{children}</>;
     }

src/components/RightSidebar.tsx

@@ -31,22 +31,18 @@ export function RightSidebar() {
 
     return (
         <aside className="aside">
-            <div className="card" style={{ position: 'relative', overflow: 'hidden', padding: 0 }}>
+            <div className="card" style={{ overflow: 'hidden', padding: 0 }}>
                 {nodeInfo.bannerUrl && (
-                    <>
+                    <div
-                        <div style={{
+                        style={{
-                            position: 'absolute', inset: 0,
+                            height: '140px',
                             background: `url(${nodeInfo.bannerUrl}) center/cover no-repeat`,
-                            opacity: 0.6
+                            borderBottom: '1px solid var(--border)',
-                        }} />
+                        }}
-                        <div style={{
+                    />
-                            position: 'absolute', inset: 0,
-                            background: 'linear-gradient(to bottom, transparent 0%, var(--background-secondary) 90%)'
-                        }} />
-                    </>
                 )}
 
-                <div style={{ position: 'relative', zIndex: 1, padding: '16px' }}>
+                <div style={{ padding: '16px' }}>
                     <h3 style={{ fontWeight: 600, marginBottom: '12px' }}>Welcome to {nodeInfo.name}</h3>
                     <p style={{ color: 'var(--foreground-secondary)', fontSize: '14px', lineHeight: 1.6 }}>
                         {nodeInfo.description}

src/components/Sidebar.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useAuth } from '@/lib/contexts/AuthContext';
-import { HomeIcon, SearchIcon, BellIcon, UserIcon, ShieldIcon } from './Icons';
+import { HomeIcon, SearchIcon, BellIcon, UserIcon, ShieldIcon, SynapsisLogo } from './Icons';
 
 export function Sidebar() {
     const { user, isAdmin } = useAuth();
@@ -15,7 +15,7 @@ export function Sidebar() {
     return (
         <aside className="sidebar">
             <Link href="/" className="logo">
-                <img className="logo-icon" src="/logo.svg" alt="Synapsis" width={28} height={28} />
+                <SynapsisLogo />
                 <span>Synapsis</span>
             </Link>
             <nav>