Skip to content

Commit

Permalink
fix: 🐛 fix scroll bar style (#617)
Browse files Browse the repository at this point in the history
  • Loading branch information
haydenull authored Mar 16, 2023
1 parent 25692f8 commit c797ff5
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 2 deletions.
4 changes: 3 additions & 1 deletion src/main.ts
Original file line number Diff line number Diff line change
@@ -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)
Expand Down
3 changes: 2 additions & 1 deletion src/plugins/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import setupAssets from './assets'
import setupScrollbarStyle from './scrollbarStyle'

export { setupAssets }
export { setupAssets, setupScrollbarStyle }
28 changes: 28 additions & 0 deletions src/plugins/scrollbarStyle.ts
Original file line number Diff line number Diff line change
@@ -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

0 comments on commit c797ff5

Please sign in to comment.