M

MLOG

Svenska

Utforska kraften i CSS mediafrågor och anpassade egenskaper för att skapa automatiska ljusa och mörka teman som anpassar sig till användarpreferenser, vilket förbättrar tillgänglighet och visuell attraktion för en global publik.

CSS light-dark-funktionen: Automatisk temanpassning för en global webb

I dagens globalt anslutna värld måste webbplatser vara tillgängliga och visuellt tilltalande för användare med olika bakgrunder och preferenser. Ett av de mest effektiva sätten att uppnå detta är genom automatisk temanpassning, specifikt genom att erbjuda både ljusa och mörka teman som anpassas baserat på användarens systeminställningar. Denna bloggpost kommer att guida dig genom implementeringen av denna funktionalitet med hjälp av CSS mediafrågor och anpassade egenskaper, vilket säkerställer en sömlös och bekväm webbupplevelse för din internationella publik.

Varför implementera automatiska ljusa och mörka teman?

Det finns flera starka skäl att införliva automatisk temanpassning i dina webbprojekt:

Hur man implementerar automatisk temanpassning med CSS

Kärnan i automatisk temanpassning ligger i mediafrågan prefers-color-scheme. Denna CSS-mediafråga låter dig upptäcka användarens föredragna färgschema (ljust eller mörkt) och tillämpa motsvarande stilar.

Steg 1: Definiera anpassade egenskaper (CSS-variabler)

Börja med att definiera anpassade egenskaper (CSS-variabler) för att lagra färgvärdena för dina ljusa och mörka teman. Detta gör det enkelt att växla mellan teman genom att helt enkelt uppdatera variabelvärdena.


:root {
  --background-color: #ffffff; /* Ljust tema bakgrund */
  --text-color: #000000; /* Ljust tema text */
  --link-color: #007bff; /* Ljust tema länk */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Mörkt tema bakgrund */
    --text-color: #ffffff; /* Mörkt tema text */
    --link-color: #66b3ff; /* Mörkt tema länk */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

I detta exempel definierar vi variabler för bakgrundsfärg, textfärg, länkfärg och knappfärger. Selektorn :root tillämpar dessa variabler på hela dokumentet. Mediafrågan @media (prefers-color-scheme: dark) skriver sedan över dessa variabler med värden för det mörka temat när användaren har ställt in sitt system på mörkt läge.

Steg 2: Applicera anpassade egenskaper på dina stilar

Applicera sedan dessa anpassade egenskaper på dina CSS-stilar för att styra utseendet på din webbplats element.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Mjuk övergång */
}

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

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

Här använder vi funktionen var() för att komma åt värdena på våra anpassade egenskaper. Vi har också lagt till en transition-egenskap på body-elementet för att skapa en mjuk övergång mellan teman.

Steg 3: Testning och finjustering

Testa din implementering noggrant i olika webbläsare och operativsystem. Moderna webbläsare som Chrome, Firefox, Safari och Edge har fullt stöd för mediafrågan prefers-color-scheme. Du kan växla mellan ljust och mörkt läge i dina operativsysteminställningar för att se ändringarna återspeglas på din webbplats.

Avancerade tekniker och överväganden

Erbjuda en manuell temaväxlare

Även om automatisk temanpassning är en bra utgångspunkt, kan vissa användare föredra att manuellt åsidosätta sina systeminställningar. Du kan erbjuda en manuell temaväxlare med hjälp av JavaScript och lokal lagring (local storage).

HTML:


<button id="theme-toggle">Växla tema</button>

JavaScript:


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

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

// Applicera initialt tema vid sidladdning
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Om inställt på auto, låt prefers-color-scheme bestämma
}


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

CSS: Lägg till följande CSS tillsammans med den tidigare CSS:en. Notera den manuella överstyrningen:


body.light-theme {
  --background-color: #ffffff; /* Ljust tema bakgrund */
  --text-color: #000000; /* Ljust tema text */
  --link-color: #007bff; /* Ljust tema länk */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Mörkt tema bakgrund */
  --text-color: #ffffff; /* Mörkt tema text */
  --link-color: #66b3ff; /* Mörkt tema länk */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Detta kodstycke lägger till en knapp som låter användare växla mellan ljust, mörkt och automatiskt tema. Det valda temat lagras i local storage så att det består mellan sidladdningar.

Hantering av bilder och SVG:er

Vissa bilder och SVG:er kanske inte ser bra ut i både ljusa och mörka teman. Du kan använda CSS mediafrågor för att villkorligt visa olika versioner av dessa tillgångar.


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;
  }
}

Detta kodstycke visar en bild (med klassen light-mode) i ljust läge och en annan bild (med klassen dark-mode) i mörkt läge.

Färgpalettöverväganden för internationella publiker

När du väljer färgpaletter för dina ljusa och mörka teman, var medveten om kulturella associationer och tillgänglighetsaspekter. Här är några allmänna riktlinjer:

Prestandaöverväganden

Även om implementeringen av automatisk temanpassning är relativt enkel, är det viktigt att överväga den potentiella inverkan på prestandan. Undvik att använda alltför komplexa CSS-selektorer eller animationer som kan sakta ner renderingen. Se också till att dina anpassade egenskaper definieras effektivt för att minimera overheaden av variabeluppslagningar.

Här är några bästa praxis för att optimera prestanda:

Bästa praxis för tillgänglighet

Se till att dina ljusa och mörka teman uppfyller riktlinjerna för tillgänglighet, såsom WCAG (Web Content Accessibility Guidelines). Detta inkluderar att ge tillräcklig färgkontrast, använda semantisk HTML och se till att alla interaktiva element är tillgängliga via tangentbordet.

Här är några specifika bästa praxis för tillgänglighet att följa:

Exempel från olika regioner

Tänk på dessa exempel på hur ljusa och mörka teman kan skräddarsys för olika globala publiker:

Slutsats

Att implementera automatiska ljusa och mörka teman är ett avgörande steg mot att skapa en mer tillgänglig och användarvänlig webbupplevelse för en global publik. Genom att utnyttja CSS mediafrågor och anpassade egenskaper kan du enkelt anpassa din webbplats utseende för att matcha användarpreferenser, minska ögonbelastning och förbättra tillgängligheten för användare med synnedsättningar. Kom ihåg att ta hänsyn till kulturella associationer, tillgänglighetsriktlinjer och prestandaöverväganden för att säkerställa en sömlös och inkluderande webbupplevelse för alla.

Genom att anamma dessa tekniker visar du ett engagemang för moderna webbdesignprinciper och tillgodoser de mångsidiga behoven hos din internationella publik, vilket gör din webbplats till en välkomnande och bekväm plats för alla.