หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

สีสองสี

แนะนำตัวเปลี่ยนเกมที่ดีที่สุดสำหรับแอพ Tailwind ของคุณ! กล่าวคำอำลากับตัวแปรมืดที่รกและตัวแปร CSS ที่ยุ่งเหยิง ด้วยปลั๊กอิน tailwind นี้การสลับระหว่างธีมสีนั้นง่ายพอ ๆ กับการเปลี่ยนชื่อคลาสหนึ่ง

ไฮไลท์

  • ปรับขนาดได้ เพิ่มธีมและสีให้มากที่สุดเท่าที่คุณต้องการ ไม่มีการ จำกัด จำนวนชุดรูปแบบและสีที่คุณสามารถใช้ได้

  • ยืดหยุ่น อย่า จำกัด ตัวเองเป็นสีด้วย ตัวแปร ในตัวคุณสามารถธีมคุณสมบัติ CSS ใด ๆ

  • ง่ายที่จะนำมาใช้ ไม่จำเป็นต้องเปลี่ยนมาร์กอัปของคุณมันใช้งานได้!

  • ชุดรูปแบบซ้อน ได้รับการสนับสนุนสำหรับกรณีการใช้งานที่ซับซ้อน

  • Full Tailwind CSS Intellisense Support

การเปลี่ยนแปลง

ดูการเปลี่ยนแปลงเต็มรูปแบบที่นี่

การใช้งาน

 npm i -d tw two

ใช้การกำหนดค่า tailwind ที่มีอยู่และย้ายสีในปลั๊กอิน createThemes ให้ชื่อ (เช่นแสง)

tailwind.config.js

 + const {createthemes} = ต้องการ ('tw-colors');

   module.exports = {
      เนื้อหา: ['./src/**/*. {aastro,html,js,jsx,md, mdx,svelte,TSSX,VUE}']
      ธีม: {
         ขยาย: {- สี: {- 'primary': 'SteelBlue',- 'Secondary': 'DarkBlue',- 'Brand': '#f3f3f3',- // ... สีอื่น ๆ-}},
      -
      ปลั๊กอิน: [+ createThemes ({+ แสง: {+ 'primary': 'SteelBlue',+ 'secondary': 'DarkBlue',+ 'Brand': '#F3F3F3',+ // ... สีอื่น ๆ+}+} )],
   -

เคล็ดลับ: คุณสามารถใช้ชื่อสีใด ๆ ตามปกติไม่ใช่แค่ชื่อจากตัวอย่าง เช่นเดียวกันกับชื่อธีม

ใช้ class='light' หรือ data-theme='light' ที่ใดก็ได้ในแอพของคุณ (HTML หรือแท็กตัวถังเป็นจุดที่ดีสำหรับมัน)

ดูตัวเลือกเพื่อปรับแต่งชื่อคลาส

 - <html>+ <html class = 'light'> ...
      <div class = 'bg-brand'>
         <h1 class = 'ข้อความหลัก'> ... </h1>
         <p class = 'secondary'> ... </p>
      </div>
      -
   </html>

นั่นคือเว็บไซต์ของคุณมีธีม เบา ๆ !

การเพิ่มธีมเพิ่มเติม

tailwind.config.js

   const {createthemes} = ต้องการ ('tw-colors');

   module.exports = {
      เนื้อหา: ['./src/**/*. {aastro,html,js,jsx,md, mdx,svelte,TSSX,VUE}']
      ปลั๊กอิน: [
         Createthemes ({
            แสงสว่าง: {
                'หลัก': 'SteelBlue',
               'รอง': 'DarkBlue',
               'แบรนด์': '#f3f3f3'
            },+ Dark: {+ 'Primary': 'Turquoise',+ 'Secondary': 'Tomato',+ 'Brand': '#4a4a4a',+},+ Forest: {+ 'primary': '#2a9d8f' ,+ 'รอง': '#e9c46a',+ 'แบรนด์': '#264653',+},+ ฤดูหนาว: {+ 'หลัก': 'HSL (45 39% 69%)',+ 'รอง': ' RGB (120 210 50) ',+' Brand ':' HSL (54 93% 96%) ',+},})
      -
   -

ตอนนี้คุณมีธีม แสง มืด และ ป่า !

เปลี่ยนธีม

เพียงสลับ คลาส หรือ แอตทริบิวต์ข้อมูลข้อมูล

 - <html class = 'light'>+ <html class = 'dark'> ...
   </html>

สายพันธุ์

ขึ้นอยู่กับธีมปัจจุบันรูปแบบเฉพาะสามารถนำไปใช้โดยใช้ตัวแปร

หมายเหตุ: ในตัวอย่างต่อไปนี้ตัวแปรจะไม่มีผลกับ data-theme='light'

   <!-ใช้ตัวอักษร "serif" สำหรับธีมมืดเท่านั้น->
   <div data-theme = 'dark' class = 'font-sans dark: font-serif'> ... <div> serif font ที่นี่ </div> <!-ปุ่มนี้ถูกปัดเศษเมื่อธีมคือ `Dark ' -> <button class = 'Dark: Rounded'> คลิกฉัน </putton>
   </div>

ดูตัวเลือกเพื่อปรับแต่งชื่อตัวแปร

Caveat: Group- {Modifier} ใช้ตัวแปรกลุ่มเสมอก่อนตัวแปรธีม
   <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 = 'winter'>
         -
      </div>

      <div data-theme = 'forest'>
         -
      </div>
   </html>

กับ ชั้นเรียน

สำหรับตัวแปรในการทำงานอย่างถูกต้องในธีมซ้อนกันต้องมีการเพิ่ม class data-theme ที่ว่าง

   <html class = 'dark'>
      -
      <div data-theme class = 'winter'>
         -
      </div>

      <div data-theme class = 'forest'>
         -
      </div>
   </html>

ข้อแม้:

อย่าตั้งค่าความทึบในนิยามสี เมื่อใช้ธีมซ้อนกันจะเป็นการดีกว่าที่จะไม่ให้ความทึบพื้นฐานในคำจำกัดความสีของคุณ

ด้วยการตั้งค่านี้ความทึบ 0.8 ที่กำหนดไว้ในสีหลักของธีม "ผู้ปกครอง" จะได้รับการสืบทอดโดยสีหลักของ "เด็ก"

 Createthemes ({
   พ่อแม่: {
       'หลัก': 'HSL (50 50% 50% / 0.8)', // อย่าทำเช่นนี้ความทึบเริ่มต้นจะเผยแพร่ไปยังธีมลูก 'รอง': 'DarkBlue'
   -
   เด็ก: {
       'Primary': 'Turquoise', 'Secondary': 'Tomato',
   -
 <html data-theme = 'parent'>

   <div data-theme = 'child'> <!-สีหลักมีความทึบ 0.8 ที่ไม่คาดคิด-> <button class = 'bg-primary'> คลิกฉัน </button>
      ... </div> </html>
คุณสมบัติที่สืบทอดมา

คุณสมบัติที่สืบทอดมา (เช่น "font-family") ได้รับการสืบทอดโดย ลูกหลานทั้งหมด รวมถึงธีมซ้อนกัน เพื่อที่จะหยุดการแพร่กระจายรูปแบบพื้นฐานควรได้รับการประกาศอีกครั้งในธีมซ้อนกัน

พฤติกรรมที่ไม่คาดคิด

   <html class = 'Theme-Dark Font-Sans Theme-Dark: font-serif'> ... <div> ✅ serif มีการใช้งาน </div> <div class = "Theme-Light"> Serif ยังคงใช้งานอยู่ ได้รับการสืบทอดจากธีมหลัก </div>
        </html>

✅ทำงานตามที่คาดไว้

   <html class = 'Theme-Dark Font-Sans Theme-Dark: font-serif'> ... <div> ✅ serif active </div> <div class = "ธีม-ไฟ-sans ธีม-ดาร์ก: ฟอนต์ -serif "> ✅ sans ใช้งาน </div>
      </html>

CSS Color-Scheme

createThemes ยังยอมรับฟังก์ชั่นที่เปิดเผยฟังก์ชั่น light และ dark
ในการใช้คุณสมบัติ CSS color-scheme เพียงแค่ห่อธีมด้วย light หรือ dark "

ดูเอกสาร MDN สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับคุณสมบัตินี้

tailwind.config.js

 CreateTheMes (({Light, Dark}) => ({
   'ฤดูหนาว': แสง ({
       'Primary': 'SteelBlue', 'Base': 'DarkBlue', 'Surface': '#F3F3F3',
   -
   'ป่า': มืด ({
       'Primary': 'Turquoise', 'Base': 'Tomato', 'Surface': '#4a4a4a',
   -

ตัวแปร CSS

TW-COLORS สร้างตัวแปร CSS โดยใช้รูปแบบ --twc-[color name] โดยค่าเริ่มต้นพวกเขามีค่า HSL

ตัวอย่างเช่นด้วยการกำหนดค่าต่อไปนี้ตัวแปร --twc-primary , --twc-base , --twc-surface จะถูกสร้างขึ้น

tailwind.config.js

   module.exports = {// ... ปลั๊กอิน config tailwind ของคุณ: [createThemes ({'ฤดูหนาว': {
                'Primary': 'SteelBlue', 'Base': 'DarkBlue', 'Surface': '#F3F3F3',}, 'Forest': {
                'Primary': 'Turquoise', 'Base': 'Tomato', 'Surface': '#4a4a4a',},})],
   -

ตัวอย่างการใช้งาน:

 .my-class {color: hsl (var (-twc-primary));   ความเป็นมา: HSL (var (-twc-primary) / 0.5);
-

ดูตัวเลือกในการปรับแต่งตัวแปร CSS

ตัวเลือก

ตัวเลือกสามารถส่งผ่านเป็นอาร์กิวเมนต์ที่สองไปยังปลั๊กอิน

 Createthemes ({
   // สีของคุณกำหนดค่าที่นี่ ... }, {
   Productssvariable: (colorname) => `-twc-$ {colorname}`,,,,
   Producthemeclass: (themename) => `ธีม-$ {themename}`
   ProducteTheMevariant: (themename) => `ธีม-$ {themename}`
   DefaultTheme: 'Light'
   เข้มงวด: เท็จ})

defaulttheme

ชุดรูปแบบเริ่มต้นที่จะใช้คิดว่ามันเป็นธีมทางเลือกเมื่อไม่มีการประกาศธีม

ตัวอย่าง: ธีมเริ่มต้นง่ายๆ

 Createthemes ({
   'ฤดูหนาว': {
       'หลัก': 'SteelBlue',
   -
   'ฮาโลวีน': {
       'หลัก': 'สีแดงเข้ม',
   -
   DefaultTheme: 'Winter' // 'Winter' | 'Halloween'})

ชุดรูปแบบเริ่มต้นยังสามารถเลือกได้ตาม แสง ของผู้ใช้หรือการตั้งค่า มืด (ดู MDN prefers-color-scheme)

ตัวอย่าง: การปรับให้เข้ากับการตั้งค่าของผู้ใช้

 Createthemes ({
   'ฤดูหนาว': {
       'หลัก': 'SteelBlue',
   -
   'ฮาโลวีน': {
       'ปฐมภูมิ': 'สีแดงเข้ม',
   -
   DefaultTheme: { / ** * เมื่อ `@media (prefers-color-scheme: Light)` ตรงกับ * ธีมเริ่มต้นคือธีม "ฤดูหนาว" * / Light: 'Winter'
       / ** * เมื่อ `@media (prefers-color-scheme: Dark)` ตรงกับ * ธีมเริ่มต้นคือธีม "Halloween" */ Dark: 'Halloween'
    -

เข้มงวด

ค่าเริ่มต้น : false

หากสีที่ไม่ถูกต้องผิด false ถูกละเว้น
หากสีที่ไม่ถูกต้อง true สร้างข้อผิดพลาด

ตัวอย่าง

 Createthemes ({
   'คริสต์มาส': {
       // สีที่ไม่ถูกต้อง 'หลัก': 'Redish'
   -
   'Darkula': {
       'ปฐมภูมิ': 'สีแดงเข้ม',
   -
   // ข้อผิดพลาดจะถูกโยนทิ้ง
   เข้มงวด: จริง})

Producecssvariable

ค่าเริ่มต้น : (colorName) => `--twc-${colorName}`

ปรับแต่งตัวแปร CSS ที่สร้างขึ้นโดยปลั๊กอิน

ด้วยการกำหนดค่าด้านล่างตัวแปรต่อไปนี้จะถูกสร้างขึ้น:

  • --a-primary-z (แทนที่จะเป็น TWC-Primary )

  • --a-secondary-z (แทนที่จะเป็น TWC-Secondary )

  • --a-base-z (แทน twc-base )

 Createthemes ({
   'แสงสว่าง': {
       'Primary': 'SteelBlue', 'Secondary': 'DarkBlue', 'Base': '#F3F3F3',
   -
   'มืด': {
       'Primary': 'Turquoise', 'Secondary': 'Tomato', 'Base': '#4a4a4a',
   -
   Productssvariable: (colorname) => `-a-$ {colorname} -z`})

ผลิต

ค่าเริ่มต้น : (themeName) => themeName

ปรับแต่งชื่อคลาสของธีมและตัวแปร

ด้วยการกำหนดค่าด้านล่างชื่อคลาสธีมและตัวแปรต่อไปนี้จะถูกสร้างขึ้น:

  • theme-light (แทนที่จะเป็น แสง )

  • theme-dark (แทนที่จะเป็น ความมืด )

 Createthemes ({
   'แสงสว่าง': {
       'Primary': 'SteelBlue', 'Secondary': 'DarkBlue', 'Base': '#F3F3F3',
   -
   'มืด': {
       'Primary': 'Turquoise', 'Secondary': 'Tomato', 'Base': '#4a4a4a',
   -
   Producthemeclass: (themename) => `ธีม-$ {themename}`})
 <html class = 'Theme-Dark'>
   ... <button class = 'Theme-Dark: Rounded'> คลิก Me </button>
   ... </html>

ผลิต

ค่าเริ่มต้น : เหมือนกับ produceThemeClass

ปรับแต่งตัวแปร

ด้วยการกำหนดค่าด้านล่างตัวแปรต่อไปนี้จะถูกสร้างขึ้น:

  • theme-light (แทนที่จะเป็น แสง )

  • theme-dark (แทนที่จะเป็น ความมืด )

 Createthemes ({
   'แสงสว่าง': {
       'Primary': 'SteelBlue', 'Secondary': 'DarkBlue', 'Base': '#F3F3F3',
   -
   'มืด': {
       'Primary': 'Turquoise', 'Secondary': 'Tomato', 'Base': '#4a4a4a',
   -
   ProducthemeVariant: (themename) => `ธีม-$ {themename}`})
 <html data-theme = 'dark'>
   ... <button class = 'Theme-Dark: Rounded'> คลิก Me </button>
   ... </html>

จากผู้เขียนคนเดียวกัน

UP-FETCH: เครื่องมือกำหนดค่า 1KB เล็ก ๆ สำหรับ FETCH API พร้อมค่าเริ่มต้นที่สมเหตุสมผล

กรุณาแบ่งปัน

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด