Component SW

Библиотека компонентов Component SW предоставляет набор готовых UI-компонентов на основе Vue 3 для быстрой разработки интерфейсов. Каждый компонент имеет набор свойств, которые можно настраивать для достижения желаемого поведения и внешнего вида. Имеет поддержку светлой и темной системной темы.

Совместимость

Component SW может работать в браузерах 2 поколения.
Если вам действительно нужно поддерживать устаревшие браузеры, добавьте Babel и Polyfill.
Поскольку Vue 3 больше не поддерживает IE11, Component SW также не поддерживает IE.

Установка

npm install @studio-west/component-sw 

Глобальное подключение в main.js:

import { Library } from '@studio-west/component-sw';
import '@studio-west/component-sw/dist/component-sw.css';
---
app.use(Library)

Установка в ручную светлой и темной темы - добавление к тегу html классов dark или light

пример:

const darkMode = () = {
    if(mode.value === 'dark-theme') {
        document.querySelector('html')
          .classList.remove('light')
        document.querySelector('html')
          .classList.add('dark')
    }
    else {
        document.querySelector('html')
          .classList.remove('dark')
        document.querySelector('html')
          .classList.add('light')
    }
    mode.value = (
      document.querySelector('html')
        .classList.contains('dark')) 
        ? 'light-theme' 
        : 'dark-theme'
}