Как переключиться: корень-цветный свет свет/темный из Pinia с vuetify? ⇐ CSS

[Anonymous]

Недавно я добавил индивидуальные схемы Light/Dark Color в приложение Vuetify, и пользователь может переключаться между ними, и это работает хорошо, за исключением одной вещи: цвет стержня прокрутки не меняется. В инструментах Dev Browser я проследил его до этого бита CSS: < /p>
:root {
color-scheme: dark;
}
< /code>
Если я переключаюсь на тему света, то CSS все еще там, все еще установлен на темноте, а полоса прокрутки остается темной. Если я снимаю это в инструментах Dev, он превратится в свет. Я меняю тему с помощью магазина Pinia, и я понял на выключателе на свет, который бы взял корень и отрегулировал его. Но из моей функции хранилища Pinia Document.DocumentElement-NULL: < /p>
import { computed } from "vue"
import { defineStore } from "pinia"
import { usePreferredDark, useStorage } from "@vueuse/core"

const isDark = usePreferredDark()

export const useAppearanceStore = defineStore("appearance", () => {
const dark = useStorage("tiara-dark", isDark ? true : false)
const lightOrDarkString = computed(() => {
return dark.value ? "dark" : "light"
})
const theme = computed(() => {
return dark.value ? "tiaraDark1" : "tiaraLight1"
})
function toggleDark() {
dark.value = !dark.value
console.log(document.documentElement) // prints null
if (!dark.value) {
document.documentElement.style.setProperty('--color-scheme', 'light')
}
}

return { theme, dark, lightOrDarkString, toggleDark }
})
< /code>
Итак, я попытался пропустить корневой элемент в качестве аргумента. В компоненте с переключателем переключателя: < /p>
onMounted(() => {
root = document.documentElement
})
< /code>
@click="appearance.toggleDark(root)"
< /code>
и в магазине Pinia: < /p>
function toggleDark(root) {
dark.value = !dark.value
console.log(root) // now it's there
if (!dark.value) {
root.style.setProperty('--color-scheme', 'light')
}
}
< /code>
Но это все еще не работает. Теперь элемент получает-color-scheme: light , но: root все еще там с-color-scheme: Dark , а полоса прокрутки все еще темная.
Почему: Crown-Scheme Root по-прежнему устанавливается в Dark после того, как я изменяю тему на тему легкой в ​​Vuetify? И как я могу это исправить? "@vueuse/core": "^12.8.2",
"pinia": "^3.0.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0",
"vuetify": "^3.7.15"


Подробнее здесь: https://stackoverflow.com/questions/795 ... th-vuetify