Merge pull request #332 from Innei/fix-darkmode-scrollvar

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)
+  useMonacoTheme(isDark)
+
+  return (
+    // define initial theme
+    <Editor {...props} theme={props.theme ?? (isDark ? "dark" : "light")} />
+  )
 }

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

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

src/css/variables.css

@@ -6,15 +6,23 @@ 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 {
   --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"));
   }
 }