M

MLOG

Norsk

Utforsk kraften i CSS media queries og egendefinerte egenskaper for å lage automatiske lyse og mørke temaer som tilpasser seg brukerpreferanser, og forbedrer tilgjengelighet og visuell appell for et globalt publikum.

CSS Light-Dark-funksjon: Automatisk tematilpasning for et globalt nett

I dagens globalt tilkoblede verden må nettsteder være tilgjengelige og visuelt tiltalende for brukere fra ulike bakgrunner og med ulike preferanser. En av de mest effektive måtene å oppnå dette på er gjennom automatisk tematilpasning, spesielt ved å tilby både lyse og mørke temaer som justeres basert på brukerens systeminnstillinger. Dette blogginnlegget vil veilede deg gjennom implementeringen av denne funksjonaliteten ved hjelp av CSS media queries og egendefinerte egenskaper, og sikre en sømløs og komfortabel nettleseropplevelse for ditt internasjonale publikum.

Hvorfor implementere automatiske lyse og mørke temaer?

Det er flere overbevisende grunner til å innlemme automatisk tematilpasning i webprosjektene dine:

Slik implementerer du automatisk tematilpasning med CSS

Kjernen i automatisk tematilpasning ligger i prefers-color-scheme media query. Denne CSS media queryen lar deg oppdage brukerens foretrukne fargevalg (lyst eller mørkt) og anvende tilsvarende stiler.

Trinn 1: Definer egendefinerte egenskaper (CSS-variabler)

Start med å definere egendefinerte egenskaper (CSS-variabler) for å lagre fargeverdiene for dine lyse og mørke temaer. Dette gjør det enkelt å bytte mellom temaer ved ganske enkelt å oppdatere variabelverdiene.


:root {
  --background-color: #ffffff; /* Bakgrunn for lyst tema */
  --text-color: #000000; /* Tekst for lyst tema */
  --link-color: #007bff; /* Lenke for lyst tema */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Bakgrunn for mørkt tema */
    --text-color: #ffffff; /* Tekst for mørkt tema */
    --link-color: #66b3ff; /* Lenke for mørkt tema */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

I dette eksemplet definerer vi variabler for bakgrunnsfarge, tekstfarge, lenkefarge og knappefarger. :root-selektoren anvender disse variablene på hele dokumentet. Media queryen @media (prefers-color-scheme: dark) overstyrer deretter disse variablene med verdier for mørkt tema når brukeren har satt systemet sitt til mørk modus.

Trinn 2: Bruk egendefinerte egenskaper i stilene dine

Deretter bruker du disse egendefinerte egenskapene i CSS-stilene dine for å kontrollere utseendet på elementene på nettstedet ditt.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Jevn overgang */
}

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

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Her bruker vi var()-funksjonen for å få tilgang til verdiene til våre egendefinerte egenskaper. Vi har også lagt til en transition-egenskap til body-elementet for å skape en jevn overgang mellom temaene.

Trinn 3: Testing og finjustering

Test implementeringen din grundig på tvers av forskjellige nettlesere og operativsystemer. Moderne nettlesere som Chrome, Firefox, Safari og Edge støtter prefers-color-scheme media queryen fullt ut. Du kan bytte mellom lys og mørk modus i operativsysteminnstillingene for å se endringene reflektert på nettstedet ditt.

Avanserte teknikker og hensyn

Tilby en manuell temabryter

Selv om automatisk tematilpasning er et godt utgangspunkt, kan noen brukere foretrekke å manuelt overstyre systeminnstillingene sine. Du kan tilby en manuell temabryter ved hjelp av JavaScript og local storage.

HTML:


<button id="theme-toggle">Bytt tema</button>

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // Standard til auto

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Bruk starttema ved sidelasting
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Hvis satt til auto, la prefers-color-scheme bestemme
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Legg til følgende CSS sammen med den forrige CSS-en. Legg merke til den manuelle overstyringen:


body.light-theme {
  --background-color: #ffffff; /* Bakgrunn for lyst tema */
  --text-color: #000000; /* Tekst for lyst tema */
  --link-color: #007bff; /* Lenke for lyst tema */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Bakgrunn for mørkt tema */
  --text-color: #ffffff; /* Tekst for mørkt tema */
  --link-color: #66b3ff; /* Lenke for mørkt tema */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Dette kodeutdraget legger til en knapp som lar brukere veksle mellom lyse, mørke og automatiske temaer. Det valgte temaet lagres i local storage slik at det vedvarer på tvers av sidelastinger.

Håndtering av bilder og SVG-er

Noen bilder og SVG-er ser kanskje ikke bra ut i både lyse og mørke temaer. Du kan bruke CSS media queries for å betinget vise forskjellige versjoner av disse ressursene.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Dette kodeutdraget viser ett bilde (med klassen light-mode) i lys modus og et annet bilde (med klassen dark-mode) i mørk modus.

Hensyn til fargepalett for et internasjonalt publikum

Når du velger fargepaletter for dine lyse og mørke temaer, vær oppmerksom på kulturelle assosiasjoner og tilgjengelighetshensyn. Her er noen generelle retningslinjer:

Ytelseshensyn

Selv om implementering av automatisk tematilpasning er relativt enkelt, er det viktig å vurdere den potensielle innvirkningen på ytelsen. Unngå å bruke altfor komplekse CSS-selektorer eller animasjoner som kan bremse ned gjengivelsen. Sørg også for at dine egendefinerte egenskaper er definert effektivt for å minimere overheaden av variabeloppslag.

Her er noen beste praksiser for å optimalisere ytelsen:

Beste praksis for tilgjengelighet

Sørg for at dine lyse og mørke temaer oppfyller retningslinjer for tilgjengelighet, som WCAG (Web Content Accessibility Guidelines). Dette inkluderer å gi tilstrekkelig fargekontrast, bruke semantisk HTML, og sørge for at alle interaktive elementer er tilgjengelige via tastatur.

Her er noen spesifikke beste praksiser for tilgjengelighet å følge:

Eksempler fra forskjellige regioner

Vurder disse eksemplene på hvordan lyse og mørke temaer kan skreddersys for ulike globale målgrupper:

Konklusjon

Implementering av automatiske lyse og mørke temaer er et avgjørende skritt mot å skape en mer tilgjengelig og brukervennlig nettopplevelse for et globalt publikum. Ved å utnytte CSS media queries og egendefinerte egenskaper, kan du enkelt tilpasse nettstedets utseende for å matche brukerpreferanser, redusere øyebelastning og forbedre tilgjengeligheten for brukere med nedsatt syn. Husk å vurdere kulturelle assosiasjoner, retningslinjer for tilgjengelighet og ytelseshensyn for å sikre en sømløs og inkluderende nettleseropplevelse for alle.

Ved å ta i bruk disse teknikkene, viser du en forpliktelse til moderne prinsipper for webdesign og imøtekommer de mangfoldige behovene til ditt internasjonale publikum, noe som gjør nettstedet ditt til et innbydende og komfortabelt sted for alle.