I not too long ago added customized mild/darkish shade schemes to a Vuetify app and the consumer can toggle between them and that works properly, aside from one factor: the scroll bar shade would not change. In browser dev instruments I traced it right down to this little bit of CSS:
:root {
color-scheme: darkish;
}
If I swap to the sunshine theme, that CSS remains to be there, nonetheless set to darkish, and the scroll bar stays darkish. If I uncheck it in dev instruments, it turns mild.
I could not discover something in Vuetify that addressed this, so I figured I would do it myself. I alter the theme with a pinia retailer, and I figured on the swap to mild I would seize the foundation and regulate it. However from my pinia retailer perform, doc.documentElement is null:
import { computed } from "vue"
import { defineStore } from "pinia"
import { usePreferredDark, useStorage } from "@vueuse/core"
const isDark = usePreferredDark()
export const useAppearanceStore = defineStore("look", () => {
const darkish = useStorage("tiara-dark", isDark ? true : false)
const lightOrDarkString = computed(() => {
return darkish.worth ? "darkish" : "mild"
})
const theme = computed(() => {
return darkish.worth ? "tiaraDark1" : "tiaraLight1"
})
perform toggleDark() {
darkish.worth = !darkish.worth
console.log(doc.documentElement) // prints null
if (!darkish.worth) {
doc.documentElement.model.setProperty('--color-scheme', 'mild')
}
}
return { theme, darkish, lightOrDarkString, toggleDark }
})
So then I attempted passing within the root ingredient as an argument. Within the element with the toggle swap:
onMounted(() => {
root = doc.documentElement
})
@click on="look.toggleDark(root)"
And in pinia retailer:
perform toggleDark(root) {
darkish.worth = !darkish.worth
console.log(root) // prints null
if (!darkish.worth) {
root.model.setProperty('--color-scheme', 'mild')
}
}
Nevertheless it nonetheless would not work. Now the <html> ingredient will get --color-scheme: mild, however the :root remains to be there with --color-scheme: darkish, and the scroll bar remains to be darkish.
Why is :root’s color-scheme nonetheless set to darkish after I alter the theme to a light-weight theme in Vuetify? And the way can I repair it?
Variations:
"@vueuse/core": "^12.8.2",
"pinia": "^3.0.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0",
"vuetify": "^3.7.15"
