M

MLOG

Dansk

Udforsk styrken i CSS media queries og custom properties til at skabe automatiske lyse og mørke temaer, der tilpasser sig brugerens præferencer, forbedrer tilgængelighed og visuel appel for et globalt publikum.

CSS Light-Dark Funktion: Automatisk Tematilpasning til et Globalt Web

I nutidens globalt forbundne verden skal hjemmesider være tilgængelige og visuelt tiltalende for brugere med forskellige baggrunde og præferencer. En af de mest effektive måder at opnå dette på er gennem automatisk tematilpasning, specifikt ved at tilbyde både lyse og mørke temaer, der justeres baseret på brugerens systemindstillinger. Dette blogindlæg vil guide dig gennem implementeringen af denne funktionalitet ved hjælp af CSS media queries og custom properties, hvilket sikrer en problemfri og behagelig browsingoplevelse for dit internationale publikum.

Hvorfor Implementere Automatiske Lyse og Mørke Temaer?

Der er flere overbevisende grunde til at indarbejde automatisk tematilpasning i dine webprojekter:

Sådan Implementeres Automatisk Tematilpasning med CSS

Kernen i automatisk tematilpasning ligger i prefers-color-scheme media query. Denne CSS media query giver dig mulighed for at registrere brugerens foretrukne farveskema (lys eller mørk) og anvende tilsvarende stilarter.

Trin 1: Definer Custom Properties (CSS-variabler)

Start med at definere custom properties (CSS-variabler) for at gemme farveværdierne for dine lyse og mørke temaer. Dette gør det nemt at skifte mellem temaer ved blot at opdatere variabelværdierne.


:root {
  --background-color: #ffffff; /* Lyst tema baggrund */
  --text-color: #000000; /* Lyst tema tekst */
  --link-color: #007bff; /* Lyst tema link */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Mørkt tema baggrund */
    --text-color: #ffffff; /* Mørkt tema tekst */
    --link-color: #66b3ff; /* Mørkt tema link */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

I dette eksempel definerer vi variabler for baggrundsfarve, tekstfarve, linkfarve og knapfarver. :root-selektoren anvender disse variabler på hele dokumentet. @media (prefers-color-scheme: dark) media queryen overskriver derefter disse variabler med værdier for det mørke tema, når brugeren har indstillet sit system til mørk tilstand.

Trin 2: Anvend Custom Properties på Dine Stilarter

Anvend derefter disse custom properties på dine CSS-stilarter for at styre udseendet af din hjemmesides elementer.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Glidende 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 bruger vi var()-funktionen til at tilgå værdierne af vores custom properties. Vi har også tilføjet en transition-egenskab til body-elementet for at skabe en glidende overgang mellem temaerne.

Trin 3: Test og Finpudsning

Test din implementering grundigt på tværs af forskellige browsere og operativsystemer. Moderne browsere som Chrome, Firefox, Safari og Edge understøtter fuldt ud prefers-color-scheme media query. Du kan skifte mellem lys og mørk tilstand i dit operativsystems indstillinger for at se ændringerne afspejlet på din hjemmeside.

Avancerede Teknikker og Overvejelser

Tilbyd en Manuel Temavælger

Selvom automatisk tematilpasning er et godt udgangspunkt, foretrækker nogle brugere måske manuelt at tilsidesætte deres systemindstillinger. Du kan tilbyde en manuel temavælger ved hjælp af JavaScript og local storage.

HTML:


<button id="theme-toggle">Skift Tema</button>

JavaScript:


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

let currentTheme = localStorage.getItem('theme') || 'auto'; // Standard er 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;
}

// Anvend starttema ved sideindlæsning
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Hvis sat til auto, lad prefers-color-scheme bestemme
}


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

CSS: Tilføj følgende CSS sammen med den forrige CSS. Bemærk den manuelle tilsidesættelse:


body.light-theme {
  --background-color: #ffffff; /* Lyst tema baggrund */
  --text-color: #000000; /* Lyst tema tekst */
  --link-color: #007bff; /* Lyst tema link */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Mørkt tema baggrund */
  --text-color: #ffffff; /* Mørkt tema tekst */
  --link-color: #66b3ff; /* Mørkt tema link */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Dette kodestykke tilføjer en knap, der giver brugerne mulighed for at skifte mellem lyse, mørke og automatiske temaer. Det valgte tema gemmes i local storage, så det bevares på tværs af sideindlæsninger.

Håndtering af Billeder og SVG'er

Nogle billeder og SVG'er ser måske ikke godt ud i både lyse og mørke temaer. Du kan bruge CSS media queries til betinget at vise forskellige versioner af disse aktiver.


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 kodestykke viser ét billede (med klassen light-mode) i lys tilstand og et andet billede (med klassen dark-mode) i mørk tilstand.

Overvejelser om Farvepaletter for Internationale Målgrupper

Når du vælger farvepaletter til dine lyse og mørke temaer, skal du være opmærksom på kulturelle associationer og tilgængelighedshensyn. Her er nogle generelle retningslinjer:

Ydelsesovervejelser

Selvom implementering af automatisk tematilpasning er relativt ligetil, er det vigtigt at overveje den potentielle indvirkning på ydeevnen. Undgå at bruge alt for komplekse CSS-selektorer eller animationer, der kan bremse gengivelsen. Sørg også for, at dine custom properties er defineret effektivt for at minimere overhead ved variabelopslag.

Her er nogle bedste praksisser for at optimere ydeevnen:

Bedste Praksis for Tilgængelighed

Sørg for, at dine lyse og mørke temaer overholder tilgængelighedsretningslinjer, såsom WCAG (Web Content Accessibility Guidelines). Dette inkluderer at give tilstrækkelig farvekontrast, bruge semantisk HTML og sikre, at alle interaktive elementer er tilgængelige via tastaturet.

Her er nogle specifikke bedste praksisser for tilgængelighed at følge:

Eksempler på Tværs af Forskellige Regioner

Overvej disse eksempler på, hvordan lyse og mørke temaer kan skræddersys til forskellige globale målgrupper:

Konklusion

Implementering af automatiske lyse og mørke temaer er et afgørende skridt mod at skabe en mere tilgængelig og brugervenlig weboplevelse for et globalt publikum. Ved at udnytte CSS media queries og custom properties kan du nemt tilpasse din hjemmesides udseende til at matche brugerpræferencer, reducere øjenbelastning og forbedre tilgængeligheden for brugere med synshandicap. Husk at tage hensyn til kulturelle associationer, tilgængelighedsretningslinjer og ydelsesovervejelser for at sikre en problemfri og inkluderende browsingoplevelse for alle.

Ved at anvende disse teknikker viser du en forpligtelse til moderne webdesignprincipper og imødekommer de forskellige behov hos dit internationale publikum, hvilket gør din hjemmeside til et indbydende og behageligt rum for alle.