From 4726e757d5aa6a1db84c7482cefa546c9cb5d08f Mon Sep 17 00:00:00 2001 From: LangQi99 <2032771946@qq.com> Date: Sun, 1 Jun 2025 16:38:57 +0800 Subject: [PATCH 1/5] feat: support dark mode code --- src/containers/editor/editor/Editor.tsx | 5 +++++ src/containers/editor/sidenav/index.tsx | 12 ++++++++++++ 2 files changed, 17 insertions(+) diff --git a/src/containers/editor/editor/Editor.tsx b/src/containers/editor/editor/Editor.tsx index 011cf469..458d6cc3 100644 --- a/src/containers/editor/editor/Editor.tsx +++ b/src/containers/editor/editor/Editor.tsx @@ -10,6 +10,7 @@ import { getTree } from "@/stores/treeStore"; import { loader, Editor as MonacoEditor } from "@monaco-editor/react"; import { useTranslations } from "next-intl"; import { useShallow } from "zustand/shallow"; +import { useTheme } from "next-themes"; loader.config({ paths: { vs: vsURL } }); @@ -21,6 +22,7 @@ export default function Editor({ kind, ...props }: EditorProps) { const translations = useTranslations(); const setEditor = useEditorStore((state) => state.setEditor); const setTranslations = useEditorStore((state) => state.setTranslations); + const { theme } = useTheme(); useDisplayExample(); useRevealNode(); @@ -29,6 +31,7 @@ export default function Editor({ kind, ...props }: EditorProps) { } + theme={theme === "dark" ? "vs-dark" : "light"} options={{ fontSize: 13, // 设置初始字体大小 scrollBeyondLastLine: false, // 行数超过一屏时才展示滚动条 @@ -58,6 +61,8 @@ export default function Editor({ kind, ...props }: EditorProps) { setEditor(wrapper); setTranslations(translations); console.l(`finished initial editor ${kind}:`, wrapper); + // 同步设置monaco主题 + monaco.editor.setTheme(theme === "dark" ? "vs-dark" : "light"); }} {...props} /> diff --git a/src/containers/editor/sidenav/index.tsx b/src/containers/editor/sidenav/index.tsx index b3ba7706..40f971e7 100644 --- a/src/containers/editor/sidenav/index.tsx +++ b/src/containers/editor/sidenav/index.tsx @@ -18,6 +18,7 @@ import { AlignHorizontalJustifyCenter, ArrowLeftToLine, ArrowRightFromLine, + SunMoon, } from "lucide-react"; import { useTranslations } from "next-intl"; import { useShallow } from "zustand/shallow"; @@ -31,6 +32,8 @@ import PopoverBtn, { popoverBtnClass } from "./PopoverButton"; import SharePopover from "./SharePopover"; import StatisticsPopover from "./StatisticsPopover"; import Toggle from "./Toggle"; +import { useTheme } from "next-themes"; +import { useEffect, useState } from "react"; export default function SideNav() { const cc = useConfigFromCookies(); @@ -63,6 +66,9 @@ export default function SideNav() { }; }), ); + const { theme, setTheme } = useTheme(); + const [mounted, setMounted] = useState(false); + useEffect(() => { setMounted(true); }, []); return (
} content={} /> {/* can't connect to supabase in China, so disable the function temporarily */} {!isCN && } + +
)} {viewMode === ViewMode.Graph && } + ); } +function ThemeButton() { + const { theme, setTheme } = useTheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { setMounted(true); }, []); + const isDark = theme === "dark"; + return ( + + /> ); } diff --git a/src/containers/editor/sidenav/index.tsx b/src/containers/editor/sidenav/index.tsx index 40f971e7..cbd1e001 100644 --- a/src/containers/editor/sidenav/index.tsx +++ b/src/containers/editor/sidenav/index.tsx @@ -18,7 +18,6 @@ import { AlignHorizontalJustifyCenter, ArrowLeftToLine, ArrowRightFromLine, - SunMoon, } from "lucide-react"; import { useTranslations } from "next-intl"; import { useShallow } from "zustand/shallow"; @@ -138,12 +137,6 @@ export default function SideNav() { } content={} /> {/* can't connect to supabase in China, so disable the function temporarily */} {!isCN && } -