КРЕАТИВНЫЕ САЙТЫ И ПРИЛОЖЕНИЯ,
КАЧЕСТВЕННЫЕ WEB-УСЛУГИ
phone

Component SW

UI компоненты с поддержкой светлой и темной системной темы

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