From db5b54025b99247bcd2ed0eca7b09172b0bb68bc Mon Sep 17 00:00:00 2001
From: zhenyi <434836402@qq.com>
Date: Sat, 30 May 2026 15:07:36 +0800
Subject: [PATCH] feat: update App entry and global styles

---
 src/App.tsx   |   8 +++
 src/index.css | 175 +++++++++++++++++++++++++-------------------------
 2 files changed, 94 insertions(+), 89 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 67d0c73..47dc276 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,8 @@
 import './App.css'
+import { useEffect } from "react";
 import { Navigate, createBrowserRouter, useParams } from "react-router";
 import { RouterProvider } from "react-router/dom";
+import { getSavedThemeId, getThemeById, applyTheme, defaultThemeId } from "@/lib/theme";
 
 import AuthLayout from "@/page/auth/layout";
 import LoginPage from "@/page/auth/login";
@@ -51,6 +53,12 @@ function WorkspaceCompatRedirect() {
 }
 
 function App() {
+  useEffect(() => {
+    const id = getSavedThemeId();
+    const preset = getThemeById(id) || getThemeById(defaultThemeId)!;
+    applyTheme(preset);
+  }, []);
+
   const router = createBrowserRouter([
     {
       path: "/",
diff --git a/src/index.css b/src/index.css
index ad5dbd7..d4da028 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,7 +4,7 @@
 @import "@fontsource-variable/space-grotesk";
 @import "@fontsource-variable/dm-sans";
 @import "@fontsource-variable/jetbrains-mono";
-@import "highlight.js/styles/github-dark.css";
+@import "highlight.js/styles/github.css";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -43,82 +43,77 @@
     --color-card: var(--card);
     --color-foreground: var(--foreground);
     --color-background: var(--background);
-    --radius-sm: calc(var(--radius) * 0.6);
-    --radius-md: calc(var(--radius) * 0.8);
+    --radius-sm: calc(var(--radius) * 0.5);
+    --radius-md: calc(var(--radius) * 0.75);
     --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) * 1.4);
-    --radius-2xl: calc(var(--radius) * 1.8);
-    --radius-3xl: calc(var(--radius) * 2.2);
-    --radius-4xl: calc(var(--radius) * 2.6);
+    --radius-xl: calc(var(--radius) * 1.25);
+    --radius-2xl: calc(var(--radius) * 1.5);
+    --radius-3xl: calc(var(--radius) * 2);
+    --radius-4xl: calc(var(--radius) * 2.5);
 }
 
 :root {
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.45 0.24 290);
-    --primary-foreground: oklch(0.98 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.45 0.24 290);
-    --chart-1: oklch(0.45 0.24 290);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --radius: 0.625rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.45 0.24 290);
-    --sidebar-primary-foreground: oklch(0.98 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.45 0.24 290);
+    --background: #ffffff;
+    --foreground: #111111;
+    --card: #ffffff;
+    --card-foreground: #111111;
+    --popover: #ffffff;
+    --popover-foreground: #111111;
+    --primary: #111111;
+    --primary-foreground: #ffffff;
+    --secondary: #f5f5f5;
+    --secondary-foreground: #111111;
+    --muted: #f5f5f5;
+    --muted-foreground: #737373;
+    --accent: #f5f5f5;
+    --accent-foreground: #111111;
+    --destructive: #ef4444;
+    --border: #e8e8e8;
+    --input: #e8e8e8;
+    --ring: #111111;
+    --chart-1: #111111;
+    --chart-2: #737373;
+    --chart-3: #4b5563;
+    --chart-4: #374151;
+    --chart-5: #1f2937;
+    --radius: 0.875rem;
+    --sidebar: #fafafa;
+    --sidebar-foreground: #111111;
+    --sidebar-primary: #111111;
+    --sidebar-primary-foreground: #ffffff;
+    --sidebar-accent: #f5f5f5;
+    --sidebar-accent-foreground: #111111;
+    --sidebar-border: #e8e8e8;
+    --sidebar-ring: #111111;
 }
 
 .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.45 0.24 290);
-    --primary-foreground: oklch(0.98 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.45 0.24 290);
-    --chart-1: oklch(0.45 0.24 290);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.45 0.24 290);
-    --sidebar-primary-foreground: oklch(0.98 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.45 0.24 290);
+    --background: #0f1115;
+    --foreground: #ececf1;
+    --card: #16181d;
+    --card-foreground: #ececf1;
+    --popover: #16181d;
+    --popover-foreground: #ececf1;
+    --primary: #5E6AD2;
+    --primary-foreground: #ffffff;
+    --secondary: #1f2128;
+    --secondary-foreground: #ececf1;
+    --muted: #1f2128;
+    --muted-foreground: #6e7681;
+    --accent: #1f2128;
+    --accent-foreground: #ececf1;
+    --destructive: #EF4444;
+    --border: rgba(255, 255, 255, 0.08);
+    --input: rgba(255, 255, 255, 0.08);
+    --ring: #5E6AD2;
+    --sidebar: #0f1115;
+    --sidebar-foreground: #ececf1;
+    --sidebar-primary: #5E6AD2;
+    --sidebar-primary-foreground: #ffffff;
+    --sidebar-accent: #1f2128;
+    --sidebar-accent-foreground: #ececf1;
+    --sidebar-border: rgba(255, 255, 255, 0.08);
+    --sidebar-ring: #5E6AD2;
 }
 
 @layer base {
@@ -126,7 +121,8 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
   }
   html {
     @apply font-sans;
@@ -144,23 +140,24 @@
 
 /* cmdk / Radix Dialog */
 [cmdk-overlay] {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: 50;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 50;
 }
+
 [cmdk-dialog] {
-  position: fixed;
-  top: 12%;
-  left: 50%;
-  transform: translateX(-50%);
-  width: min(640px, 92vw);
-  max-height: 72vh;
-  z-index: 51;
-  overflow: hidden;
-  border-radius: 16px;
-  border: 1px solid hsl(var(--border) / 0.6);
-  background: var(--card);
-  color: var(--card-foreground);
-  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
-}
\ No newline at end of file
+    position: fixed;
+    top: 12%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: min(640px, 92vw);
+    max-height: 72vh;
+    z-index: 51;
+    overflow: hidden;
+    border-radius: 12px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    background: var(--card);
+    color: var(--card-foreground);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
+}