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

[Anonymous]

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

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

useDark

[/b] и

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

useToggle

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

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

const isDark = useDark({
selector: 'body',
attribute: 'color-scheme',
valueDark: 'dark',
valueLight: 'light',
})
< /code>
Должен ли я создавать несколько объектов для каждого элемента HTML на моей странице? Это кажется еще более трудоемким, чем предыдущий вариант. И как я могу использовать [b]isDark

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

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