{"id":18745,"date":"2021-01-14T15:00:37","date_gmt":"2021-01-14T14:00:37","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=18745"},"modified":"2021-01-20T11:24:03","modified_gmt":"2021-01-20T10:24:03","slug":"how-to-enable-wordpress-dark-mode","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-enable-wordpress-dark-mode\/","title":{"rendered":"How to Enable Dark Mode on Your WordPress Website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Dark mode is used to reduce the amount of white light from the screen. Some devices, as well as apps and software, come with a dark mode toggle, and adding dark mode to your WordPress website will be appreciated by users who prefer this setting. But what is dark mode, exactly, and how can you add it to your WordPress website? This is what we\u2019ll be discussing in this article.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-dark-mode\">What Is Dark Mode and When Is It Used?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#enable-dark-mode-on-wp-website\">How to Enable Dark Mode on Your WordPress Website<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#enable-dark-mode-on-wp-dashboard-interface\">How to Enable Dark Mode on Your WordPress Dashboard Interface<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-dark-mode\"><\/a>What Is Dark Mode and When Is It Used?<\/h2>\n<p>[\/vc_column_text][vc_column_text]Computer users who work late at night might find it <strong>a strain on the eyes to look at a bright screen<\/strong> for longer periods of time. Dark mode is a setting or a feature of devices, applications, or websites, which <strong>reduces the amount of bright light<\/strong> coming from the screen. It works, in the case of websites, by <strong>changing the colour<\/strong> of the elements of a website\u2019s layout <strong>from light to dark<\/strong>, which makes looking at a screen less of a strain on the user\u2019s eyes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Some devices, as we have said, come with dark in-built mode. Some devices also have night mode, which is a little different. <strong>Dark mode uses dark colours for the background of a website<\/strong>, while night mode replaces colder tones with warmer ones, reducing the amount of blue light emitted. Some studies have shown that <a href=\"https:\/\/www.health.harvard.edu\/staying-healthy\/blue-light-has-a-dark-side\" target=\"_blank\" rel=\"noopener\">blue light can have adverse effects on one\u2019s health<\/a>, which is why many users prefer to avoid it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Dark mode, therefore, is <strong>a matter of preference for a large number of users<\/strong>. Since WordPress doesn\u2019t come with a dark mode toggle by default, how can you enable it for your website?[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"enable-dark-mode-on-wp-website\"><\/a>How to Enable Dark Mode on Your WordPress Website<\/h2>\n<p>[\/vc_column_text][vc_column_text]As always, our first suggestion is to look to a professionally developed theme for a solution. If you are looking for a <a href=\"https:\/\/qodeinteractive.com\/theme-style\/dark-wordpress-themes\/\">dark WordPress theme<\/a>, instead of a dark mode, there is no shortage of them.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you are looking for a way to <strong>allow your visitors to toggle between light and dark modes<\/strong> of your website, you are going to need a plugin. We suggest <a href=\"https:\/\/wordpress.org\/plugins\/wp-dark-mode\/\" target=\"_blank\" rel=\"noopener\">WP Dark Mode<\/a>, and we will be showing you how to use it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you install and activate the plugin, you will automatically be redirected to its settings page. If you want to find this settings page later, you will find it in your WordPress dashboard, under <strong>Settings\/WP Dark Mode<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The setup is about as easy as it gets. In the <strong>General Settings<\/strong> tab, you will find that <strong>Enable Frontend Darkmode, Show Floating Switch<\/strong>, and <strong>Enable OS aware Dark Mode<\/strong> controls have been switched on. The first setting simply enables dark mode for your users. The floating switch means that your visitors will see a dark mode toggle when they access your website, and the OS-aware dark mode means that, if the user\u2019s preferred setting is dark mode, the site will appear in dark mode for them.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"606\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/General-Settings.jpg\" class=\"attachment-full size-full\" alt=\"General Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/General-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/General-Settings-300x188.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/General-Settings-768x480.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/General-Settings-620x388.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]But if you want to insert the switch manually, you have three solutions at your disposal. You can, for instance, add a switch to a post or page as a Gutenberg block, as an Elementor element, or as a shortcode. Elementor elements work more or less the same as Gutenberg blocks (simply drag and drop the Dark Mode Switch element where you want it from the left-hand side menu). We also have an <a href=\"https:\/\/qodeinteractive.com\/magazine\/what-are-wordpress-shortcodes\/\">in-depth tutorial on shortcodes<\/a> on your website in case you prefer using them to either Gutenberg blocks or elements.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will show you how to place a switch into a post using a Gutenberg block. Simply click the <strong>plus<\/strong> sign while editing a post, and find the <strong>Dark Mode Switch<\/strong> block.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Block.jpg\" class=\"attachment-full size-full\" alt=\"Dark Mode Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We have placed our switch at the end of the post and on the far right. You can, of course, place yours wherever you like it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Block-Added.jpg\" class=\"attachment-full size-full\" alt=\"Block Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Block-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Block-Added-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Block-Added-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Block-Added-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s really it. Your visitors will now see the dark mode switch where you\u2019ve placed it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Dark Mode Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Clicking on it will automatically switch on the dark mode for your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Preview-2.jpg\" class=\"attachment-full size-full\" alt=\"Dark Mode Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Preview-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Preview-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Preview-2-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Dark-Mode-Preview-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This plugin offers many more styling options for your dark mode switch, but these are limited in the free version of the plugin. If the aesthetics of your controls are important to you, you might want to invest in the pro version of the plugin.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"enable-dark-mode-on-wp-dashboard-interface\"><\/a>How to Enable Dark Mode for Your WordPress Dashboard Interface<\/h2>\n<p>[\/vc_column_text][vc_column_text]But what if the users whose eyes you wish to spare from the strain of bright colours are your admins? With WP Dark Mode, you can also introduce a dark mode switch to your WordPress dashboard.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the general settings, find the <strong>Enable Backend Darkmode<\/strong> toggle, switch it on, and <strong>Save<\/strong> your settings.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You will find a<em> light\/dark<\/em> switch at the top of the screen. Your admins will now have the ability to turn on the dark mode at will.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"701\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Admin-Dark.jpg\" class=\"attachment-full size-full\" alt=\"Admin Dark\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Admin-Dark.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Admin-Dark-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Admin-Dark-768x556.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Admin-Dark-620x449.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And your contributing staff and admins can now use the website in dark mode, just the same as your visitors.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"528\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Backend-Dark-Mode.jpg\" class=\"attachment-full size-full\" alt=\"Backend Dark Mode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Backend-Dark-Mode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Backend-Dark-Mode-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Backend-Dark-Mode-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Backend-Dark-Mode-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you have seen, setting up a dark mode switch for your website is easy and free with one simple plugin. If you are looking to enable your visitors to access your website in dark mode and protect them from eye strain, or if you feel your administrators and contributing staff would like the choice of working in dark mode, this is how you can do it.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Want to enable dark mode on your WordPress website and reduce eye strain for your users? We will show you how!<\/p>\n","protected":false},"author":16990,"featured_media":18844,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,39,13],"class_list":["post-18745","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-tools","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/18745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=18745"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/18745\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/18844"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=18745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=18745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=18745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}