fix: change color of scrollbars in theme--light

Signed-off-by: Stefan Dej <[email protected]>
mainsail-crew · Dec 11, 2023 · f90d910 · f90d910
1 parent a11a94a
commit f90d910
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/src/App.vue b/src/App.vue
@@ -206,7 +206,11 @@ export default class App extends Mixins(BaseMixin, ThemeMixin) {
 
     @Watch('theme')
     themeChanged(newVal: string): void {
-        this.$vuetify.theme.dark = newVal == 'dark' ? true : false
+        const dark = newVal !== 'light'
+        this.$vuetify.theme.dark = dark
+
+        const doc = document.documentElement
+        doc.className = dark ? 'theme--dark' : 'theme--light'
     }
 
     drawFavicon(val: number): void {

diff --git a/src/assets/styles/page.css b/src/assets/styles/page.css
@@ -77,3 +77,29 @@ body {
     min-width: 100px;
     min-height: 100px;
 }
+
+/* Light theme */
+html.theme--light {
+    scrollbar-color: rgba(0, 0, 0, 0.55) #ffffff;
+}
+
+html.theme--light body {
+    background: #ffffff !important;
+}
+
+html.theme--light ::-webkit-scrollbar {
+    background-color: #ffffff;
+}
+
+html.theme--light ::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-color: #ffffff;
+}
+
+html.theme--light .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
+    background: rgba(0, 0, 0, 0.4) !important;
+}
+
+html.theme--light .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover {
+    background: rgba(0, 0, 0, 0.55) !important;
+}