Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här lägger du till mörkt läge på din WordPress-webbplats (enkelt sätt)

Många användare föredrar att använda mörkt läge på sina enheter och webbläsare, särskilt när de surfar på en webbplats på natten eller i miljöer med svagt ljus. Därför kan aktivering av mörkt läge på din webbplats bidra till att minska belastningen på ögonen och skapa en bekvämare tittarupplevelse, vilket gör din webbplats mer användarvänlig för dessa besökare.

Genom att lägga till mörkt läge i WordPress kommer din webbplats att anpassas automatiskt baserat på besökarens webbläsarinställningar. Du kan också lägga till en toggle för mörkt läge så att besökarna enkelt kan växla mellan mörkt och ljust läge.

I den här artikeln visar vi hur du enkelt kan add to dark mode till din WordPress website.

How to add dark mode to your WordPress website

Vad är Dark Mode och varför ska du add to det på din website?

Många mobila enheter och datorer använder mörkt läge för att minimera mängden vitt ljus som kommer från vyn. Detta kan minska ansträngningen för ögonen, särskilt i svagt ljus.

Vissa tror till och med att det allow you att använda datorer och mobila devices sent på kvällen utan att det vita och blå ljuset förstör din sömn.

Vissa enheter har ett built-in nattläge som helt enkelt använder varmare färgtoner. Men mörkt läge lägger faktiskt till mörka färger i enhetens bakgrund.

Vissa populära webbplatser som YouTube erbjuder ett inbyggt mörkt färgschema.

YouTube's dark mode

På stationära datorer kan du besöka websites i mörkt läge med hjälp av en utökning till Chrome, till exempel Night Eye.

Så här ser WPBeginners website ut med den utökningen:

An example of a website, with dark mode enabled

Genom att lägga till en toggle för mörkt läge på din website kan användarna välja det läge de föredrar utan att behöva installera en särskild utökning av webbläsaren.

Du kan även add to dark mode till din WordPress admin area. Detta kan vara användbart om du arbetar på din site på natten eller om du lider av ansträngda ögon.

Med detta i åtanke ska vi nu se hur du kan lägga till mörkt läge i din webbplats frontend som vänder sig till allmänheten och i obszar administracyjny på din WordPress-webbplats.

Tips: Vill du använda ett mörkt färgschema även när besökarens device är i normal- eller dagsljusläge? Kontrollera då vår lista över de bästa mörka themes för WordPress.

Så här addar du Dark Mode till din website i WordPress

Det enklaste sättet att skapa ett mörkt läge för din webbplats är att använda WP Dark Mode. Detta plugin lägger till en växling så att besökare kan aktivera mörkt läge på din webbplats. Det kan även lägga till en växling i obszar administracyjny, så att du kan aktivera mörkt läge för WordPress kokpit.

Du kan lära dig mer om pluginet i vår detaljerade WP Dark Mode review.

Först måste du installera och aktivera det kostnadsfria WP Dark Mode-pluginet. För mer information, se vår przewodnik om hur du installerar ett WordPress-plugin.

Vid aktivering, besök WP Dark Mode ” Inställningar-sidan från WordPress kokpit och växla reglaget ”Aktivera Frontend Dark Mode” till ”ON”.

När du har gjort det kan du också välja ett standardläge för din websites front-end. Efter det klickar du på knappen ”Save Changes” för att store dina inställningar.

Enable frontend dark mode

Gå sedan till kartan ”Customization”, där du kan anpassa brytarens layout, storlek och position.

Du kan också ändra färgen på dark mode-omkopplaren, men du behöver pro-versionen av plugin-programmet för det.

Customize the dark mode switch

När du är klar klickar du bara på knappen ”Spara ändringar” för att lagra dina inställningar. Nu kan du besöka din WordPress-webbplats för att se hur det mörka läget fungerar i działanie.

If you view the mobile version of your website, then you’ll see that the dark mode works on smartphones and tablets, too.

Website dark mode preview

Lägga till mörkt läge till ditt WordPress admin area

Du kan ändra färgschemat för admin i WordPress med hjälp av de built-in settings. Inget av standard färgscheman minskar dock det vita ljus som kommer från vyn.

Om du arbetar sent på kvällen eller lider av ansträngda ögon kan du försöka lägga till ett mörkt läge i WordPress admin area och Block Editor.

För att göra det, besök WP Dark Mode ” Settings page och växla till ”Adminpanel Dark Mode” tabs från den vänstra kolumnen.

Här togglar du omkopplaren för alternativet ”Aktivera Admin Dashboard Dark Mode” till ”ON” och klickar på knappen ”Save Changes”.

Add dark mode in the WordPress dashboard

När du har gjort det kommer du att notera att knappen för mörkt läge har varit högst upp på din WordPress dashboard.

Härifrån kan du toggla omkopplaren för att aktivera det här läget när du gillar det.

Toggle the dark mode switch in WordPress dashboard

Om du vill add to ett mörkt läge även för Block Editor måste du toggle omkopplaren ”Block Editor Dark Mode” till ”ON”.

Klicka sedan på knappen ”Save Changes”.

Enable dark mode for the block editor

Öppna nu en sida eller ett inlägg i innehållsredigeraren. Du kommer att märka en ikon för mörkt läge högst upp. Klicka på den för att expandera kartan och välj alternativet ”Mörkt läge”.

Så här ser din Block Editor ut i mörkt läge.

Block editor dark mode preview

Video Tutorial

Subscribe to WPBeginner

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till mörkt läge på din WordPress-webbplats. Du kanske också vill se vår przewodnik om hur du väljer ett perfekt färgschema för din WordPress-webbplats eller se våra expertval för de bästa WordPress-temabyggarna för att anpassa din webbplats.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

18 kommentarerLämna ett svar

  1. Oreofe Oyebamiji

    Great info. I really love the plug-in and easy to use

    • WPBeginner Support

      Glad you found it helpful!

      Administratör

  2. Kurt

    I generally prefer dark modes in apps that support it. Thank you for this great tip.

    • WPBeginner Support

      Glad we could share this option :)

      Administratör

  3. Iponk

    wow…nice info, thanks

    • WPBeginner Support

      You’re welcome, glad our guide was helpful :)

      Administratör

  4. Agung

    This is wonderful. Thanks I’ll try it!

    • WPBeginner Support

      Glad our guide was helpful :)

      Administratör

  5. Bryan Durio

    This is a fantastic plugin to save people’s eyes. I’ve used dark color schemes in Windows for years and now I can add it to my WP site. I appreciate your explanation of a few of its options. Thank you profusely!

    • WPBeginner Support

      Glad you found our guide helpful :)

      Administratör

  6. Richard hickman

    What does this feature do to Accessibility requirements?

    • WPBeginner Support

      It would depend on the specific accessibility requirements you are attempting to comply with for if this does anything or not.

      Administratör

  7. Richard Mayowa

    It is just too awesome possibility

    • WPBeginner Support

      Glad you like the available option :)

      Administratör

  8. Jennifer C. Valerie

    This is awesome. Thanks!

    • WPBeginner Support

      You’re welcome :)

      Administratör

  9. Adarsh Gupta

    Wow Amazing.
    I haven’t know about the Dark mode. But it’s so easy to add dark mode in WordPress
    Thanks for Great Explained

    • WPBeginner Support

      You’re welcome, glad our guide was helpful :)

      Administratör

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.