Темизация
CapsuleUI полностью поддерживает настройку внешнего вида через CSS‑переменные. Все основные переменные описаны в файле @capsule/global.css (папка @capsule), а у каждого компонента уже есть свой CSS‑файл, например, @capsule/components/capsule-button/capsule-button.style.css.
Переменные CapsuleUI
В файле @capsule/global.css определены цвета, радиусы, тени и прочее — для светлой и тёмной темы через функцию light-dark.
css
:root {
--capsule-color-primary: light-dark(#2563eb, #3b82f6);
--capsule-color-error: light-dark(#dc2626, #ef4444);
/* ... */
}
:root.light {
color-scheme: light;
}
:root.dark {
color-scheme: dark;
}Как менять тему
- Меняйте переменные через
:root {}или в своём CSS. - Переключайте тему с помощью
.lightили.darkна<html>/<body>. - Настраивайте отдельные параметры (радиусы, цвета и т.п.).
Как кастомизировать компонент
Каждый компонент CapsuleUI уже включает свой файл стилей, который подключается автоматически. Чтобы поменять стили только у одного компонента — просто переопределите переменные или добавьте нужные CSS-правила у себя:
css
capsule-button {
/* свои переменные или стили */
}