Библиотека компонентов 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'
}