Hoppa till innehållet

Mörkt läge för hela webbplatsen

Dark Mode

Dark Mode ger hela webbplatsen ett mörkt läge med Datodens egen motor – med knapp, efter systemet och i adminpanelen. Pro gör det ditt eget.

  • Gratis att använda
  • Fungerar fullt ut utan Pro
  • Pronär du vill ha mer

I WordPress heter tillägget Datoden Dark Mode – i menyn DT-addons står det som DT-darkmode.

Mörkt läge och kontrastrapportSamma sida i ljust och mörkt läge med knappen för att byta, och en kontrastrapport som mäter texterna i båda lägena.Ljust lägeMörkt lägeFölj systemLjust lägeMörkt lägeKontrastrapportProLjust läge: 46 av 46Mörkt läge: 45 av 46En text att se över: sidfotens länkarMörk inloggningssidaPro
Mörkt läge för hela webbplatsen – med Pro även inloggningssidan, egen meny och färg, och en kontrastrapport.

Så fungerar Dark Mode

DT-darkmode ger webbplatsen ett mörkt och ett ljust läge. Tilläggets egen motor läser temats stilmallar och räknar fram en mörk version av färgerna – inget laddas från andra servrar. En rund knapp i sidans hörn låter besökaren välja Följ system, Ljust läge eller Mörkt läge.

Knapp för besökaren

En rund knapp nere till höger eller nere till vänster öppnar valen Följ system, Ljust läge och Mörkt läge. Valet sparas i besökarens webbläsare och används vid nästa besök. Knappen kan stängas av under Knapp.

Standardläge

Under Standardläge väljer du vad som gäller tills besökaren väljer själv: Följ system (inställningen i besökarens enhet), Ljust läge eller Mörkt läge redan vid första besöket.

Färgerna räknas om, märket behålls

Motorn gör om temats färger, även hover-lägen, CSS-variabler och färger som står direkt i sidan. Märkesfärger som färgade knappar behålls, bilder och videor ändras inte och små mörka ikoner blir ljusa. Vill du att en del av sidan ska vara som den är lägger du attributet data-dt-dark-ignore på elementet.

Ingen blinkning

Läget sätts innan sidan ritas upp, så sidan visas aldrig först i fel läge. Cachen i vanliga cachetillägg töms automatiskt när du sparar inställningarna.

Mörk adminpanel

Med Även i adminpanelen får WordPress adminpanel samma knapp och samma läge som webbplatsen. Valet delas mellan adminpanelen och webbplatsen.

Mörk inloggningssida Pro

Inloggningssidan följer samma läge som adminpanelen och får knappen. Logga in-knappen behåller sin blå färg och länkarna görs lätta att läsa.

Kontrastrapport Pro

Under inställningarna skriver du in en sida på webbplatsen och klickar Kontrollera kontrasten. Sidan läses i ljust och mörkt läge och varje text mäts mot bakgrunden enligt WCAG 2.1 (4,5:1, eller 3:1 för stor text). Allt körs i din webbläsare och texter som är svåra att läsa listas.

Egen meny, färg och texter Pro

Lägg en CSS-klass som dt-colormode-toggle på ett menyval så byter det läge i stället för knappen. Under Accentfärg väljer du knappens färg och under Texter på knappen ändrar du texterna per språk – färdiga texter finns för tio språk.

Så ser det ut

Allt utan Pro-märkning fungerar gratis. Det som är märkt Pro ingår i Pro-versionen.

Mörk inloggningssidaInloggningssidan på example.se med knappen för att byta läge nere till höger, och en lista över vad som följer med: samma läge som adminpanelen, knappen, den blå Logga in-knappen och lättlästa länkar.example.se/wp-login.phpLogga inAnvändarnamn eller e-postadressanna@example.seLösenord••••••••••Logga inGlömt ditt lösenord?InloggningssidanProFöljer adminpanelenKnappen för att byta lägeLogga in förblir blåLänkarna är lätta att läsaÄven i adminpanelenSamma knapp i adminpanelen.Valet delas med webbplatsen.
Hela vägen i samma läge – med Pro följer även inloggningssidan adminpanelen, med knappen och lättlästa länkar.
Kontrastrapport för en sidaKontrastrapporten för sidan Om oss: alla texter är lätta att läsa i ljust läge, och i mörkt läge listas två texter med uppmätt kontrast och kravet enligt WCAG 2.1.KontrastrapportProexample.se/om-oss/Kontrollera kontrastenLjust lägeAlla 48 texter är lätta att läsaMörkt läge2 av 48 texter är svåra att läsaTextKontrastKravÖppet mån–fre 8–173,1:14,5:1© 2026 Example AB · Integritet2,8:14,5:1Krav enligt WCAG 2.1: 4,5:1 för vanlig text, 3:1 för stor text.
Se vilka texter som är svåra att läsa – med Pro mäts varje text i ljust och mörkt läge, direkt i webbläsaren.
Eget menyval och egen färgEn webbplats meny där menyvalet Mörkt läge byter läge med CSS-klassen dt-colormode-toggle, listan med de fyra klasserna och valet av accentfärg för knappens meny.Menyval och färgProTjänsterOm ossKontaktMörkt lägeMenyval som byter lägedt-colormode-toggleväxlar mellan mörkt och ljustdt-colormode-darkmörkt lägedt-colormode-lightljust lägedt-colormode-systemfölj systemAccentfärgRam och markering i menynFölj systemLjust lägeMörkt läge
Byt läge från menyn i stället för knappen – med Pro ett eget menyval och en accentfärg som passar webbplatsen.
Knapp, standardläge och texterStandardläget Följ system med Ljust läge och Mörkt läge, knappen nere till höger, och egna texter på knappen per språk.Knapp och standardlägeStandardlägeFölj systemFöljer inställningen i besökarens enhet.Ljust lägeWebbplatsen som den är gjord.Mörkt lägeMörkt redan vid första besöket.KnappNere till vänsterNere till högerTexter på knappenProSVENFölj systemSom enhetenLjust lägeLjustMörkt lägeMörkt
Besökaren väljer själv med knappen – med Pro egna texter på knappen för varje språk.

Kom igång

Efter installationen – så ställer du in Dark Mode.

  1. Öppna inställningarna

    Gå till DT-addons → DT-darkmode i WordPress-menyn. Mörkt läge är påslaget direkt efter installation och ändringar sparas automatiskt.

  2. Välj standardläge

    Under Standardläge väljer du Följ system, Ljust läge eller Mörkt läge för besökare som inte gjort något val.

  3. Placera knappen

    Under Knapp väljer du Nere till höger eller Nere till vänster, eller stänger av knappen. Förhandsvisningen visar hur det ser ut.

  4. Kontrollera webbplatsen

    Öppna webbplatsen och växla läge med knappen. Använder du ett cachetillägg som inte töms automatiskt tömmer du cachen.

Gratis och Pro

Pro byggs på gratisversionen – den är kvar som grund, med alla inställningar, och Pro lägger till resten.

Gratis

  • Mörkt läge med knapp
  • Följer systemets läge
  • Mörk adminpanel
  • Ingen blinkning vid sidladdning

Dark Mode Pro

Allt i gratisversionen, och:

  • Mörk inloggningssida
  • Kontrastrapport
  • Knappen i din egen meny
  • Egen accentfärg
  • Egna knapptexter

Priser

Välj hur många webbplatser och hur du vill köpa. Priserna är exklusive moms – momsen räknas ut i kassan.

Antal webbplatser
Ett tillägg 99 kr199 kr599 kren gång
  • Används för alltid
  • Alla uppdateringar i huvudversionen (t.ex. 1.x)
  • Rabatt på nästa huvudversion
Rekommenderas Prenumeration 83 kr166 kr249 krper månad 990 kr1 990 kr2 990 kr per år – betalas årsvis 129 kr249 kr429 krper månad
  • Alla Pro-tillägg – även nya som kommer
  • Alltid senaste versionen, nya huvudversioner ingår
  • Plus Website Guard Pro: säkra uppdateringar
  • Avsluta när du vill
Alla Pro-tillägg 1 099 kr2 199 kr4 699 kren gång
  • Alla tillägg i ett köp – mest för pengarna
  • Plus Website Guard Pro: säkra uppdateringar
  • Används för alltid
  • Alla uppdateringar i huvudversionen

* Upp till 100 webbplatser. Datoden får avsluta en prenumeration och betalar då tillbaka det som återstår av den betalda perioden.

Du loggar in på ditt Datoden-konto (eller skapar ett gratis) och betalar säkert hos Stripe med kort. Kvitto och faktura mejlas direkt.

Köp och installera Pro

Licensen följer ditt Datoden-konto – ingen nyckel att klistra in.

  1. Köp

    Köpet sparas på ditt Datoden-konto direkt när betalningen gått igenom.

  2. Ladda ner

    Hämta Pro-tillägget under Mitt konto → Mina köp → Licenser.

  3. Installera

    Släpp zip-filen på Website Guard. Pro läggs ovanpå gratisversionen – allt du redan gjort finns kvar.

  4. Anslut

    Anslut webbplatsen i Website Guard. Pro-uppdateringarna kommer sedan som vanliga WordPress-uppdateringar.

Vanliga frågor

Ändras bilder och logotyper?

Nej. Bilder och videor ändras inte och märkesfärger som färgade knappar behålls. Små mörka ikoner görs ljusa så att de syns.

Kan jag låta en del av sidan vara som den är?

Ja. Lägg attributet data-dt-dark-ignore på elementet så rör motorn det inte.

Laddas något från andra servrar?

Nej. Motorn och knappen körs från tillägget självt, utan externa anrop eller spårning.

Kommer besökarens val ihåg?

Ja. Valet sparas i besökarens webbläsare och gäller tills besökaren väljer något annat.

Fungerar det med cachetillägg?

Ja. Cachen i vanliga cachetillägg töms automatiskt när du sparar. Använder du ett annat cachetillägg tömmer du cachen själv efter ändringar.

Vad händer när en licens går ut?

Inget slutar fungera. Ett köp går aldrig ut, och när en prenumeration avslutas behåller tilläggen alla funktioner – bara uppdateringarna från Datoden slutar komma.

Vad är en huvudversion?

Den första siffran i versionen. Ett köp ger alla uppdateringar i den huvudversionen, till exempel alla 1.x. En ny huvudversion (2.0) kommer ungefär en gång om året med tydligt nya funktioner och fås med rabatt som uppgradering. I en prenumeration ingår den.

Hur räknas webbplatserna?

Webbplatser som är anslutna till ditt Datoden-konto och har ett Pro-tillägg igång, i den ordning de anslöts. Koppla bort en webbplats i Mina webbplatser för att flytta licensen till en annan.

Behöver jag en licensnyckel?

Nej. Webbplatsen ansluts till ditt Datoden-konto med Website Guard, och Datoden vet vilka uppdateringar dina licenser omfattar.

Kan jag gå tillbaka till gratisversionen?

Ja. Stäng av Pro – gratisversionen fortsätter med samma inställningar. Funktioner som bara finns i Pro stannar, men inget raderas.

Ska gratisversionen vara kvar?

Ja. Pro är en påbyggnad: gratisversionen är kvar och igång som grund och uppdateras från WordPress.org som vanligt, och Pro lägger på Pro-funktionerna. På WordPress.org heter gratisversionerna Datoden …, till exempel Datoden Dark Mode.

Ingår moms?

Priserna är exklusive moms. Momsen räknas ut i kassan efter ditt land. Företag i andra EU-länder kan ange sitt momsnummer.

Redan köpt?

Dina licenser, webbplatser och nedladdningar finns under Mitt konto → Mina köp → Licenser.