M

MLOG

Svenska

Implementera mörkt läge på din webbplats med denna kompletta guide. Lär dig om CSS media queries, JavaScript-växlar, tillgänglighetsaspekter och bästa praxis för en smidig användarupplevelse.

Implementera mörkt läge: En komplett guide med CSS och JavaScript

Mörkt läge har blivit alltmer populärt och erbjuder en bekvämare tittarupplevelse, särskilt i miljöer med svagt ljus. Denna guide ger en komplett översikt över hur du implementerar mörkt läge på din webbplats med hjälp av CSS och JavaScript, för att säkerställa en smidig och tillgänglig användarupplevelse för en global publik.

Varför implementera mörkt läge?

Det finns flera starka skäl att överväga att implementera mörkt läge:

Metoder för att implementera mörkt läge

Det finns flera tillvägagångssätt för att implementera mörkt läge, var och en med sina egna för- och nackdelar. Vi kommer att utforska de vanligaste metoderna:

1. Implementera mörkt läge med CSS Media Queries

CSS media queryn prefers-color-scheme låter dig upptäcka användarens föredragna färgschema och tillämpa olika stilar därefter. Detta är det enklaste och mest effektiva sättet att implementera mörkt läge för användare som redan har ställt in sina systempreferenser.

Kodexempel

Lägg till följande CSS i din stilmall:

/* Standardtema (Ljust) */
body {
  background-color: #fff;
  color: #000;
}

/* Mörkt tema */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Justera andra element vid behov */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Förklaring:

Fördelar

Nackdelar

2. Implementera mörkt läge med en JavaScript-växlare

Att använda en JavaScript-växlare ger användarna en manuell omkopplare för att styra webbplatsens tema. Detta ger användarna mer kontroll och låter dem åsidosätta sina systempreferenser. Detta tillvägagångssätt är avgörande för att tillgodose användare på olika enheter och plattformar som kanske inte konsekvent stöder eller exponerar systemomfattande inställningar för mörkt läge.

HTML-struktur

Lägg först till ett växlingselement i din HTML:

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

Detta skapar en enkel växlingsknapp med hjälp av en kryssruta och lite anpassad CSS-styling.

CSS-styling (Valfritt)

Du kan styla växlingsknappen med CSS. Här är ett exempel:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rundade reglage */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

JavaScript-kod

Lägg nu till följande JavaScript-kod för att hantera växlingsfunktionen:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Funktion för att växla mörkt läge
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Spara användarens preferens i localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Kontrollera localStorage efter sparad preferens
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Lägg till en event listener på växlingsknappen
darkModeToggle.addEventListener('change', toggleDarkMode);

Förklaring:

CSS-styling för mörkt läge (med klass)

Uppdatera din CSS för att använda klassen dark-mode för att tillämpa stilarna för det mörka temat:

/* Standardtema (Ljust) */
body {
  background-color: #fff;
  color: #000;
}

/* Mörkt tema */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

Fördelar

Nackdelar

3. Kombinera Media Queries och JavaScript

Den bästa metoden är ofta att kombinera CSS media queries med en JavaScript-växlare. Detta ger det bästa av två världar: automatisk detektering av användarens föredragna färgschema, samtidigt som användaren manuellt kan åsidosätta systeminställningen. Detta tillgodoser en bredare publik, inklusive de som kanske inte känner till eller kan ändra sina systemomfattande temainställningar.

Kodexempel

Använd samma HTML och CSS från exemplet med JavaScript-växlaren. Modifiera JavaScript-koden för att kontrollera systempreferensen:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Funktion för att växla mörkt läge
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Spara användarens preferens i localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Kontrollera localStorage för sparad preferens, därefter systempreferens
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Lägg till en event listener på växlingsknappen
darkModeToggle.addEventListener('change', toggleDarkMode);

Förklaring:

Fördelar

Nackdelar

Tillgänglighetsaspekter

När du implementerar mörkt läge är det avgörande att ta hänsyn till tillgänglighet för att säkerställa att din webbplats förblir användbar för alla användare. Kom ihåg att enbart invertering av färger inte automatiskt garanterar tillgänglighet. Här är några viktiga aspekter att tänka på:

Bästa praxis för implementering av mörkt läge

Här är några bästa praxis att följa när du implementerar mörkt läge på din webbplats:

Exempel: CSS-variabler för teman

CSS-variabler gör det enkelt att växla mellan ljusa och mörka teman. Definiera variablerna i pseudo-klassen :root:

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

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

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

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

När klassen dark-mode läggs till på body, uppdateras CSS-variablerna och stilarna tillämpas automatiskt.

Slutsats

Att implementera mörkt läge kan avsevärt förbättra användarupplevelsen på din webbplats, öka tillgängligheten och till och med spara batteritid. Genom att följa teknikerna och bästa praxis som beskrivs i denna guide kan du skapa en smidig och njutbar upplevelse med mörkt läge för dina användare över hela världen.

Kom ihåg att prioritera tillgänglighet och testa din implementering noggrant för att säkerställa att din webbplats förblir användbar för alla användare, oavsett deras preferenser eller synförmåga.

Genom att implementera mörkt läge på ett genomtänkt sätt följer du inte bara en trend, utan skapar också en mer inkluderande och användarvänlig webbupplevelse för en global publik. Detta engagemang för användarupplevelsen kan i hög grad gynna din webbplats övergripande prestanda och attraktionskraft.

Implementera mörkt läge: En komplett guide med CSS och JavaScript | MLOG