From b10280712a5464ed2c7ecd5271bf595cb7727a62 Mon Sep 17 00:00:00 2001 From: Stephen Zhou Date: Sun, 26 May 2024 22:57:30 +0800 Subject: [PATCH] feat: dark mode (#12) * feat: dark mode * update * update * refactor: move to settings --------- Co-authored-by: DIYgod --- package.json | 2 + pnpm-lock.yaml | 38 ++++++++++ src/renderer/src/App.tsx | 3 + src/renderer/src/assets/base.css | 5 +- src/renderer/src/assets/tailwind.css | 73 ++++++++++--------- .../src/components/appearance-switch.tsx | 14 ++++ .../components/entry-column/item-wrapper.tsx | 4 +- .../src/components/entry-content/index.tsx | 2 +- src/renderer/src/hooks/useDark.ts | 13 ++++ src/renderer/src/pages/settings/index.tsx | 3 + src/renderer/src/pages/settings/layout.tsx | 4 +- tailwind.config.cjs | 6 +- 12 files changed, 124 insertions(+), 43 deletions(-) create mode 100644 src/renderer/src/components/appearance-switch.tsx create mode 100644 src/renderer/src/hooks/useDark.ts diff --git a/package.json b/package.json index 0ebd9fe48..f5238dff6 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,8 @@ "framer-motion": "11.2.6", "hast-util-to-jsx-runtime": "2.3.0", "jotai": "2.8.1", + "jotai-dark": "^0.3.0", + "jotai-effect": "^1.0.0", "lethargy": "1.0.9", "lucide-react": "0.379.0", "ofetch": "1.3.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 285eccfc5..4dc382523 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -104,6 +104,12 @@ importers: jotai: specifier: 2.8.1 version: 2.8.1(@types/react@18.3.3)(react@18.3.1) + jotai-dark: + specifier: ^0.3.0 + version: 0.3.0(jotai-effect@1.0.0(jotai@2.8.1(@types/react@18.3.3)(react@18.3.1)))(jotai@2.8.1(@types/react@18.3.3)(react@18.3.1))(react@18.3.1) + jotai-effect: + specifier: ^1.0.0 + version: 1.0.0(jotai@2.8.1(@types/react@18.3.3)(react@18.3.1)) lethargy: specifier: 1.0.9 version: 1.0.9 @@ -3439,6 +3445,28 @@ packages: jose@5.3.0: resolution: {integrity: sha512-IChe9AtAE79ru084ow8jzkN2lNrG3Ntfiv65Cvj9uOCE2m5LNsdHG+9EbxWxAoWRF9TgDOqLN5jm08++owDVRg==} + jotai-dark@0.3.0: + resolution: {integrity: sha512-Vuhymer1VLaAjSW+hLowZBZa0FSKMamo3xajXubCr0Jdnp5P80vrh/5s29EQ2cp3eSa9weuUy+kdoMKEDdp/sA==} + peerDependencies: + foxact: ^0.2.33 + jotai: '>=2.5.0' + jotai-effect: '*' + react: ^18.2.0 + peerDependenciesMeta: + foxact: + optional: true + jotai: + optional: true + jotai-effect: + optional: true + react: + optional: true + + jotai-effect@1.0.0: + resolution: {integrity: sha512-eCgKKG4BACDzuJGYTu0xZRk1C1MEOvbAhC3L8w7YufQ2lSLORwNX/WFnCuZxLFX0sDLkTUeoUzOYaw8wnXY+UQ==} + peerDependencies: + jotai: '>=2.5.0' + jotai@2.8.1: resolution: {integrity: sha512-Gmk5Y3yJL/vN5S0rQ6AaWpXH5Q+HBGHThMHXfylVzXGVuO8YxPRtZf8Y9XYvl+h7ZMQXoHNdFi37vNsJFsiszQ==} engines: {node: '>=12.20.0'} @@ -8871,6 +8899,16 @@ snapshots: jose@5.3.0: {} + jotai-dark@0.3.0(jotai-effect@1.0.0(jotai@2.8.1(@types/react@18.3.3)(react@18.3.1)))(jotai@2.8.1(@types/react@18.3.3)(react@18.3.1))(react@18.3.1): + optionalDependencies: + jotai: 2.8.1(@types/react@18.3.3)(react@18.3.1) + jotai-effect: 1.0.0(jotai@2.8.1(@types/react@18.3.3)(react@18.3.1)) + react: 18.3.1 + + jotai-effect@1.0.0(jotai@2.8.1(@types/react@18.3.3)(react@18.3.1)): + dependencies: + jotai: 2.8.1(@types/react@18.3.3)(react@18.3.1) + jotai@2.8.1(@types/react@18.3.3)(react@18.3.1): optionalDependencies: '@types/react': 18.3.3 diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 56e425497..4e3adc6a4 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -1,6 +1,9 @@ import { Outlet } from "react-router-dom" +import { useDark } from "./hooks/useDark" + function App() { + useDark() return ( <>
+

Dark Mode

+ +
+ ) +} diff --git a/src/renderer/src/components/entry-column/item-wrapper.tsx b/src/renderer/src/components/entry-column/item-wrapper.tsx index 4216170d6..b49bc1bec 100644 --- a/src/renderer/src/components/entry-column/item-wrapper.tsx +++ b/src/renderer/src/components/entry-column/item-wrapper.tsx @@ -62,8 +62,8 @@ export function EntryItemWrapper({ key={entry.id} className={cn( "rounded-md transition-colors", - activeEntry === entry.id && "bg-[#DEDDDC]", - entry.read && "text-gray-500 opacity-90", + activeEntry === entry.id && "bg-native-active", + entry.read && "text-foreground/50", )} ref={itemRef} onClick={(e) => { diff --git a/src/renderer/src/components/entry-content/index.tsx b/src/renderer/src/components/entry-content/index.tsx index 865c8e875..3c973e87d 100644 --- a/src/renderer/src/components/entry-content/index.tsx +++ b/src/renderer/src/components/entry-content/index.tsx @@ -51,7 +51,7 @@ export function EntryContent({ entryId }: { entryId: ActiveEntry }) { new Date(entry.data?.publishedAt).toUTCString()} -
+
{content}
diff --git a/src/renderer/src/hooks/useDark.ts b/src/renderer/src/hooks/useDark.ts new file mode 100644 index 000000000..4d8288c5b --- /dev/null +++ b/src/renderer/src/hooks/useDark.ts @@ -0,0 +1,13 @@ +import { useAtom } from "jotai" +import { atomDark } from "jotai-dark" + +const isDarkAtom = atomDark() + +export function useDark() { + const [isDark, setIsDark] = useAtom(isDarkAtom) + return { + isDark, + toggleDark: setIsDark as () => void, + theme: (isDark ? "dark" : "light") as "dark" | "light", + } +} diff --git a/src/renderer/src/pages/settings/index.tsx b/src/renderer/src/pages/settings/index.tsx index 74d6620f4..5b59d1b99 100644 --- a/src/renderer/src/pages/settings/index.tsx +++ b/src/renderer/src/pages/settings/index.tsx @@ -1,3 +1,5 @@ +import { AppearanceSwitch } from "@renderer/components/appearance-switch" + export function Component() { return ( <> @@ -5,6 +7,7 @@ export function Component() { General + ) } diff --git a/src/renderer/src/pages/settings/layout.tsx b/src/renderer/src/pages/settings/layout.tsx index 4e7a36460..abd112714 100644 --- a/src/renderer/src/pages/settings/layout.tsx +++ b/src/renderer/src/pages/settings/layout.tsx @@ -40,8 +40,8 @@ export function Component() { {tabs.map((t) => ( diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 6e090562f..858edc59c 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -3,7 +3,7 @@ const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons") /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], - content: ["./src/**/*.tsx"], + content: ["./src/**/*.{ts,tsx}"], prefix: "", theme: { container: { @@ -49,8 +49,8 @@ module.exports = { foreground: "hsl(var(--card-foreground))", }, native: { - DEFAULT: "#E1E0DF", - active: "#C9C9C7", + DEFAULT: "hsl(var(--native))", + active: "hsl(var(--native-active))", }, }, borderRadius: {