feat: optimze ui in dark mode, add color themes, replace dark mode im…

…pl, add debug inspector (#31) * chore: unify header action button style Signed-off-by: Innei <i@innei.in> * fix: dark mode Signed-off-by: Innei <i@innei.in> * chore: fix lockfile Signed-off-by: Innei <i@innei.in> * fix: page color fresh Signed-off-by: Innei <i@innei.in> * fix: type error Signed-off-by: Innei <i@innei.in> * fix: type error Signed-off-by: Innei <i@innei.in> * fix: disableTransition for jotai-dark (#32) * chore: remove todo Signed-off-by: Innei <i@innei.in> --------- Signed-off-by: Innei <i@innei.in> Co-authored-by: Stephen Zhou <hi@hyoban.cc>
RSSNext · Jun 3, 2024 · 3178c06 · 3178c06
1 parent 73bcec0
commit 3178c06
Show file tree

Hide file tree

Showing 26 changed files with 406 additions and 216 deletions.
diff --git a/components.json b/components.json
@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.cjs",
-    "css": "src/renderer/src/assets/main.css",
+    "css": "src/renderer/src/styles/main.css",
     "baseColor": "slate",
     "cssVariables": true,
     "prefix": ""

diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "@tanstack/react-query-persist-client": "5.40.0",
     "@use-gesture/react": "10.3.1",
     "class-variance-authority": "0.7.0",
+    "click-to-react-component": "1.1.0",
     "clsx": "2.1.1",
     "cmdk": "1.0.0",
     "dayjs": "1.11.11",
@@ -57,8 +58,8 @@
     "hast-util-to-jsx-runtime": "2.3.0",
     "immer": "10.1.1",
     "jotai": "2.8.2",
-    "jotai-dark": "^0.3.0",
-    "jotai-effect": "^1.0.0",
+    "jotai-dark": "0.3.1",
+    "jotai-effect": "1.0.0",
     "lethargy": "1.0.9",
     "lodash-es": "4.17.21",
     "lucide-react": "0.381.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -1,9 +1,20 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8" />
     <meta name="referrer" content="no-referrer" />
     <title>Follow</title>
+
+    <script>
+      (function () {
+        var e =
+            window.matchMedia &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches,
+          t = localStorage.getItem("theme") || '"system"';
+        ('"dark"' === t || (e && '"light"' !== t)) &&
+          (document.documentElement.dataset.theme = "light");
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
@@ -7,15 +7,14 @@ import { handlers } from "./tipc"
 
 function App() {
   useDark()
-
   useEffect(() => {
-    const unlisten = handlers?.invalidateQuery.listen((queryKey) => {
+    const cleanup = handlers?.invalidateQuery.listen((queryKey) => {
       queryClient.invalidateQueries({
         queryKey,
       })
     })
 
-    return unlisten
+    return cleanup
   }, [])
 
   return (

diff --git a/src/renderer/src/components/appearance-switch.tsx b/src/renderer/src/components/appearance-switch.tsx
@@ -3,8 +3,7 @@ import { useDark } from "@renderer/hooks/useDark"
 import { Switch } from "./ui/switch"
 
 export function AppearanceSwitch() {
-  const { toggleDark, isDark } = useDark()
-
+  const { isDark, toggleDark } = useDark()
   return (
     <div className="flex items-center justify-between gap-4">
       <p>Dark Mode</p>