Lys og mørk modus

LexicoWeb støtter både lys og mørk modus for å gi deg en behagelig leseopplevelse uavhengig av lysforhold og personlige preferanser. Denne guiden forklarer hvordan du bytter mellom modusene og hva systemet gjør automatisk.

Automatisk systemdeteksjon

Første gang du besøker LexicoWeb, oppdager systemet automatisk om operativsystemet ditt er satt til lys eller mørk modus. Dette gjøres via nettleserens prefers-color-scheme-innstilling.

Hvis operativsystemet ditt bruker mørk modus (f.eks. Windows Nattmodus, macOS Dark Mode), vises LexicoWeb automatisk i mørk modus.
Hvis operativsystemet ditt bruker lys modus, vises LexicoWeb i lys modus.
Endrer du systeminnstillingen mens LexicoWeb er åpent, kan du laste siden på nytt for å oppdatere utseendet.

Tips: I Windows 10/11 finner du innstillingen under Innstillinger → Tilpasning → Farger → Velg modus. På macOS finner du den under Systemvalg → Utseende.

Manuell toggle

Du kan når som helst bytte mellom lys og mørk modus manuelt, uavhengig av systeminnstillingen:

Finn tema-ikonet i topplinjen eller bunnen av sidepanelet. Ikonet viser en sol (☀️) i mørk modus og en måne (🌙) i lys modus.
Klikk på ikonet for å bytte modus.
Endringen skjer umiddelbart – hele grensesnittet oppdateres uten at siden lastes på nytt.

Ditt valg lagres i nettleserens localStorage, slik at systemet husker preferansen din neste gang du besøker LexicoWeb. Det manuelle valget overstyrer den automatiske systemdeteksjonen.

Teknisk: Slik fungerer det

For utviklere og teknisk interesserte: Temaet styres via et data-theme-attributt på HTML-elementet. Du kan sjekke eller bytte tema programmatisk:

Bytt tema: window.LexicoWeb.toggleTheme()
Sjekk gjeldende tema: document.documentElement.getAttribute('data-theme') returnerer 'light' eller 'dark'

Farger og design

LexicoWeb bruker CSS-variabler (custom properties) for alle farger i grensesnittet. Dette sikrer at alle elementer tilpasses korrekt når du bytter modus:

Element	Lys modus	Mørk modus
Bakgrunn	Hvit / lys grå	Mørk grå / nesten sort
Tekst	Mørk grå / sort	Lys grå / hvit
Kort og paneler	Hvit med lett skygge	Mørk grå med subtil kant
Aksentfarger	Blå og teal	Lysere blå og teal
Lenker	Blå	Lys blå
Varselbokser	Standardfarger	Dempede toner

Tips: Alle fargekombinasjoner i både lys og mørk modus oppfyller WCAG 2.1 AA-kravet om minimum 4.5:1 kontrastforhold for tekst, slik at innholdet er lett å lese for alle.

Tilgjengelighet

LexicoWeb er bygget med tilgjengelighet i fokus og følger WCAG 2.1 AA-standarden. Dette gjelder også tema-funksjonaliteten:

Kontrastkrav – Alle tekst- og bakgrunnskombinasjoner oppfyller minimum 4.5:1 kontrastforhold i begge moduser. Stor tekst (18px+ fet eller 24px+ normal) oppfyller minimum 3:1.
Fokusindikatorer – Alle interaktive elementer, inkludert tema-knappen, har synlige fokusringer som fungerer i begge moduser.
Tastaturnavigasjon – Du kan bruke Tab-tasten for å navigere til tema-knappen og Enter for å bytte modus.
Skjermleserstøtte – Tema-knappen har en aria-label som beskriver gjeldende modus og handling.

Redusert bevegelse

LexicoWeb respekterer innstillingen prefers-reduced-motion fra operativsystemet ditt. Når denne er aktivert:

Alle animasjoner dempes eller fjernes helt.
Overganger mellom lys og mørk modus skjer umiddelbart i stedet for med en gradvis overgang.
Scroll-animasjoner (fade-in, slide osv.) er deaktivert – alt innhold vises direkte.
Animerte tellere på forsiden viser sluttverdien umiddelbart uten opptelling.

Tips: I Windows aktiverer du redusert bevegelse under Innstillinger → Tilgjengelighet → Visuelle effekter → Animasjonseffekter. På macOS finner du det under Systemvalg → Tilgjengelighet → Skjerm → Reduser bevegelse.

OBS: Hvis mørk modus ikke ser riktig ut, prøv å tømme nettleserens hurtigbuffer (Ctrl+Shift+Delete) og last siden på nytt. Eldre nettlesere som Internet Explorer støtter ikke CSS custom properties og vil vise lys modus uavhengig av innstilling.