diff --git a/src/App.vue b/src/App.vue
index b21e0bd6b..0af7f9de4 100644
--- 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
index 979b5d51e..fc3438e48 100644
--- 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;
+}