fix: 🐛 fix scroll bar style (#617)

Author: haydenull

src/main.ts

@@ -1,14 +1,16 @@
 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'
 
 async function bootstrap() {
   const app = createApp(App)
   setupAssets()
 
+  setupScrollbarStyle()
+
   setupStore(app)
 
   setupI18n(app)

src/plugins/index.ts

@@ -1,3 +1,4 @@
 import setupAssets from './assets'
+import setupScrollbarStyle from './scrollbarStyle'
 
-export { setupAssets }
+export { setupAssets, setupScrollbarStyle }

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