Unduh tw colors - Unduh Kode Sumber tw colors

tw colors

Kode sumber lainnya

1.0.0

Unduh

dua warna

Memperkenalkan game-changer terbaik untuk aplikasi Tailwind Anda! Ucapkan selamat tinggal pada varian gelap yang berantakan dan variabel CSS yang berantakan. Dengan plugin tailwind ini, beralih di antara tema warna sama mudahnya dengan mengubah satu nama kelas.

Highlight

Dapat diskalakan , tambahkan sebanyak mungkin tema dan warna yang Anda inginkan. Tidak ada batasan jumlah tema dan warna yang dapat Anda gunakan
Fleksibel , jangan batasi diri Anda pada warna, dengan varian bawaan Anda dapat mengemai properti CSS apa pun
Mudah diadopsi , tidak perlu mengubah markup Anda, itu hanya berfungsi!
Tema bersarang didukung untuk kasus penggunaan yang kompleks
Dukungan Intellisense CSS Tailwind Penuh

Changelog

Lihat changelog lengkap di sini

Penggunaan

 npm i -d tw -wolors

Ambil konfigurasi tailwind yang ada dan pindahkan warna di plugin createThemes , memberikan nama (misalnya lampu).

tailwind.config.js

 + const {createThemes} = membutuhkan ('tw-colors');

   module.exports = {
      Konten: ['./src/**/*. {astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      Tema: {
         Extends: {- Colors: {- 'Primary': 'SteelBlue',- 'Secondary': 'DarkBlue',- 'Brand': '#f3f3f3',- // ... warna lain-}},
      },
      Plugins: [+ CreateThemes ({+ Light: {+ 'Primary': 'SteelBlue',+ 'Secondary': 'DarkBlue',+ 'Brand': '#f3f3f3',+ // ... warna lain+}+} )],
   };

Kiat: Anda dapat menggunakan nama warna apa pun seperti biasanya, bukan hanya yang dari contoh. Hal yang sama berlaku untuk nama tema.

Terapkan class='light' atau data-theme='light' di mana saja di aplikasi Anda (html atau tag tubuh adalah tempat yang baik untuk itu)

Lihat opsi untuk menyesuaikan nama kelas

 - <Html>+ <html class = 'light'> ...
      <Div class = 'bg-brand'>
         <h1 class = 'Text-primary'> ... </h1>
         <p class = 'Text-Secondary'> ... </p>
      </div>
      ...
   </html>

Itu saja, situs Anda memiliki tema ringan !

Menambahkan lebih banyak tema

tailwind.config.js

   const {createthemes} = membutuhkan ('tw-colors');

   module.exports = {
      Konten: ['./src/**/*. {astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      Plugin: [
         createThemes ({
            lampu: {
                'Primer': 'SteelBlue',
               'sekunder': 'darkblue',
               'Brand': '#f3f3f3',
            },+ gelap: {+ 'primer': 'pirquoise',+ 'sekunder': 'tomat',+ 'merek': '#4a4a4a',+},+ hutan: {+ 'primer': '#2a9d8f' ,+ 'sekunder': '#e9c46a',+ 'merek': '#264653',+},+ musim dingin: {+ 'primer': 'hsl (45 39% 69%)',+ 'sekunder': ' RGB (120 210 50) ',+' Brand ':' HSL (54 93% 96%) ',+},})
      ],
   };

Anda sekarang memiliki tema terang , gelap dan hutan !

Mengganti tema

Cukup beralih kelas atau atribut tema data

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

Varian

Berdasarkan tema saat ini, gaya spesifik dapat diterapkan menggunakan varian.

Catatan: Dalam contoh berikut varian tidak akan berpengaruh dengan data-theme='light'

   <!-Gunakan font "serif" hanya untuk tema gelap->
   <Div Data-Theme = 'Dark' Class = 'Font-Sans Dark: Font-Serif'> ... <div> Serif Font Here </Div> <!-Tombol ini dibulatkan saat temanya `Dark` -> <tombol class = 'Dark: Rounded'> klik saya </button>
   </div>

Lihat opsi untuk menyesuaikan nama varian

Caveat: Group- {Modifier}

Selalu gunakan varian grup sebelum varian tema.

   <html class = 'tema-dark'> ... <div class = 'group'> <div class = 'tema-dark: grup-hover: bg-red-500'> varian grup tidak berfungsi </div > <div class = 'group-hover: tema-dark: bg-red-500'> ✅ Varian grup berfungsi dengan baik </div> </div>
       </html>

Tema bersarang

Dengan `tema data`

Sarang saja tema ...

   <html data-theme = 'dark'>
      ...
      <Div Data-Theme = 'Winter'>
         ...
      </div>

      <Div Data-Theme = 'Forest'>
         ...
      </div>
   </html>

Dengan `kelas`

Agar varian bekerja dengan baik dalam tema bersarang, atribut data-theme kosong harus ditambahkan di samping class tema bersarang

   <html class = 'dark'>
      ...
      <Div Data-Theme Class = 'Winter'>
         ...
      </div>

      <Div Data-Theme Class = 'Forest'>
         ...
      </div>
   </html>

Peringatan:

Jangan mengatur opacity dalam definisi warna

Saat menggunakan tema bersarang, lebih baik tidak memberikan opacity dasar dalam definisi warna Anda.

Dengan pengaturan ini 0,8 opacity yang didefinisikan pada warna utama dari tema "induk" akan diwarisi oleh warna utama tema "anak".

 createThemes ({
   induk: {
       'Primer': 'HSL (50 50% 50% / 0.8)', // Jangan lakukan ini, opacity default akan menyebar ke tema anak 'sekunder': 'darkblue',
   },
   anak: {
       'primer': 'pirus', 'sekunder': 'tomat',
   },})

 <html data-theme = 'Parent'>

   <Div Data-Theme = 'Child'> <!-Warna utama memiliki 0,8 opacity yang tidak terduga-> <tombol class = 'bg-primary'> klik saya </button>
      ... </div> </html>

Properti yang diwariskan

Properti yang diwariskan (misalnya "keluarga font") diwarisi oleh semua keturunan , termasuk tema bersarang. Untuk menghentikan propagasi, gaya dasar harus ditentukan ulang pada tema bersarang

Perilaku yang tidak terduga

   <html class = 'tema-dark font-sans tema-dark-dark: font-serif'> ... <div> ✅ serif aktif </div> <div class = "tema-light"> serif masih aktif, itu Diwarisi dari tema induk </div>
        </html>

✅ bekerja seperti yang diharapkan

   <html class = 'tema-dark-font-sans tema-dark-dark: font-serif'> ... <verv> ✅ Serif is Active </div> <div class = "tema tema-sans-dark-dark: font -serif "> ✅ sans aktif </div>
      </html>

CSS Color-Scheme

createThemes juga menerima fungsi yang memaparkan fungsi light dan dark .
Untuk menerapkan properti CSS color-scheme , cukup bungkus tema dengan light atau dark . "

Lihat dokumen MDN untuk detail lebih lanjut tentang fitur ini.

tailwind.config.js

 CreateThemes (({Light, Dark}) => ({
   'Winter': Light ({
       'Primer': 'SteelBlue', 'Base': 'Darkblue', 'Surface': '#f3f3f3',
   }),
   'Forest': Dark ({
       'primer': 'pirus', 'pangkalan': 'tomat', 'permukaan': '#4a4a4a',
   }),}))

Variabel CSS

Tw-colors menciptakan variabel CSS menggunakan format --twc-[color name] secara default, mereka berisi nilai HSL.

Misalnya, dengan konfigurasi berikut, variabel --twc-primary , --twc-base , --twc-surface akan dibuat.

tailwind.config.js

   module.exports = {// ... plugin konfigurasi tailwind Anda: [createThemes ({'winter': {
                'Primer': 'SteelBlue', 'Base': 'Darkblue', 'Surface': '#f3f3f3',}, 'Forest': {
                'Primer': 'Turquoise', 'Base': 'Tomato', 'Surface': '#4a4a4a',},})],
   };

Contoh Penggunaan:

 .my-class {color: hsl (var (-twc-primary));   Latar belakang: HSL (VAR (-TWC-primary) / 0,5);
}

Lihat opsi untuk menyesuaikan variabel CSS

Opsi

Opsi dapat disahkan sebagai argumen kedua ke plugin

 createThemes ({
   // Konfigurasi warna Anda di sini ...}, {
   ProduceCSSVariable: (colorname) => `--twc-$ {colorname}`,
   ProducteThemeClass: (temera nama) => `tema-$ {themeName}`
   ProducteThemeVariant: (temera nama) => `tema-$ {tema}`
   DefaultTheMe: 'Light'
   ketat: false})

`DefaultTheme`

Tema default untuk digunakan, menganggapnya sebagai tema fallback ketika tidak ada tema yang dinyatakan.

Contoh: Tema default sederhana

 createThemes ({
   'musim dingin': {
       'Primer': 'SteelBlue',
   },
   'Halloween': {
       'Primer': 'Crimson',
   },}, {
   DefaultTheme: 'Winter' // 'Winter' | 'Halloween'})

Tema default juga dapat dipilih sesuai dengan cahaya pengguna atau preferensi gelap (lihat MDN prefers-color-scheme)

Contoh: beradaptasi dengan preferensi pengguna

 createThemes ({
   'musim dingin': {
       'Primer': 'SteelBlue',
   },
   'Halloween': {
       'Primer': 'Crimson',
   },}, {
   DefaultTheme: { / ** * Saat `@media (lebih suka-scheme: light)` dicocokkan, * tema default adalah tema "musim dingin" * / cahaya: 'musim dingin',
       / ** * Ketika `@media (lebih suka skema warna: gelap)` dicocokkan, * tema default adalah tema "Halloween" */ gelap: 'Halloween',
    }})

`ketat`

Default : false

Jika warna tidak valid false diabaikan.
Jika warna true tidak valid menghasilkan kesalahan.

Contoh

 createThemes ({
   'natal': {
       // warna tidak valid 'primer': 'redish',
   },
   'Darkula': {
       'Primer': 'Crimson',
   },}, {
   // Kesalahan akan dilemparkan
   ketat: true})

`ProduceCSSVariable`

default : (colorName) => `--twc-${colorName}`

Kustomisasi variabel CSS yang dihasilkan oleh plugin.

Dengan konfigurasi di bawah ini, variabel berikut akan dibuat:

--a-primary-z (bukan twc-primary )
--a-secondary-z (bukan TWC-Secondary )
--a-base-z (bukan TWC-base )

 createThemes ({
   'lampu': {
       'Primer': 'SteelBlue', 'Secondary': 'DarkBlue', 'Base': '#f3f3f3',
   },
   'gelap': {
       'primer': 'pirus', 'sekunder': 'tomat', 'pangkalan': '#4a4a4a',
   },}, {
   ProduceCSSVariable: (colorname) => `--a-$ {colorname} -z`})

`ProducteThemeClass`

Default : (themeName) => themeName

Kustomisasi nama kelas tema dan varian

Dengan konfigurasi di bawah ini, tema ClassNames dan varian berikut akan dibuat:

theme-light (bukan cahaya )
theme-dark (bukan gelap )

 createThemes ({
   'lampu': {
       'Primer': 'SteelBlue', 'Secondary': 'DarkBlue', 'Base': '#f3f3f3',
   },
   'gelap': {
       'primer': 'pirus', 'sekunder': 'tomat', 'pangkalan': '#4a4a4a',
   },}, {
   ProducteTheMeClass: (temera nama) => `tema-$ {temera}`})

 <html class = 'tema-dark'>
   ... <tombol class = 'Tema-Dark: Rounded'> Klik saya </button>
   ... </html>

`ProducteThemevariant`

Default : Sama seperti produceThemeClass

Kustomisasi varian

Dengan konfigurasi di bawah ini, varian berikut akan dibuat:

theme-light (bukan cahaya )
theme-dark (bukan gelap )

 createThemes ({
   'lampu': {
       'Primer': 'SteelBlue', 'Secondary': 'DarkBlue', 'Base': '#f3f3f3',
   },
   'gelap': {
       'primer': 'pirus', 'sekunder': 'tomat', 'pangkalan': '#4a4a4a',
   },}, {
   ProducteThemeVariant: (temera nama) => `tema-$ {temera}`})

 <html data-theme = 'dark'>
   ... <tombol class = 'Tema-Dark: Rounded'> Klik saya </button>
   ... </html>

Dari penulis yang sama

Up-Fetch: Alat konfigurasi 1KB kecil untuk API fetch dengan default yang masuk akal

Tolong bagikan

Memperluas

Informasi Tambahan

Versi 1.0.0
Tipe Kode sumber lainnya
Waktu Pembaruan 2025-02-06
ukuran 17.46KB
Berasal dari Github

Aplikasi Terkait

GitHub sgrebnov/cordova plugin background download

2024-11-05
Wa ch ull navra maza navsacha 2 2024 ull ovie Fr e Online On Strea ings

2024-11-03
Wa ch navra maza navsacha 2 2024 ull ovie Online For Fr e Strea ings At Home

2024-11-03
Wa ch the greatest of all time 2024 ull ovie Online For Fr e Strea ings At Home

2024-11-02
wolfs 2024 f llmo ie f lmyz lla dow load ree 7 0p 4 0p a d 10 0p

2024-11-01
Aurora: Warna Tersembunyi

2022-08-02

Direkomendasikan untuk Anda

chat.petals.dev

Kode sumber lainnya

1.0.0
GPT Prompt Templates

Kode sumber lainnya

1.0.0
GPTyped

Kode sumber lainnya

GPTyped 1.0.5
waymo open dataset

Kode sumber lainnya

December 2023 Update
SmartTube

Kode sumber lainnya

24.71 Stable
Sunamu

Kode sumber lainnya

Release 2.2.0
waymo open dataset

Kode sumber lainnya

December 2023 Update
wp functions

Kategori lainnya

1.0.0
termwind

Kategori lainnya

v2.3.0

Informasi Terkait Semua

tw colors

dua warna

Highlight

Changelog

Penggunaan

Menambahkan lebih banyak tema

Mengganti tema

Varian

Tema bersarang

Dengan tema data

Dengan kelas

CSS Color-Scheme

Variabel CSS

Opsi

DefaultTheme

ketat

ProduceCSSVariable

ProducteThemeClass

ProducteThemevariant

Dari penulis yang sama

Dengan `tema data`

Dengan `kelas`

`DefaultTheme`

`ketat`

`ProduceCSSVariable`

`ProducteThemeClass`

`ProducteThemevariant`