tw colors
1.0.0
Tailwind 앱을위한 최고의 게임 체인저를 소개하십시오! 어두운 변형과 지저분한 CSS 변수에 작별 인사를하십시오. 이 Tailwind 플러그인을 사용하면 색상 테마간에 전환하는 것이 하나의 클래스 이름을 변경하는 것만 큼 쉽습니다.
확장 가능 하고 원하는만큼 테마와 색상을 추가하십시오. 사용할 수있는 테마 수와 색상에는 제한이 없습니다.
Flexible , 자신을 색상으로 제한하지 말고 CSS 속성을 테마할 수있는 내장 변형 으로
입양하기 쉽고 마크 업을 변경할 필요가 없습니다.
중첩 테마는 복잡한 사용 사례를 위해 지원됩니다
Full Tailwind CSS Intellisense 지원
여기에서 전체 변경 사항을 참조하십시오
NPM I -D TW -COLORS
기존 테일 윈드 구성을 가져 와서 createThemes 플러그인의 색상을 이동하여 이름 (예 : Light)을 제공하십시오.
Tailwind.config.js
+ const {createTheMes} = 요구 ( 'tw-colors');
module.exports = {
내용 : [ './src/**/*. {Arastro,Html,JS, JSX,MD,Mdx,Svelte,TSX,VUE}'],
주제: {
확장 : {- 색상 : {- '기본': 'steelblue',- 'secondary': 'darkblue',- 'brand': '#f3f3f3',- // ... 기타 색상-}},
},
플러그인 : [+ CreateTheMes ({+ light : {+ '기본': 'steelblue',+ 'secondary': '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-secondary'> ... </p>
</div>
...
</html>그게 다야, 당신의 사이트에는 가벼운 테마가 있습니다!
Tailwind.config.js
const {createTheMes} = 요구 ( 'tw-colors');
module.exports = {
내용 : [ './src/**/*. {Arastro,Html,JS, JSX,MD,Mdx,Svelte,TSX,VUE}'],
플러그인 : [
CreateThemes ({
빛: {
'기본': '스틸 블루',
'2 차': 'Darkblue',
'브랜드': '#f3f3f3',
},+ dark : {+ 'primary': 'turquoise',+ 'sec ,+ 'sec RGB (120 210 50) ',+'브랜드 ':'HSL (54 93% 96%) ',+},})
],,
};당신은 이제 빛 , 어둡고 숲 주제가 있습니다!
클래스 또는 데이터 테마 속성을 전환하기 만하면됩니다
- <html class = 'light'>+ <html class = 'dark'> ... </html>
현재 테마를 기반으로 변형을 사용하여 특정 스타일을 적용 할 수 있습니다.
참고 : 다음 예에서는 변형이 data-theme='light' 에 영향을 미치지 않습니다.
<!-어두운 테마에만 "세리프"글꼴을 사용하십시오-> <div data-theme = 'dark'class = 'font-sans dark : font-serif'> ... <div> serif font here </div> <!-테마가`dark '일 때 반올림됩니다. -> <button class = 'dark : rounded'> me </button>을 클릭하십시오 </div>
변형 이름을 사용자 정의하는 옵션을 참조하십시오
<html class = 'temblic-dark'> ... <div class = 'group'> <div class = '테마-어두운 : 그룹-호버 : bg-red-500'> 그룹 변형이 작동하지 않습니다 </div > <div class = 'Group-Hover : Theme-Dark : BG-Red-500'> ✅ 그룹 변형이 제대로 작동합니다 </div> </div>
</html>그냥 테마를 둥지 ...
<html data-teme = 'dark'>
...
<div data-theme = 'winter'>
...
</div>
<div data-theme = 'forest'>
...
</div>
</html> 중첩 테마에서 변형이 올바르게 작동하려면 중첩 테마 class 와 함께 빈 data-theme 속성을 추가해야합니다.
<html class = 'dark'>
...
<div data-tetme class = 'Winter'>
...
</div>
<div data-tetme class = 'forest'>
...
</div>
</html>경고 :
이 설정을 사용하면 "부모"테마의 기본 색상에 정의 된 0.8 불투명도는 "Child"테마의 기본 색상에 의해 상속됩니다.
CreateThemes ({
부모 : {
'1 차': 'HSL (50 50% 50% / 0.8)', // 이렇게하지 마십시오. 기본 불투명도는 어린이 테마 'Secondary': 'DarkBlue', 'DarkBlue', 전파됩니다.
},
어린이: {
'1 차': '청록색', '2 차': '토마토',
},}) <html data- 테마 = '부모'>
<div data-theme = 'child'> <!-기본 색상은 예상치 못한 0.8 불투명도를 가지고 있습니다-> <button class = 'bg-primary'> 클릭 me </button>
... </div> </html>상속 된 특성 (예 : "Font-Family")은 중첩 테마를 포함한 모든 후손 에 의해 상속됩니다. 전파를 중지하기 위해 기본 스타일은 중첩 테마에서 재고해야합니다.
예상치 못한 행동
<html class = '테마-어두운 글꼴-사산 테마-어두운 : font-serif'> ... <div> serif가 활성화되어 있습니다 </div> <div class = "Theme-light"> serif가 여전히 활성화되어 있습니다. 부모 테마에서 물려 받았습니다 </div>
</html>✅ 예상대로 작동합니다
<html class = '테마-어두운 글꼴-사산 테마-어두운 : font-serif'> ... <div> serif는 활성화되어 </div> <div class = "테마 라이트 글꼴 -Sans 테마-어두운 : 글꼴 -serif "> if Sans가 활성화되어 있습니다 </div>
</html> createThemes 또한 light dark 기능을 노출시키는 함수를 수용합니다.
color-scheme CSS 속성을 적용하려면 테마를 light 거나 dark 으로 감싸십시오. "
이 기능에 대한 자세한 내용은 MDN 문서를 참조하십시오.
Tailwind.config.js
CreateTheMes (({{drigh, dark}) => ({{
'겨울': 빛 ({
'기본': 'steelblue', 'base': 'darkblue', 'surface': '#f3f3f3',
}),
'숲': 어두운 ({
'1 차': '청록색', '베이스': '토마토', '표면': '#4a4a4a',
}),})) tw-colors는 기본적으로 형식 --twc-[color name] 사용하여 CSS 변수를 생성합니다. 기본적으로 HSL 값을 포함합니다.
예를 들어, 다음 구성을 사용하면 변수 --twc-primary , --twc-base , --twc-surface 생성됩니다.
Tailwind.config.js
module.exports = {// ... Tailwind 구성 플러그인 : [CreateTheMes ({ 'winter': {
'기본': 'steelblue', 'base': 'darkblue', 'surface': '#f3f3f3',}, 'forest': {{
'1 차': '청록색', '베이스': '토마토', '표면': '#4a4a4a',},})],
};예제 사용 :
.my-class {color : hsl (var (-twc-primary)); 배경 : HSL (VAR (-WC-PRIMARY) / 0.5);
}CSS 변수를 사용자 정의하는 옵션을 참조하십시오
옵션은 플러그인의 두 번째 인수로 전달 될 수 있습니다.
CreateThemes ({
// 여기에서 색상 구성 ...}, {
ProduceCsSvariable : (Colorname) =>`-twc-$ {colorname}`,
producethemeclass : (themename) =>`테마-$ {themename}`
ProducetheMevariant : (Themename) =>`테마-$ {themename}`
Defaulttheme : 'light'
엄격 : 거짓})사용할 기본 테마는 테마가 선언되지 않았을 때 폴백 테마로 생각하십시오.
예 : 간단한 기본 테마
CreateThemes ({
'겨울': {
'기본': '스틸 블루',
},
'할로윈': {
'기본': '크림슨',
},}, {
DefaultTheme : '겨울'// '겨울'| '할로윈'}))기본 테마는 사용자 라이트 또는 어두운 선호도에 따라 선택할 수도 있습니다 (MDN 참조 색상 스키 밍)
예 : 사용자 선호도에 적응
CreateThemes ({
'겨울': {
'기본': '스틸 블루',
},
'할로윈': {
'기본': '크림슨',
},}, {
DefaultTheme : { / ** *`@Media (Prefers Color-Scheme : Light)``일치 할 때 * 기본 테마는 "겨울"테마 * / light : 'winter',
/ ** *`@Media (Prefers Color-Scheme : Dark)``일치 할 때, * 기본 테마는 "할로윈"테마 */ Dark : 'Halloween',
}}) 기본값 : false
false 유효하지 않은 색상이 무시되는 경우.
true 유효하지 않은 색상이 오류가 발생하면 오류가 발생합니다.
예
CreateThemes ({
'크리스마스': {
// 잘못된 색상 '기본': 'Redish',
},
'Darkula': {
'기본': '크림슨',
},}, {
// 오류가 발생합니다
엄격한 : true}) 기본값 : (colorName) => `--twc-${colorName}`
플러그인에서 생성 된 CSS 변수를 사용자 정의하십시오.
아래 구성을 사용하면 다음 변수가 생성됩니다.
--a-primary-z ( TWC 대신)
--a-secondary-z ( Twc-Secondary 대신)
--a-base-z ( TWC- 기본 대신)
CreateThemes ({
'빛': {
'기본': 'steelblue', 'secondary': 'darkblue', 'base': '#f3f3f3',
},
'어두운': {
'1 차': '청록색', '보조': '토마토', '베이스': '#4a4a4a',
},}, {
ProduceCsSvariable : (Colorname) =>`-a-$ {colorname} -z`}) 기본값 : (themeName) => themeName
테마와 변형의 클래스 이름을 사용자 정의하십시오
아래 구성을 사용하면 다음 테마 클래스 이름 및 변형이 작성됩니다.
theme-light ( 빛 대신)
theme-dark ( 어두운 대신)
CreateThemes ({
'빛': {
'기본': 'steelblue', 'secondary': 'darkblue', 'base': '#f3f3f3',
},
'어두운': {
'1 차': '청록색', '보조': '토마토', '베이스': '#4a4a4a',
},}, {
producethemeclass : (themename) =>`테마-$ {themename}`})<html class = 'Theme-Dark'> ... <button class = '테마-어두운 : rounded'> Me </button>을 클릭하십시오 ... </html>
기본값 : produceThemeClass 와 동일합니다
변형을 사용자 정의합니다
아래 구성을 사용하면 다음 변형이 생성됩니다.
theme-light ( 빛 대신)
theme-dark ( 어두운 대신)
CreateThemes ({
'빛': {
'기본': 'steelblue', 'secondary': 'darkblue', 'base': '#f3f3f3',
},
'어두운': {
'1 차': '청록색', '보조': '토마토', '베이스': '#4a4a4a',
},}, {
ProducetheMevariant : (Themename) =>`테마-$ {themename}`}))<html data-teme = 'dark'> ... <button class = '테마-어두운 : rounded'> Me </button>을 클릭하십시오 ... </html>
UPPCHET : Snescile Default가있는 Fetch API 용 작은 1KB 구성 도구
공유하십시오
