{"id":9102,"date":"2021-03-19T11:16:50","date_gmt":"2021-03-19T10:16:50","guid":{"rendered":"http:\/\/wpprovider.nl\/kennisbank\/?post_type=kb&#038;p=9102"},"modified":"2024-10-03T05:41:47","modified_gmt":"2024-10-03T04:41:47","slug":"hoe-schakel-je-darkmodus-in-voor-wordpress","status":"publish","type":"kb","link":"https:\/\/wpprovider.nl\/kennisbank\/wordpress\/hoe-schakel-je-darkmodus-in-voor-wordpress\/","title":{"rendered":"Hoe schakel je darkmodus in voor WordPress?"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to enable darkmode for WordPress\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/aZOQcAicq-g?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Veel apparaten hebben nu native ondersteuning voor de donkere modus. Door een donkere modus aan jouw website toe te voegen, wordt jouw ontwerp automatisch aangepast aan de browservoorkeur van jouw gebruikers. Je kunt zelfs een schakelaar voor de donkere modus aan je website toevoegen.<\/p>\n\n\n\n<p>In dit artikel laten we je zien hoe je eenvoudig een donkere modus kunt toevoegen aan jouw WordPress website, zowel frontend als admin gedeelte.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wat is dark modus en waarom zou je darkmodus toevoegen op jouw website?<\/h2>\n\n\n\n<p>De donkere modus wordt gebruikt op mobiele apparaten en computers om de hoeveelheid wit licht van het scherm te verminderen. Sommige apparaten hebben een nachtmodus die in plaats daarvan warmere kleurtinten gebruikt. De donkere modus gebruikt een andere benadering door donkere kleuren toe te voegen op de achtergrond.<\/p>\n\n\n\n<p>Als je een iPhone of Android-toestel hebt, kun je met een schakelaar overschakelen naar de donkere modus.<\/p>\n\n\n\n<p>Op je computer kun je websites ook in de donkere modus bekijken met een Chrome-extensie zoals Night Eye. Hier zie je hoe de WPProvider website eruit ziet met die extensie:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"http:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-75-1024x415.png\" alt=\"\" class=\"wp-image-9106\" style=\"width:768px;height:311px\" width=\"768\" height=\"311\" srcset=\"https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-75-1024x415.png 1024w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-75-300x122.png 300w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-75-768x311.png 768w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-75-1536x622.png 1536w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-75.png 1864w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>Het toevoegen van een donkere modus aan jouw site geeft gebruikers de mogelijkheid om de donkere modus aan en uit te zetten terwijl ze jouw site bekijken. Het geeft je ook meer controle over hoe je site eruit ziet in de donkere modus. Populaire websites zoals YouTube bieden ook een donker kleurenschema. Dit stelt gebruikers in staat om &#8217;s avonds laat video&#8217;s te bekijken met een meer comfortabele kijkervaring.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"http:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-77-1024x565.png\" alt=\"\" class=\"wp-image-9108\" style=\"width:768px;height:424px\" width=\"768\" height=\"424\" srcset=\"https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-77-1024x565.png 1024w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-77-300x166.png 300w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-77-768x424.png 768w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-77.png 1383w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>Naast het toevoegen van een donkere modus aan de voorkant van jouw website, kan je ook een donkere modus toevoegen aan jouw WordPress admin. Dit kan handig zijn als je &#8217;s avonds of &#8217;s nachts aan jouw site werkt.<\/p>\n\n\n\n<p>Eerst gaan we kijken naar het toevoegen van de donkere modus aan jouw WordPress website. Daarna behandelen we het toevoegen van de donkere modus aan je WordPress admin dashboard.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Donkere modus toevoegen aan uw WordPress website<\/h2>\n\n\n\n<p>Eerst moet je de WP Dark Mode plugin installeren en activeren. Voor meer details, zie onze stap voor stap handleiding over <strong><a href=\"http:\/\/wpprovider.nl\/kennisbank\/kennisbank\/hoe-voeg-ik-een-plugin-toe\/\">het installeren van een WordPress plugin<\/a><\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"http:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-78.png\" alt=\"\" class=\"wp-image-9109\" style=\"width:768px;height:424px\" width=\"768\" height=\"424\"\/><\/figure>\n\n\n\n<p>Na activering, ga naar de Instellingen &#8220;WP Donkere modus pagina in jouw WordPress admin en klik op de Algemene Instellingen tab. Je zou daar automatisch naartoe moeten worden doorverwezen.<\/p>\n\n\n\n<p>Hier is de instelling &#8216;Enable OS aware Dark Mode&#8217; voor jou aangezet. Dit betekent dat bezoekers automatisch de donkere modus versie van uw site te zien krijgen wanneer hun apparaat is ingesteld op de donkere modus.<\/p>\n\n\n\n<p>De instelling &#8216;Toon zwevende schakelaar&#8217; is ook ingeschakeld. Dit betekent dat gebruikers hun weergave van de site op elk moment naar de donkere modus kunnen overschakelen, zelfs als ze geen optie voor de donkere modus op hun apparaat hebben ingeschakeld.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-80-1024x350.png\" alt=\"\" class=\"wp-image-9111\" style=\"width:768px;height:263px\" width=\"768\" height=\"263\" srcset=\"https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-80-1024x350.png 1024w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-80-300x102.png 300w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-80-768x262.png 768w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-80-1536x525.png 1536w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-80.png 1859w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>Bezoek nu je website, en je ziet de schakelaar in de rechterbenedenhoek. Klik erop om jouw site direct in de donkere modus te zetten op jouw apparaat:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-83-1024x486.png\" alt=\"\" class=\"wp-image-9114\" style=\"width:768px;height:365px\" width=\"768\" height=\"365\" srcset=\"https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-83-1024x486.png 1024w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-83-300x142.png 300w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-83-768x365.png 768w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-83-1536x730.png 1536w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-83.png 1897w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>Er zijn meer aanpassings opties beschikbaar op de Instellingen <strong>WP Dark Modus<\/strong>. Echter, deze zijn vrij beperkt met de gratis plugin.<\/p>\n\n\n\n<p>Bijvoorbeeld, je hoeft alleen maar te klikken op de <strong>Switch-Settings<\/strong> tab om de stijl van de <strong>Floating Switch Style<\/strong> te wijzigen:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-87-1024x638.png\" alt=\"\" class=\"wp-image-9118\" style=\"width:768px;height:479px\" width=\"768\" height=\"479\" srcset=\"https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-87-1024x638.png 1024w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-87-300x187.png 300w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-87-768x479.png 768w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-87.png 1317w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>Je kunt de kleuren van de donkere modus ook aanpassen via het tabblad <strong>Color Settings<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-86.png\" alt=\"\" class=\"wp-image-9117\" style=\"width:768px;height:535px\" width=\"768\" height=\"535\"\/><\/figure>\n\n\n\n<p>Zorg ervoor dat je op de knop Instellingen <strong>opslaan<\/strong> klikt nadat je wijzigingen hebt aangebracht.<\/p>\n\n\n\n<p><strong>Opmerking:<\/strong> Met de gratis versie van WP Donkere Modus, krijg je alleen de eerste 2 zwevende schakelstijlen, en de eerste 2 kleur presets om uit te kiezen.<\/p>\n\n\n\n<p>De pro versie van WP Donkere Modus biedt veel meer ontwerp opties, plus de mogelijkheid om de donkere modus aan te zetten op specifieke tijden en de optie om aangepaste CSS code toe te voegen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Donkere modus toevoegen aan jouw WordPress Admin<\/h2>\n\n\n\n<p>WordPress komt met admin kleurenschema&#8217;s, maar geen van de standaard kleurenschema&#8217;s verminderen het witte licht dat van je scherm komt. Gelukkig lost deze plugin ook dat probleem op. Laten we eens kijken hoe je eenvoudig een donkere modus kunt toevoegen aan jouw WordPress admin gedeelte voor een aangenamere gebruikerservaring tijdens late uren.<\/p>\n\n\n\n<p>Ga naar de Instellingen<strong> WP Donkere Modus<\/strong> en klik op het tabblad Algemene Instellingen. Schakel vervolgens de schakelaar <strong>Enable Backend Darkmode<\/strong> in de stand &#8216;on&#8217;. Vergeet niet om op de knop <strong>Save Settings<\/strong> te klikken onderaan de pagina:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"http:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/1-3.png\" alt=\"\" class=\"wp-image-9122\" style=\"width:768px\" width=\"768\" srcset=\"https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/1-3.png 550w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/1-3-300x167.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<p>Je zult nu een nieuwe schakelaar zien in de bovenste balk van jouw beheerdersgedeelte:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"http:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-88.png\" alt=\"\" class=\"wp-image-9123\" style=\"width:768px\" width=\"768\" srcset=\"https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-88.png 550w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/image-88-300x166.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<p>Klik op deze schakelaar om jouw admin gedeelte in de donkere modus te zetten.<\/p>\n\n\n<div class=\"mkb-shortcode-container\">        <div class=\"mkb-tip\">\n            <div class=\"mkb-tip__icon\">\n                <i class=\"fa fa-lightbulb-o fa-lg\"><\/i>\n            <\/div>\n            <div class=\"mkb-tip__content\">\n                Als uw site meerdere WordPress gebruikers heeft, kan elke persoon de donkere modus naar eigen wens in- en uitschakelen.            <\/div>\n        <\/div>\n        <\/div>\n\n\n<p>Aangezien &#8216;Donkere modus&#8217; geen admin kleurenschema is, kan je het eenvoudig samen met een bestaand WordPress admin kleurenschema gebruiken. Om dit in te stellen, ga je naar Gebruikers &#8221; Profiel en klik je op een optie onder Admin kleurenschema.<\/p>\n\n\n\n<p>Merk op dat je de donkere modus moet uitschakelen om de admin kleurenschema opties te zien:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"http:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/2.png\" alt=\"\" class=\"wp-image-9124\" style=\"width:768px\" width=\"768\" srcset=\"https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/2.png 550w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/2-300x186.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<p>Wanneer je een bericht schrijft in de WordPress blok editor, kan je de donkere modus ook inschakelen. Klik op het kleine kleurenpictogram linksboven, en selecteer dan de modus die je wilt gebruiken:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"http:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/3-2.png\" alt=\"\" class=\"wp-image-9125\" style=\"width:768px\" width=\"768\" srcset=\"https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/3-2.png 550w, https:\/\/wpprovider.nl\/kennisbank\/wp-content\/uploads\/2021\/03\/3-2-300x165.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<p>Nu kan je &#8217;s nachts comfortabel op jouw website schrijven en werken zonder jouw ogen te belasten.<\/p>\n\n\n\n<p>We hopen dat dit artikel je heeft geholpen te leren hoe je de donkere modus aan jouw WordPress website kunt toevoegen.<\/p>\n\n\n\n<p><strong>Heb je meer hulp nodig?<\/strong><br>Heb je vragen omtrent dit artikel of over onze dienstverlening? Neem dan contact met ons op.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Veel apparaten hebben nu native ondersteuning voor de donkere modus. Door een donkere modus aan jouw website toe te voegen, wordt jouw ontwerp automatisch aangepast aan de browservoorkeur van jouw gebruikers. Je kunt zelfs een schakelaar voor de donkere modus aan je website toevoegen. In dit artikel laten we je zien hoe je eenvoudig een [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"kbtopic":[55],"kbtag":[],"class_list":["post-9102","kb","type-kb","status-publish","hentry","kbtopic-tips-tricks"],"_links":{"self":[{"href":"https:\/\/wpprovider.nl\/kennisbank\/wp-json\/wp\/v2\/kb\/9102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpprovider.nl\/kennisbank\/wp-json\/wp\/v2\/kb"}],"about":[{"href":"https:\/\/wpprovider.nl\/kennisbank\/wp-json\/wp\/v2\/types\/kb"}],"author":[{"embeddable":true,"href":"https:\/\/wpprovider.nl\/kennisbank\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpprovider.nl\/kennisbank\/wp-json\/wp\/v2\/comments?post=9102"}],"version-history":[{"count":7,"href":"https:\/\/wpprovider.nl\/kennisbank\/wp-json\/wp\/v2\/kb\/9102\/revisions"}],"predecessor-version":[{"id":9966,"href":"https:\/\/wpprovider.nl\/kennisbank\/wp-json\/wp\/v2\/kb\/9102\/revisions\/9966"}],"wp:attachment":[{"href":"https:\/\/wpprovider.nl\/kennisbank\/wp-json\/wp\/v2\/media?parent=9102"}],"wp:term":[{"taxonomy":"kbtopic","embeddable":true,"href":"https:\/\/wpprovider.nl\/kennisbank\/wp-json\/wp\/v2\/kbtopic?post=9102"},{"taxonomy":"kbtag","embeddable":true,"href":"https:\/\/wpprovider.nl\/kennisbank\/wp-json\/wp\/v2\/kbtag?post=9102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}