TeamPiped-mirror
/
Piped
mirror of https://github.com/TeamPiped/Piped.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make scroll bar respect (light) theme preference

This commit is contained in:
thecashewtrader 2022-11-02 22:18:24 +05:30
parent ffd02f9cdd
commit c492881096
1 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.vue
View File

@ -33,6 +33,10 @@ export default {
let themePref = this.getPreferenceString("theme", "dark"); let themePref = this.getPreferenceString("theme", "dark");
if (themePref == "auto") this.theme = darkModePreference.matches ? "dark" : "light"; if (themePref == "auto") this.theme = darkModePreference.matches ? "dark" : "light";
else this.theme = themePref; else this.theme = themePref;
// Used for the scrollbar
const root = document.querySelector(":root");
this.theme == "dark" ? root.classList.add("dark") : root.classList.remove("dark");
}, },
}, },
mounted() { mounted() {
@ -96,28 +100,31 @@ b {
text-align: start; text-align: start;
} }
::-webkit-scrollbar { .dark ::-webkit-scrollbar {
background-color: #15191a; background-color: #15191a;
} }
::-webkit-scrollbar-thumb { .dark ::-webkit-scrollbar-thumb {
background-color: #4b4f52; background-color: #4b4f52;
} }
::-webkit-scrollbar-thumb:hover { .dark ::-webkit-scrollbar-thumb:hover {
background-color: #5b6469; background-color: #5b6469;
} }
::-webkit-scrollbar-thumb:active { .dark ::-webkit-scrollbar-thumb:active {
background-color: #485053; background-color: #485053;
} }
::-webkit-scrollbar-corner { .dark ::-webkit-scrollbar-corner {
background-color: #0b0e0f; background-color: #0b0e0f;
} }
:root.dark {
scrollbar-color: #4b4f52 #15191a;
}
* { * {
scrollbar-color: #15191a #444a4e;
@apply font-sans; @apply font-sans;
} }