From f8209b43ff5d0e24afff56516854edf2d01ad4ae Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Thu, 13 Apr 2023 23:00:18 +0800
Subject: [PATCH 1/4] feat: new scrollbar style

Signed-off-by: Innei <tukon479@gmail.com>
---
 src/css/tailwind.css  | 25 +++++++++++++++++++++++++
 src/css/variables.css |  2 ++
 2 files changed, 27 insertions(+)

diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index 89bf714f..052f5b66 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -21,6 +21,31 @@
   border-color: var(--border-color);
 }
 
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  background: theme("colors.white");
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--theme-color);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--hover-color);
+}
+
+::-webkit-scrollbar-corner {
+  background: theme("colors.white");
+}
+
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--theme-color);
+  border: 3px solid theme("colors.white");
+  border-radius: 5px;
+}
+
 body {
   @apply break-words bg-white;
 }
diff --git a/src/css/variables.css b/src/css/variables.css
index fe9e1f95..b8968418 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -10,11 +10,13 @@ html {
 
 html.dark {
   --border-color: #333;
+  --theme-color: var(--auto-theme-color, theme("colors.orange.600"));
 }
 
 @media (prefers-color-scheme: dark) {
   html.not(.light) {
     --border-color: #333;
+    --theme-color: var(--auto-theme-color, theme("colors.orange.600"));
   }
 }
 

From f4956ea2942d62cca7d5f3871d3cc4d44c328755 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Thu, 13 Apr 2023 23:56:20 +0800
Subject: [PATCH 2/4] fix: firefox scrollbar style

Signed-off-by: Innei <tukon479@gmail.com>
---
 src/css/variables.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/css/variables.css b/src/css/variables.css
index b8968418..23f29b83 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -6,6 +6,12 @@ html {
   --header-height: auto;
   /* Accent color for form controls */
   accent-color: var(--theme-color);
+
+  /* make app like native app in mobile */
+  -webkit-tap-highlight-color: transparent;
+  /*  for firefox */
+  scrollbar-color: var(--theme-color) transparent;
+  scrollbar-width: thin;
 }
 
 html.dark {

From 9a25ebc6283044757bba7aaa3df6cd7f8db986f4 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Fri, 14 Apr 2023 00:07:28 +0800
Subject: [PATCH 3/4] fix: monaco theme lost if re-render

Signed-off-by: Innei <tukon479@gmail.com>
---
 src/components/common/Monaco/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Monaco/index.tsx b/src/components/common/Monaco/index.tsx
index f6f02bea..b3c67f9e 100644
--- a/src/components/common/Monaco/index.tsx
+++ b/src/components/common/Monaco/index.tsx
@@ -1,7 +1,13 @@
 import Editor, { EditorProps } from "@monaco-editor/react"
 import { useMonacoTheme } from "./use-theme"
+import { useMediaStore } from "~/hooks/useDarkMode"
 
 export function MonacoEditor(props: EditorProps) {
   useMonacoTheme()
-  return <Editor {...props} />
+  const isDark = useMediaStore((state) => state.isDark)
+
+  return (
+    // define initial theme
+    <Editor {...props} theme={props.theme ?? (isDark ? "dark" : "light")} />
+  )
 }

From 1f6d941607bab14a165ef354797558a5e741aece Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Fri, 14 Apr 2023 00:08:23 +0800
Subject: [PATCH 4/4] pref(editor): subscribe `isDark` once

Signed-off-by: Innei <tukon479@gmail.com>
---
 src/components/common/Monaco/index.tsx    | 2 +-
 src/components/common/Monaco/use-theme.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/common/Monaco/index.tsx b/src/components/common/Monaco/index.tsx
index b3c67f9e..1f3b89a2 100644
--- a/src/components/common/Monaco/index.tsx
+++ b/src/components/common/Monaco/index.tsx
@@ -3,8 +3,8 @@ import { useMonacoTheme } from "./use-theme"
 import { useMediaStore } from "~/hooks/useDarkMode"
 
 export function MonacoEditor(props: EditorProps) {
-  useMonacoTheme()
   const isDark = useMediaStore((state) => state.isDark)
+  useMonacoTheme(isDark)
 
   return (
     // define initial theme
diff --git a/src/components/common/Monaco/use-theme.ts b/src/components/common/Monaco/use-theme.ts
index db5fd906..5c9dd25c 100644
--- a/src/components/common/Monaco/use-theme.ts
+++ b/src/components/common/Monaco/use-theme.ts
@@ -20,10 +20,10 @@ const useDefineTheme = (theme: string, json: any) => {
   }, [monaco, theme])
 }
 
-export const useMonacoTheme = () => {
+export const useMonacoTheme = (isDark: boolean) => {
   useDefineTheme("light", Light)
   useDefineTheme("dark", Dark)
-  const isDark = useMediaStore((state) => state.isDark)
+
   const monaco = useMonaco()
 
   useEffect(() => {