mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Make scroll bar respect (light) theme preference
This commit is contained in:
parent
ffd02f9cdd
commit
c492881096
1 changed files with 13 additions and 6 deletions
19
src/App.vue
19
src/App.vue
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue