feat: set default accent

zhanglun · May 25, 2024 · 1807367 · 1807367
1 parent 6f4e4e9
commit 1807367
Show file tree

Hide file tree

Showing 5 changed files with 304 additions and 55 deletions.
diff --git a/src-tauri/src/core/config.rs b/src-tauri/src/core/config.rs
@@ -77,7 +77,7 @@ impl Default for UserConfig {
   fn default() -> Self {
     Self {
       threads: 1,
-      theme: String::from('1'),
+      theme: String::from("default"),
       color_scheme: ColorScheme::System,
       update_interval: 0,
       last_sync_time: Utc

diff --git a/src/App.tsx b/src/App.tsx
@@ -59,7 +59,7 @@ function App() {
     <Theme
       className="w-[100vw] h-[100vh]"
       // @ts-ignore
-      accentColor={store.userConfig.theme || "indigo"}
+      accentColor={store.userConfig.theme || "default"}
       panelBackground="translucent"
     >
       <div className="h-full max-h-full ">

diff --git a/src/layout/Setting/Appearance/Accent.tsx b/src/layout/Setting/Appearance/Accent.tsx
@@ -15,6 +15,7 @@ export const AccentItem = (props: {
   onClick: (accent: Accent) => void;
 }) => {
   const { variable, name, active, onClick } = props;
+  const bgColor = `bg-[${variable}]/50`
 
   return (
     <div onClick={() => onClick({ name, variable })}>
@@ -26,37 +27,33 @@ export const AccentItem = (props: {
           style={{ backgroundColor: `${variable}`, borderColor: `${variable}` }}
         >
           <div
-            className={clsx("w-3 h-3 rounded-full", {
-              "bg-white/50": !active,
-              "bg-white/90": active,
-            })}
+            className={clsx("w-3 h-3 rounded-full")}
+            style={{ backgroundColor: active ? `var(--${name}-3)` : `var(--${name}-8)`}}
           ></div>
         </div>
       </Tooltip>
     </div>
   );
 };
 
-export const Accent = () => {
-  const ACCENTS = [
-    {
-      name: "ruby",
-      variable: "var(--ruby-10)",
-    },
-    {
-      name: "indigo",
-      variable: "var(--indigo-10)",
-    },
-    {
-      name: "tomato",
-      variable: "var(--tomato-10)",
-    },
-    {
-      name: "iris",
-      variable: "var(--iris-10)",
-    },
-  ];
+const ACCENTS = [
+  "default",
+  "brown",
+  "ruby",
+  "crimson",
+  "pink",
+  "purple",
+  "violet",
+  "iris",
+  "indigo",
+  "teal",
+  "jade",
+].map((name: string) => ({
+  name,
+  variable: `var(--${name}-9)`,
+}));
 
+export const Accent = () => {
   const store = useBearStore((state) => ({
     userConfig: state.userConfig,
     updateUserConfig: state.updateUserConfig,
@@ -77,7 +74,7 @@ export const Accent = () => {
   };
 
   return (
-    <div className="flex gap-4 items-center">
+    <div className="flex gap-4 items-center flex-wrap">
       {ACCENTS.map((accent: { name: string; variable: string }, i) => {
         return <AccentItem {...accent} active={accent.name === currentTheme} onClick={handleClick} key={i} />;
       })}

diff --git a/src/layout/Setting/Appearance/ColorScheme.tsx b/src/layout/Setting/Appearance/ColorScheme.tsx
@@ -51,7 +51,7 @@ export const ColorScheme = () => {
             "border-2 border-black rounded-lg h-14 flex cursor-pointer items-center justify-center",
             "bg-black text-white",
             {
-              "border-[var(--accent-10)]": store.userConfig.color_scheme === "dark",
+              "border-[var(--accent-10)!important]": store.userConfig.color_scheme === "dark",
             }
           )}
           onClick={() => handleThemeChange("dark")}