From 72babbb3937ebd9117c9b4594e3facd612d9b272 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 20 May 2025 23:58:22 +0800
Subject: [PATCH] fix: dark mode of highlight.js

---
 web/src/App.tsx                              | 6 +-----
 web/src/components/MemoContent/CodeBlock.tsx | 2 --
 web/src/components/MemoEditor/index.tsx      | 3 +--
 web/src/css/tailwind.css                     | 3 +++
 4 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 0fa930629..7bbb99620 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -30,11 +30,7 @@ const App = observer(() => {
     };
 
     try {
-      if (darkMediaQuery.addEventListener) {
-        darkMediaQuery.addEventListener("change", handleColorSchemeChange);
-      } else {
-        darkMediaQuery.addListener(handleColorSchemeChange);
-      }
+      darkMediaQuery.addEventListener("change", handleColorSchemeChange);
     } catch (error) {
       console.error("failed to initial color scheme listener", error);
     }
diff --git a/web/src/components/MemoContent/CodeBlock.tsx b/web/src/components/MemoContent/CodeBlock.tsx
index 23d34b9ec..70e334a52 100644
--- a/web/src/components/MemoContent/CodeBlock.tsx
+++ b/web/src/components/MemoContent/CodeBlock.tsx
@@ -6,8 +6,6 @@ import toast from "react-hot-toast";
 import { cn } from "@/utils";
 import MermaidBlock from "./MermaidBlock";
 import { BaseProps } from "./types";
-import "highlight.js/styles/atom-one-dark.css";
-import "highlight.js/styles/github.css";
 
 // Special languages that are rendered differently.
 enum SpecialLanguage {
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index 1098e5ed8..0b71b0640 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -522,9 +522,8 @@ const MemoEditor = observer((props: Props) => {
         <div className="w-full flex flex-row justify-between items-center py-3 gap-2 overflow-auto dark:border-t-zinc-500">
           <div className="relative flex flex-row justify-start items-center" onFocus={(e) => e.stopPropagation()}>
             <Select
-              className="!text-sm"
               variant="plain"
-              size="md"
+              size="sm"
               value={state.memoVisibility}
               startDecorator={<VisibilityIcon visibility={state.memoVisibility} />}
               onChange={(_, visibility) => {
diff --git a/web/src/css/tailwind.css b/web/src/css/tailwind.css
index 979ac50e8..88e1c8e54 100644
--- a/web/src/css/tailwind.css
+++ b/web/src/css/tailwind.css
@@ -1,3 +1,6 @@
+@import url("highlight.js/styles/github.css") (prefers-color-scheme: light);
+@import url("highlight.js/styles/github-dark.css") (prefers-color-scheme: dark);
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;