fix: dark mode of highlight.js

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);
     }

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 {

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) => {

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;