From e53f1d49d39d25505f5e46e5708d1ca69d02d875 Mon Sep 17 00:00:00 2001
From: Hayden Chen <hayden.chen.b612@gmail.com>
Date: Thu, 16 Mar 2023 11:51:07 +0800
Subject: [PATCH] fix: :bug: fix scroll bar style (#617)

---
 src/main.ts                   |  4 +++-
 src/plugins/index.ts          |  3 ++-
 src/plugins/scrollbarStyle.ts | 28 ++++++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 src/plugins/scrollbarStyle.ts

diff --git a/src/main.ts b/src/main.ts
index 736f778308..de119f6853 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import { setupI18n } from './locales'
-import { setupAssets } from './plugins'
+import { setupAssets, setupScrollbarStyle } from './plugins'
 import { setupStore } from './store'
 import { setupRouter } from './router'
 
@@ -9,6 +9,8 @@ async function bootstrap() {
   const app = createApp(App)
   setupAssets()
 
+  setupScrollbarStyle()
+
   setupStore(app)
 
   setupI18n(app)
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index ae1ac22800..18e9c1a59b 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -1,3 +1,4 @@
 import setupAssets from './assets'
+import setupScrollbarStyle from './scrollbarStyle'
 
-export { setupAssets }
+export { setupAssets, setupScrollbarStyle }
diff --git a/src/plugins/scrollbarStyle.ts b/src/plugins/scrollbarStyle.ts
new file mode 100644
index 0000000000..e4fb784773
--- /dev/null
+++ b/src/plugins/scrollbarStyle.ts
@@ -0,0 +1,28 @@
+import { darkTheme, lightTheme } from 'naive-ui'
+
+const setupScrollbarStyle = () => {
+  const style = document.createElement('style')
+  const styleContent = `
+    ::-webkit-scrollbar {
+      background-color: transparent;
+      width: ${lightTheme.Scrollbar.common?.scrollbarWidth};
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: ${lightTheme.Scrollbar.common?.scrollbarColor};
+      border-radius: ${lightTheme.Scrollbar.common?.scrollbarBorderRadius};
+    }
+    html.dark ::-webkit-scrollbar {
+      background-color: transparent;
+      width: ${darkTheme.Scrollbar.common?.scrollbarWidth};
+    }
+    html.dark ::-webkit-scrollbar-thumb {
+      background-color: ${darkTheme.Scrollbar.common?.scrollbarColor};
+      border-radius: ${darkTheme.Scrollbar.common?.scrollbarBorderRadius};
+    }
+  `
+
+  style.innerHTML = styleContent
+  document.head.appendChild(style)
+}
+
+export default setupScrollbarStyle