Sådan implementerer du mørk tilstand på et websted ved hjælp af CSS-variabler

I de senere år Mørk tilstand er blevet moderne Det findes i stort set alle digitale grænseflader: operativsystemer, apps, administrationspaneler og selvfølgelig hjemmesider. Udover at være en æstetisk trend er det tæt forbundet med visuel komfort, brug om natten og i nogle tilfælde batteribesparelser på OLED-skærme. Hvis du overvejer at tilføje det til dit projekt, vil du se, at det ikke er så kompliceret, som det ser ud til.

I denne artikel vil vi se Sådan implementerer du en mørk tilstand på et websted ved hjælp af CSS-variabler, medieforespørgsler og selektoren :has() og switche med JavaScript. Vi dækker alt fra den ultra-simple version, der kun bruger HTML og CSS (uden persistens) til mere komplette løsninger med lokal lagring og automatisk systemtema-detektion. Alt trin for trin, med kommenteret kode og praktiske tips, så du kan integrere det på næsten ethvert websted.

Hvorfor er det værd at tilbyde mørk tilstand på din hjemmeside?

Før vi går i detaljer, er det værd at forstå Hvilke reelle fordele tilbyder mørk tilstand? Ud over at det er visuelt "cool", tager flere og flere brugere det til sig. De aktiverer det på deres enheder og de forventer, at hjemmesider tilpasser sig denne præference.

På den ene side, reducerer øjnene I svagt oplyste omgivelser udsender mørke overflader mindre lys end en ren hvid baggrund. Dette er især mærkbart, hvis dit publikum bruger meget tid på at læse lange tekster eller arbejde om natten. På den anden side, med OLED-skærme, Sorte pixels bruger meget lidt energiså et mørkt design kan være med til at forlænge batterilevetiden.

Der er også en rent æstetik og brugeroplevelseMange brugere synes, at mørke grænseflader er mere elegante og moderne. At kunne skifte mellem lyse og mørke temaer formidler opmærksomhed på detaljer og empati for forskellige præferencer, hvilket kan forbedre den overordnede opfattelse af dit projekt og endda, som en bonus, relevante SEO-målinger.

relateret artikel:

Sådan aktiveres mørk tilstand i Microsoft Edge med disse trin

CSS-variabler: nøglen til at ændre temaer

Det første koncept, du skal mestre, er brugerdefinerede CSS-egenskaberDisse kaldes almindeligvis CSS-variabler. De fungerer som containere til værdier, som du kan genbruge i hele din CSS, og er ideelle til at håndtere flere farvetemaer uden at blive vanvittige.

Ideen er meget enkel: du definerer det på et centralt punkt variablerne med basisfarverne af din brugerflade (baggrund, tekst, hovedfarve osv.) og resten af CSS-reglerne er begrænset til at bruge var() i stedet for faste værdier. Ved at ændre variablerne ændrer du hele udseendet uden at røre hver selektor én efter én.

Den mest almindelige praksis er at deklarere disse variabler i :root, som peger på elementet <html>For eksempel kunne du starte med noget i retning af dette til dit standardtema for lys:

:root {
  --color-fondo: #ffffff;
  --color-texto: #000000;
  --color-principal: #007bff;
}

Fra det tidspunkt bør al din CSS være afhængig af disse variabler. For eksempel:

body {
  background: var(--color-fondo);
  color: var(--color-texto);
}

a {
  color: var(--color-principal);
}

Bemærk at Der er ingen "hårde" farver i resten af koden, kun referencer til var(--...)Dette giver dig mulighed for senere at aktivere en mørk tilstand eller endda flere yderligere temaer ved blot at omdefinere de samme variabler med andre værdier.

Mørk tilstand, der kun bruger CSS og :has()-vælgeren

Hvis du ønsker en meget hurtig løsning og ikke har noget imod mørk tilstand Det huskes ikke, når man skifter sideDu kan opsætte et mørkt tema uden JavaScript ved hjælp af relationsvælgeren. :has() og en afkrydsningsboks.

Logikken er som følger: du deklarerer variablerne for standardlys-temaet i :rootDu anvender disse variabler på hele dokumentet igennem body og så bruger du body:has(#darkmode-toggle:checked) at overskrive værdierne, når afkrydsningsfeltet er markeret.

Et meget simpelt eksempel ville være:

/* Colores por defecto (modo claro) */
:root {
  --bg-color: #ffffff;
  --text-color: #222222;
}

/* Aplicar variables al documento */
body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
}

/* “Magia” del modo oscuro sin JS */
body:has(#darkmode-toggle:checked) {
  --bg-color: #1e1e1e;
  --text-color: #f5f5f5;
}

I HTML behøver du kun én afkrydsningsfelt, der fungerer som en kontakt og en etiket <label> for at gøre det klikbart og visuelt tilpasseligt:

<input id="darkmode-toggle" type="checkbox" />
<label class="toggle" for="darkmode-toggle">Modo oscuro</label>

Når brugeren aktiverer afkrydsningsfeltet, vil vælgeren body:has(#darkmode-toggle:checked) kommer i spilved at ændre værdierne af variablerne. Ligesom resten af webstedet bruger var(--bg-color) y var(--text-color)Hele designet tilpasser sig øjeblikkeligt til mørk tilstand.

Det eneste "men" ved dette trick er, at der er ingen vedholdenhedHvis brugeren genindlæser siden eller navigerer til en anden sti, mister brugeren valget, da der ikke er involveret noget script eller lagring. Dette gør den ideel til landingssider med én side eller simple demoer, hvor du ikke behøver at huske præferencen.

Udveksl emner ved at tilføje klasser til enten

Når du vil gå et skridt videre og have et solidt system af temaer, er det mest almindelige styr temaet med en klasse i rodelementet (<html>) eller i <body>På denne måde kan du definere blokke af variabler for hvert emne og lade et lille JavaScript-uddrag håndtere klassebytningen.

Det grundlæggende i CSS kunne se sådan ud:

/* Tema claro por defecto */
:root {
  --color-fondo: #ffffff;
  --color-texto: #000000;
  --color-principal: #007bff;
}

/* Tema oscuro */
:root.tema-oscuro {
  --color-fondo: #333333;
  --color-texto: #ffffff;
  --color-principal: #66b2ff;
}

De andre stilarter er afhængige af disse variabler, som vi har set før:

body {
  background: var(--color-fondo);
  color: var(--color-texto);
}

a {
  color: var(--color-principal);
}

Skiftet i HTML kan være så simpelt som en afkrydsningsfelt med dens etiket:

<input type="checkbox" id="interruptor-tema" />
<label for="interruptor-tema">Tema oscuro</label>

Og JavaScript-koden skal bare skifte til den relevante klasse på elementet. documentElement (hvad er <html>):

const interruptor = document.getElementById('interruptor-tema');

interruptor.addEventListener('change', function () {
  document.documentElement.classList.toggle('tema-oscuro');
});

Ved at markere afkrydsningsfeltet, dit websted Den skifter automatisk mellem lys tilstand og mørk tilstand., takket være at CSS-variabler er omdefineret under klassen .tema-oscuroFordelen i forhold til tricket med :has() Pointen er, at man her nemt kan tilføje mere logik og frem for alt vedholdenhed.

Husk præferencen: localStorage kommer til undsætning

Så brugeren ikke behøver at aktivere mørk tilstand hele tiden hver gang de vender tilbage til din hjemmeside, kan du gemme din beslutning i browserens lokale lager (localStorageDet er en meget simpel nøgle-værdi API, der bevares mellem besøg, så længe browserdataene ikke slettes.

En typisk måde at håndtere dette på er:

Når siden indlæses, du aflæser, om der er en gemt værdi (for eksempel tema = 'oscuro' o 'claro').
Hvis det eksisterer, og det er mørkt, du tilføjer klassen tema-oscuro al <html> og du markerer feltet.
Når brugeren ændrer kontakten, opdaterer du både klassen og værdien i localStorage.

Den komplette kode kan se sådan ud:

// Al cargar la página, aplica el tema guardado
if (localStorage.getItem('tema') === 'oscuro') {
  document.documentElement.classList.add('tema-oscuro');
  document.getElementById('interruptor-tema').checked = true;
}

// Manejar cambios en el interruptor
const interruptor = document.getElementById('interruptor-tema');

interruptor.addEventListener('change', function () {
  if (this.checked) {
    document.documentElement.classList.add('tema-oscuro');
    localStorage.setItem('tema', 'oscuro');
  } else {
    document.documentElement.classList.remove('tema-oscuro');
    localStorage.setItem('tema', 'claro');
  }
});

Takket være denne tilgang, din hjemmeside bevarer den valgte mørke tilstand Selv hvis brugeren lukker fanen eller vender tilbage om et par dage. Dette er den mest praktiske løsning til websteder med flere sider eller større projekter, hvor det er vigtigt at opretholde temakonsistens for brugeroplevelsen.

Registrer automatisk systemtemaet ved hjælp af prefers-color-scheme

En anden vigtig brik i puslespillet er mediekonsultation prefers-color-schemeDette giver din CSS mulighed for at vide, om brugeren har konfigureret sit system i lys eller mørk tilstand. På denne måde kan du Tilpas designet uden at brugeren behøver at røre ved noget, med respekt for din enheds overordnede præference.

Forespørgslen har primært to værdier: light y darkEt meget almindeligt mønster er først at definere det lyse tema som standard, og derefter skifte til mørkt, hvis brugeren foretrækker den tilstand i sin browser:

/* Tema claro por defecto */
:root {
  --body-bg: #ffffff;
  --body-color: #000000;
}

/* Tema oscuro si el sistema está en oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #000000;
    --body-color: #ffffff;
  }
}

Derefter bruger du blot disse variabler i dine generelle stilarter:

body {
  background: var(--body-bg);
  color: var(--body-color);
}

På denne måde, dit websted Den tilpasser sig automatisk brugerens tema. uden behov for JavaScript. Desuden åbner specifikationen døren for mulige fremtidige værdier, så det er fordelagtigt at have et klart standardtema og kun ændre grenen. dark Det er en ret robust måde at organisere CSS på.

Hvis du kombinerer denne teknik med temaskiftet og localStorage, kan du indstille en startværdi baseret på prefers-color-scheme og derefter lade brugeren overskrive den med deres knap. Du skal blot i din JavaScript-logik bestemme, hvilken prioritet du vil give den: til den gemte værdi eller til selve værdien. systempræference.

Implementer et visuelt temaskift ved hjælp af HTML, CSS og JavaScript

Ud over det typiske afkrydsningsfelt uden stil bruger mange websteder en vippekontakt type tænd/sluk med et mere raffineret design (nogle gange med sol- og måneikoner). Du kan bygge det med meget simpel HTML og forme kontakten med CSS.

Et almindeligt eksempel på HTML-struktur, inspireret af layouts med frameworks som Bootstrap, kunne være:

<header class="container">
  <div class="row">
    <div class="col text-center">
      <label id="switch">
        <input type="checkbox">
        <span class="slider round"></span>
      </label>
      <h1>Mi sitio web</h1>
    </div>
  </div>
</header>

I dette mønster, den Inputtet i afkrydsningsfeltet er visuelt "skjult" og kontaktens udseende opnås ved <span class="slider"> med CSS (afrundede rammer, animationer osv.). Derefter kan du forbinde denne switch til temastyring ved hjælp af et lille script.

For eksempel at indstille en attribut i <html> Angiv venligst det aktuelle emne:

<script>
  const colorSwitch = document.querySelector('#switch input');

  function cambiaTema(ev) {
    if (ev.target.checked) {
      document.documentElement.setAttribute('tema', 'dark');
    } else {
      document.documentElement.setAttribute('tema', 'light');
    }
  }

  colorSwitch.addEventListener('change', cambiaTema);
</script>

I din CSS skal du blot deklarere variablerne baseret på den pågældende attribut. tema="light" o tema="dark"for eksempel:

:root {
  --bg-color: #ffffff;
  --text-color: #111111;
}

:root {
  --bg-color: #111111;
  --text-color: #f5f5f5;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

Denne attributbaserede tilgang er meget letlæselig og Det giver dig mulighed for at tilføje flere stater i fremtiden (såsom et "neon", "sepia" osv. tema) blot ved at udvide attributvælgerne :root.

Gå videre: flere farvetemaer med en

Mørk tilstand er kun begyndelsen: med CSS-variabler er det relativt simpelt definere flere farveskemaer og lad brugeren vælge mellem dem. Mekanikken er den samme, men i stedet for et simpelt afkrydsningsfelt kan du bruge en <select> med flere muligheder.

relateret artikel:

Sådan aktiverer du Paints mørke tilstand i Windows 11

I HTML-koden kunne du have noget i retning af:

<label for="selector-tema">Elige un tema</label>
<select id="selector-tema">
  <option value="light">Claro</option>
  <option value="dark">Oscuro</option>
  <option value="neon">Neón 90s</option>
  <option value="sepia">Sepia</option>
</select>

I CSS definerer du variablerne for hvert skema ved hjælp af klasser eller attributter, for eksempel ved hjælp af klasser i :root:

:root.light {
  --bg-color: #ffffff;
  --text-color: #000000;
  --font-family: "Open Sans", sans-serif;
}

:root.dark {
  --bg-color: #111111;
  --text-color: #f5f5f5;
  --font-family: "Open Sans", sans-serif;
}

:root.neon {
  --bg-color: #050816;
  --text-color: #39ff14;
  --font-family: "Open Sans", sans-serif;
}

:root.sepia {
  --bg-color: #f4ecd8;
  --text-color: #4b3b2a;
  --font-family: "Georgia", serif;
}

Sideteksten genbruger disse brugerdefinerede egenskaber:

body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family, "Open Sans", sans-serif);
}

Og JavaScript er begrænset til Lyt efter ændringer i select-sætningen, og opdater klassen af rodelementet:

const selector = document.getElementById('selector-tema');

function setTheme(theme) {
  document.documentElement.className = theme;
  localStorage.setItem('tema', theme);
}

selector.addEventListener('change', function () {
  setTheme(this.value);
});

// Al cargar, aplicamos el tema guardado o uno por defecto
const temaGuardado = localStorage.getItem('tema') || 'light';
setTheme(temaGuardado);
selector.value = temaGuardado;

Med dette kan din hjemmeside håndtere så mange farveskemaer, som du ønsker, holde koden meget ren og koncentrere stildefinitionen i et par variabelblokke.

Brug prefers-color-scheme som den oprindelige værdi for vælgeren

Hvis du også ønsker, at den indledende tilstand skal tage højde for brugerens systempræference, du kan læne dig op ad igen prefers-color-schemeIdeen er for eksempel at indlæse temaet som standard. dark Hvis enheden er indstillet til mørk tilstand, men tillad brugeren at ændre det senere.

Dette kan gøres ved at kombinere CSS og JS, eller blot med JavaScript ved at forespørge window.matchMedia. For eksempel:

const temaGuardado = localStorage.getItem('tema');

let temaInicial = 'light';

if (temaGuardado) {
  temaInicial = temaGuardado;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  temaInicial = 'dark';
}

setTheme(temaInicial);
selector.value = temaInicial;

På denne måde vil en bruger, når de første gang ankommer til dit websted, og deres system er i mørk tilstand, blive tildelt en et tema, der er i overensstemmelse med den konfigurationFra da af vil alle ændringer, du foretager, blive gemt i localStorage og vil prioriteres over automatisk detektion.

Tilgængelighed og kontrast i mørk tilstand

Implementering af mørk tilstand handler ikke kun om at invertere farver. For en virkelig god oplevelse skal du bruge Vær meget opmærksom på kontrasten. mellem tekst og baggrund, og mellem de forskellige interaktive elementer.

Retningslinjerne for tilgængelighed af webindhold (WCAG) anbefaler et minimumskontrastforhold på 4.5:1 For normal tekst er billedformatet 3:1, og for stor tekst er det 3:1. I praksis betyder det, at det ikke er nok blot at sætte lysegrå oven på mørkegrå uden at kontrollere læsbarheden. Der findes onlineværktøjer, der giver dig mulighed for at indtaste dine farver og kontrollere, om de opfylder kravene.

Udover teksten skal du være opmærksom på knapper, links, ikoner og fokustilstandeI mørk tilstand kan nogle lyse farver være distraherende eller vanskelige at læse. I mange tilfælde er det bedst også at justere skygger, rammer og sekundære baggrunde, så alt visuelt passer ind i det nye farveskema.

Glem ikke, at nogle billeder kan se mærkelige ud i nattilstand: du skal muligvis alternative versioner af fonde Eller juster opaciteten, så de ikke skiller sig ud mod en mørk baggrund. Hvis du bruger illustrationer med hvid baggrund, bør du ligeledes overveje at beskære dem eller bruge gennemsigtige formater, så de ikke forstyrrer det overordnede udseende.

Hvilke egenskaber kan du kontrollere med CSS-variabler?

Selvom vi normalt kun tænker på CSS-variabler til farver, kan du faktisk Modulariser stort set ethvert visuelt aspekt med brugerdefinerede egenskaber: skrifttyper, størrelser, afstand, skygger, baggrundsbilleder osv.

For eksempel kunne du ændre global skriftstørrelse afhængigt af emnet:

:root.light {
  --font-size-base: 16px;
}

:root.dark {
  --font-size-base: 17px;
}

body {
  font-size: var(--font-size-base);
}

Eller definere forskellige baggrundsbilleder i henhold til farveskemaet:

:root.light {
  --bg-image: url('fondo-dia.jpg');
}

:root.dark {
  --bg-image: url('fondo-noche.jpg');
}

.hero {
  background-image: var(--bg-image);
}

Du kan endda lege med forskellige skrifttyper eller mere "sjove" stilarter til alternative temaer, altid med fokus på læsbarhed. Tak til var() Du kan allerede angive sikre alternativer, da du har backupværdier:

body {
  font-family: var(--font-family, "Open Sans", sans-serif);
}

Alt dette giver dig mulighed for at skabe meget omfattende oplevelser uden at fylde din CSS med komplicerede betingede parametre, da det meste af "intelligensen" er koncentreret i variabellaget.

relateret artikel:

Sådan aktiveres nattilstand (blåt lys) i Windows 10

Tilbyder en veldesignet mørk tilstand, understøttet af CSS-variabler, prefers-color-scheme og lidt JavaScriptDet er en relativt simpel måde at forbedre dine brugeres oplevelse på uden at skulle omskrive dit websted fra bunden.

Hvis du organiserer din CSS omkring brugerdefinerede egenskaber og centraliserer temalogikken i et par klasser eller attributter i <html>Du kan tilføje visuelle knapper og huske præferencer med localStorage og endda tilbyde flere farveskemaer uden at komplicere vedligeholdelsen for meget eller ofre tilgængeligheden. Del denne programmeringsvejledning, så andre brugere ved, hvordan man gør det.