Как реализовать темный/светлый режим в vue3? ⇐ CSS

[Anonymous]

Мне интересно, как добавить темный/светлый режим в мой проект Vue 3. Я знаю о

Код: Выделить всё

useDark

[/b] и

Код: Выделить всё

useToggle

[/b] из @vueuse/core, но я не знаю, как реализовать их в каждом компоненте моего приложения.

Код: Выделить всё

const isDark = useDark({
selector: 'body',
attribute: 'color-scheme',
valueDark: 'dark',
valueLight: 'light',
})

Следует ли мне создавать несколько объектов для каждого HTML-элемента на моей странице? Кажется, это даже более трудоемко, чем предыдущий вариант. И как я могу использовать

Код: Выделить всё

isDark

[/b] в моих дочерних компонентах?
В настоящее время я использую магазин Pinia для хранения информации о том, установлен ли режим: темный или светлый. Затем я использую это значение в каждом элементе HTML каждого компонента, чтобы применить класс «темный» или «светлый». Однако этот подход требует много времени, и я считаю, что должен быть лучший способ справиться с этим.

Подробнее здесь: https://stackoverflow.com/questions/765 ... de-in-vue3