Tumman tilan strategiat
Vertailkaa media-strategiaa (prefers-color-scheme) ja luokkastrategiaa (dark-luokan vaihtaminen html-elementissä) sekä oppikaa, milloin kumpaakin kannattaa käyttää.
Tumman tilan strategiat on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Miksi tumma tila on tärkeä
Tummasta tilasta on tullut nykyaikaisten verkkosovellusten perusominaisuus. Käyttäjät suosivat sitä vähentämään silmien rasitusta hämärässä, ja se voi pidentää OLED-näyttöjen akunkestoa. Tailwind CSS tekee tumman tilan käyttöönotosta helppoa sisäänrakennetun dark-variantin avulla. Ennen kuin kirjoitat yhtäkään luokkaa, sinun on valittava kahdesta strategiasta: media-strategiasta ja class-strategiasta.
Media-strategia selitettynä
Media-strategia perustuu selaimen prefers-color-scheme-CSS-mediakyselyyn. Kun käyttäjä asettaa käyttöjärjestelmänsä tummaan tilaan, Tailwind ottaa automaattisesti käyttöön kaikki dark:-etuliitteelliset apuohjelmat. Tämä ei vaadi lainkaan JavaScriptiä — selain hoitaa kaiken. Tämä on yksinkertaisin lähestymistapa, mutta sovellus ei voi tarjota omaa tumman tilan vaihtokytkintä.
/* Tailwind uses this media query under the hood */
@media (prefers-color-scheme: dark) {
/* dark: utilities are applied here */
}Media-strategian käyttöönotto määrityksissä
Tailwind v3:ssa media-strategia ei ole oletusstrategia. Sinun on otettava se käyttöön määrittämällä darkMode arvoksi 'media' tiedostossa tailwind.config.js. Kun strategia on käytössä, kaikki dark:-etuliitteelliset apuohjelmat aktivoituvat automaattisesti, kun käyttöjärjestelmä ilmoittaa tumman tilan olevan käytössä. Tämä sopii yksinkertaisille sivustoille, jotka eivät tarvitse manuaalista vaihtokytkintä.
// tailwind.config.js
module.exports = {
darkMode: 'media',
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
};Class-strategia selitettynä
Class-strategia antaa ohjelmallisen hallinnan tummaan tilaan. Käyttöjärjestelmän asetukseen tukeutumisen sijaan Tailwind ottaa tumman tilan tyylit käyttöön aina, kun pääelementillä — yleensä <html>-tunnisteella — on dark-luokka. Näin käyttäjät voivat vaihtaa tummaan tilaan sovelluksen sisällä manuaalisesti järjestelmän asetuksesta riippumatta. Useimmat nykyaikaiset sovellukset suosivat tätä strategiaa.
<!-- Light mode: no dark class -->
<html>
<body class="bg-white text-gray-900">...</body>
</html>
<!-- Dark mode: dark class applied -->
<html class="dark">
<body class="bg-white dark:bg-gray-900 dark:text-white">...</body>
</html>Class-strategian käyttöönotto määrityksissä
Ota class-strategia käyttöön asettamalla darkMode määritystiedostossa arvoon 'class'. Tailwind v3 käyttää arvoa 'class' yleisenä oletuksena sovelluksissa, joissa käyttäjä hallitsee teeman vaihtamista. Kun tämä asetus on käytössä, dark:-variantit otetaan käyttöön vain, kun esi-isäelementillä on dark-luokka. Näin voit hallita täysin sitä, milloin tumman tilan tyylit aktivoituvat.
// tailwind.config.js
module.exports = {
darkMode: 'class',
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
};Media- ja class-strategia: keskeiset erot
Strategian valinta riippuu käyttötapauksestasi. Media-strategia toimii automaattisesti eikä vaadi JavaScriptiä — se sopii erinomaisesti staattisille sivustoille ja dokumentaatiolle. Class-strategia vaatii JavaScriptiä luokan vaihtamiseen, mutta mahdollistaa sovelluksen sisäisen käyttäjäasetuksen, joka voi ohittaa käyttöjärjestelmän asetuksen. Sen avulla voit myös tallentaa asetuksen localStorage-säilöön.
media— käyttöjärjestelmän ohjaama, ei JavaScriptiäclass— sovelluksen ohjaama, JavaScriptillä toteutettava vaihtokytkin tarvitaan
Selector-strategia Tailwind v3.3:ssa ja uudemmissa
Tailwind v3.3 esitteli kolmannen vaihtoehdon: selector-strategian, jossa 'class'-arvon sijaan annetaan mukautettu CSS-valitsinmerkkijono. Tämä on hyödyllistä, kun tummaa tilaa ohjataan data-theme-attribuutilla tai jollakin muulla määritetyllä kääreluokalla kuin dark-luokalla. Esimerkiksi määritys darkMode: ['class', '[data-theme="dark"]'] ottaa tumman tilan apuohjelmat käyttöön, kun kyseinen attribuutti löytyy miltä tahansa esi-isäelementiltä.
// tailwind.config.js (v3.3+)
module.exports = {
darkMode: ['class', '[data-theme="dark"]'],
// ...
};Tumman tilan varianttiluokkien kirjoittaminen
Kun tumman tilan strategia on määritetty, tummien tyylien käyttöönotto tarkoittaa vain dark:-etuliitteen lisäämistä apuohjelman eteen. Voit käyttää dark:-etuliitettä väreissä, taustoissa, reunuksissa, varjoissa ja jopa hover-tiloissa. Tailwind luo oikeat CSS-valitsimet tai mediakyselyt automaattisesti. Määritä aina sekä vaalea että tumma versio vierekkäin samalle elementille.
<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-6 rounded-lg shadow dark:shadow-gray-700">
<h2 class="text-xl font-bold">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Card content here.</p>
</div>Tumman tilan rajaus
Class-strategiassa dark-luokan voi sijoittaa mille tahansa esi-isäelementille, ei vain <html>-elementille. Tämä mahdollistaa osittaisen tumman tilan — voit tehdä yhdestä sivun osasta tumman ja jättää muun sisällön vaaleaksi. Tämä on hyödyllistä teemoitetuissa paneeleissa, sivupalkkeissa tai esikatselukomponenteissa, joiden ulkoasun on poikettava pääsivusta.
<div class="bg-gray-100 p-8">
<p>This section is always light.</p>
<div class="dark bg-gray-900 text-white p-4 mt-4 rounded">
<p>This inner section is always dark.</p>
</div>
</div>Tumman tilan yhdistäminen muihin variantteihin
Tailwindin varianttijärjestelmä on yhdisteltävissä. Voit yhdistää dark:-etuliitteen muihin variantteihin, kuten hover:- ja focus:-variantteihin sekä responsiivisiin murroskohtiin. Etuliitteiden järjestyksellä on merkitystä: kirjoita ensin responsiiviset etuliitteet, sitten tilavariantit ja lopuksi dark — esimerkiksi md:hover:dark:bg-gray-700. Näin voit luoda erittäin täsmällisiä ja kontekstin huomioon ottavia tyylejä ilman mukautettua CSS:ää.
<button class="
bg-blue-600 text-white
hover:bg-blue-700
dark:bg-blue-500
dark:hover:bg-blue-400
focus:ring-2 focus:ring-blue-300
dark:focus:ring-blue-700
px-4 py-2 rounded
">
Click Me
</button>Milloin kutakin strategiaa kannattaa käyttää
Käytä media-strategiaa, kun kohdeyleisösi on tekninen, kuten kehittäjätyökalujen tai dokumentaatiosivuston käyttäjät, ja käyttöjärjestelmän asetuksen automaattinen huomioiminen riittää. Käytä class-strategiaa, kun rakennat kuluttajasovellusta, jossa käyttäjät odottavat sovelluksen sisäistä vaihtokytkintä. Käytä selector-strategiaa, kun teema- järjestelmäsi käyttää design token -pohjaista data-theme-attribuuttia tai integroit olemassa olevaan teemakirjastoon, joka hallitsee omia luokanimiään.
Pikatarkistus
Testaa, miten hyvin ymmärrät tässä oppitunnissa käsitellyt Tailwind CSS:n tumman tilan strategiat.
Oppitunnin yhteenveto
Tässä oppitunnissa opit, että media-strategia käyttää käyttöjärjestelmän prefers-color-scheme-asetusta automaattisesti, class-strategia edellyttää dark-luokkaa esi-isäelementillä ja mahdollistaa vaihtamisen JavaScriptillä, ja selector-strategia mahdollistaa attribuutteihin perustuvat mukautetut tumman tilan laukaisimet. Seuraavaksi tutustumme siihen, miten dark:-varianttia käytetään väreissä, taustoissa ja komponenteissa.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Tumman tilan strategiat” ilmainen?
Kyllä – oppitunnin ”Tumman tilan strategiat” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tumman tilan strategiat”?
Vertailkaa media-strategiaa (prefers-color-scheme) ja luokkastrategiaa (dark-luokan vaihtaminen html-elementissä) sekä oppikaa, milloin kumpaakin kannattaa käyttää. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Tumman tilan strategiat”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Tumman tilan strategiat
- Tummien muunnelmien käyttäminen
- Tumman tilan vaihtokytkimen rakentaminen
- Tumma tila monimutkaisille komponenteille