tw colors
1.0.0
Представляем Ultimate Schanger для вашего приложения Tailwind! Попрощайтесь с загроможденными темными вариантами и грязными переменными CSS. С помощью этого плагина с ветром переключение между цветными темами так же легко, как и изменение одного класса.
Масштабируем , добавьте столько тем и цветов, сколько захотите. Нет ограничения на количество тем и цвета, которые вы можете использовать
Гибкий , не ограничивайте себя цветами, со встроенными вариантами вы можете принять участие в любом свойстве CSS
Легко усыновить , не нужно менять наценку, она просто работает!
Вложенные темы поддерживаются для сложных вариантов использования
Полная поддержка CSS CSS Intellisense
Смотрите здесь полную изменение
npm i -d Twolors
Возьмите существующую конфигурацию и перемещайте цвета в плагине createThemes , давая ему имя (например, свет).
Tailwind.config.js
+ const {createThemes} = require ('twolors');
module.exports = {
Содержание: ['./src/**/*. {itro,html,js,jsx,md,mdx,svelte,ts,ts, vue}'],
тема: {
extends: {- colors: {- 'primary': 'lelectblue',- 'вторичный': 'Darkblue',- 'Brand': '#f3f3f3',- // ... другие цвета-}},
},
Плагины: [+ createThemes ({+ Light: {+ 'Primary': 'lelectBlue',+ 'вторичный': 'DarkBlue',+ 'Brand': '#f3f3f3',+ // ... другие цвета+}+} )],
};Совет: вы можете использовать любое имя цвета, как обычно, а не только те из примера. То же самое относится и к именам тем.
Примените class='light' или data-theme='light' в любом месте вашего приложения (HTML или тег тела-хорошее место для него)
См. Параметры для настройки класса
- <html>+ <html class = 'light'> ...
<div class = 'bg-brand'>
<h1 class = 'text-primary'> ... </h1>
<p class = 'text-secondator'> ... </p>
</div>
...
</html>Вот и все, на вашем сайте есть легкая тема!
Tailwind.config.js
const {createThemes} = require ('twolors');
module.exports = {
Содержание: ['./src/**/*. {itro,html,js,jsx,md,mdx,svelte,ts,ts, vue}'],
плагины: [
CreateThemes ({
свет: {
«Первичный»: 'SteelBlue',
«второстепенный»: 'Darkblue',
'brand': '#f3f3f3',
},+ Dark: {+ 'primary': 'turquoise',+ 'вторичный': 'томат',+ 'brand': '#4a4a4a',+},+ forest: {+ 'primary': '#2a9d8f' ,+ 'Secondary': '#e9c46a',+ 'Brand': '#264653',+},+ зима: {+ 'primary': 'hsl (45 39% 69%)',+ 'вторичный': ' RGB (120 210 50) ',+' Brand ':' HSL (54 93% 96%) ',+},})
],
};Теперь у вас есть свет , темная и лесная тема!
Просто переключите класс или атрибут Data-Theme
- <html class = 'light'>+ <html class = 'Dark'> ... </html>
Основываясь на текущей теме, конкретные стили могут применяться с использованием вариантов.
ПРИМЕЧАНИЕ. В следующем примере варианты не окажут никакого влияния с data-theme='light'
<!-Используйте шрифт "Serif" только для темной темы-> <div Data-theMe = 'Dark' class = 'font-sans Dark: font-serif'> ... <viv> Serif Font здесь </div> <!-Эта кнопка округлена, когда тема `Dark` -> <Button Class = 'Dark: Rounded'> Нажмите меня </button> </div>
См. Параметры для настройки имени варианта
<html class = 'theme-dark'> ... <div class = 'group'> <div class = 'theme-dark: group-hover: bg-red-500'> вариант группы не работает </div > <div class = 'Групповое господство: тематическая тема: BG-RED-500'> ✅ Вариант группы работает должным образом </div> </div>
</html>Просто гнездитесь на темы ...
<html data-theme = 'Dark'>
...
<div Data-theme = 'inter'>
...
</div>
<div Data-theme = 'forest'>
...
</div>
</html> Чтобы варианты работали должным образом в вложенные темы, пустой атрибут data-theme должен быть добавлен вместе с вложенным class темы
<html class = 'Dark'>
...
<div data-theme class = 'inter'>
...
</div>
<div data-theme class = 'forest'>
...
</div>
</html>Предостережения:
С этой настройкой 0,8 непрозрачность, определенная на основном цвете темы «родитель», будет унаследована основным цветом темы «ребенка».
CreateThemes ({
родитель: {
«Первичный»: «HSL (50 50% 50% / 0,8)», // Не делайте этого, непрозрачность по умолчанию распространяется на детскую тему «вторичный»: «DarkBlue»,
},
ребенок: {
«Первичный»: «бирюзовый», «второстепенный»: «Томат»,
},}) <html data-theme = 'parent'>
<div Data-theme = 'gild'> <!-основной цвет имеет неожиданную 0,8 непрозрачность-> <button class = 'bg-primary'> нажмите меня </button>
... </div> </html>Унаследованные свойства (например, «семейная семья») унаследованы всеми потомками , включая вложенные темы. Чтобы остановить распространение, базовые стили должны быть переосмыслены по вложенным темам
Неожиданное поведение
<html class = 'theme-dark font-sans theme-dark: font-serif'> ... <viv> ✅ Serif активен </div> <div class = "theme-light"> Serif все еще активен, это унаследовал от родительской темы </div>
</html>✅ Работает, как и ожидалось
<html class = 'theme-dark font-sans theme-dark: font-serif'> ... <viv> ✅ Serif Active </div> <div class = "Light-Light Font-Sans Theme-Dark: Font -serif "> ✅ Sans активен </div>
</html> createThemes также принимает функцию, которая выявляет light и dark функции.
Чтобы применить свойство color-scheme CSS, просто оберните тему light или dark ».
Смотрите документы MDN для получения более подробной информации об этой функции.
Tailwind.config.js
CreateThemes (({Light, Dark}) => ({
«Зима»: свет ({
'Primary': 'Steelblue', 'base': 'Darkblue', 'Surface': '#f3f3f3',
}),
'Forest': Dark ({
«Первичный»: «бирюзовый», «база»: «томатный», «поверхность»: '#4A4A4A',
}),}))) Twolors создает переменные CSS, используя формат --twc-[color name] По умолчанию они содержат значения HSL.
Например, со следующей конфигурацией будут созданы переменные- --twc-primary , --twc-base , --twc-surface .
Tailwind.config.js
module.exports = {// ... ваши плагины с конфигурацией свода: [createThemes ({'inter': {
«Первичный»: 'Steelblue', 'Base': 'DarkBlue', 'Surface': '#f3f3f3',}, 'forest': {
'Primary': 'бирюза', 'base': 'tomato', 'surface': '#4a4a4a',},})],
};Пример использования:
.my-class {color: hsl (var (-twc-primary)); Фон: HSL (var (-twc-primary) / 0,5);
}См. Параметры для настройки переменных CSS
Варианты могут быть переданы как второй аргумент в плагин
CreateThemes ({
// Ваша конфигурация цвета здесь ...}, {
Производственная служба: (colorname) => `-twc-$ {colorname}`,
Производствоэмэкульса: (ThemeName) => `Тема-$ {ThemeName}`
ProducteMevariant: (ThemeName) => `Theme-$ {ThemeName}`
DefaultTheme: 'Light'
строго: ложь})Тема по умолчанию для использования, подумайте об этом как о запасной теме, когда не будет объявлена ни одна тема.
Пример: простая тема по умолчанию
CreateThemes ({
'зима': {
«Первичный»: 'SteelBlue',
},
'Хэллоуин': {
«Первоначальный»: «Багро»,
},}, {
DefaultTheme: «Зима» // «Зима» | 'Хэллоуин'})Тема по умолчанию также может быть выбрана в соответствии с пользовательским светом или темным предпочтением (см. MDN предпочитает цветовую схему)
Пример: адаптировать к предпочтению пользователя
CreateThemes ({
'зима': {
«Первичный»: 'SteelBlue',
},
'Хэллоуин': {
«Первоначальный»: «Багро»,
},}, {
DefaultTheme: { / ** * Когда `@Media (предпочитает-то-схема: свет)` подходит, * тема по умолчанию-«Зима» тема * / свет: «Зима»,
/ ** * Когда `@Media (предпочитает цветовую схему: темный)` сопоставлена, * тема по умолчанию-тема «Хэллоуин» */ Dark: 'Хэллоуин',
}}) по умолчанию : false
Если false неверные цвета игнорируются.
Если true неверные цвета создают ошибку.
Пример
CreateThemes ({
«Рождество»: {
// недействительный цвет «первичный»: «Redish»,
},
'Darkula': {
«Первоначальный»: «Багро»,
},}, {
// будет брошена ошибка
строго: true}) по умолчанию : (colorName) => `--twc-${colorName}`
Настройте переменные CSS, сгенерированные плагином.
С приведенной ниже конфигурацией будут созданы следующие переменные:
--a-primary-z (вместо TWC-Primary )
--a-secondary-z (вместо второго TWC )
--a-base-z (вместо TWC-базы )
CreateThemes ({
'свет': {
'Primary': 'Steelblue', 'Secondary': 'Darkblue', 'Base': '#f3f3f3',
},
'темный': {
'Primary': 'Burquoise', 'Secondary': 'tomato', 'base': '#4a4a4a',
},}, {
Производственная служба: (colorname) => `--а-$ {colorname} -z`}) по умолчанию : (themeName) => themeName
Настройте классные имена тем и вариантов
С приведенной ниже конфигурацией будут созданы следующие классы и варианты темы:
theme-light (вместо света )
theme-dark (вместо темного )
CreateThemes ({
'свет': {
'Primary': 'Steelblue', 'Secondary': 'Darkblue', 'Base': '#f3f3f3',
},
'темный': {
'Primary': 'Burquoise', 'Secondary': 'tomato', 'base': '#4a4a4a',
},}, {
Производствоэмэкульса: (ThemeName) => `Тема-$ {ThemeName}`})<html class = 'theme-dark'> ... <Button Class = 'Theme-Dark: Rounded'> Нажмите меня </button> ... </html>
по умолчанию : то же самое, что и produceThemeClass
Настройте варианты
С приведенной ниже конфигурацией будут созданы следующие варианты:
theme-light (вместо света )
theme-dark (вместо темного )
CreateThemes ({
'свет': {
'Primary': 'Steelblue', 'Secondary': 'Darkblue', 'Base': '#f3f3f3',
},
'темный': {
'Primary': 'Burquoise', 'Secondary': 'tomato', 'base': '#4a4a4a',
},}, {
ProducteMevariant: (ThemeName) => `Theme-$ {ThemeName}`})<html data-theme = 'Dark'> ... <Button Class = 'Theme-Dark: Rounded'> Нажмите меня </button> ... </html>
Впрышн: крошечный инструмент конфигурации 1 кб для API Fetch с разумным по умолчанию
Пожалуйста, поделитесь
