{"id":116675,"date":"2021-04-06T11:53:15","date_gmt":"2021-04-06T16:53:15","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&#038;p=116675"},"modified":"2024-10-02T15:47:54","modified_gmt":"2024-10-02T20:47:54","slug":"add-dark-mode-night-mode-wordpress-site","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/add-dark-mode-night-mode-wordpress-site\/","title":{"rendered":"Give the Eyes a Break, Add Dark Mode to Your WordPress Site"},"content":{"rendered":"\n<p>When we spend much of our time in front of screens, it\u2019s not surprising that dark mode (which is easier on the eyes) is <a href=\"http:\/\/hj.diva-portal.org\/smash\/get\/diva2:1464394\/FULLTEXT01.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">growing in popularity<\/a>. Also known as night mode, this feature can provide a number of benefits to you and your site\u2019s visitors.<\/p>\n\n\n\n<p>Fortunately, adding dark mode to your WordPress site is a relatively simple process. Not only can you adjust how your website appears to users, but you can also change the admin dashboard to a dark theme to give your own eyes a break.<\/p>\n\n\n\n<p>In this article, we\u2019ll cover what night mode is and the benefits of using it. Then we\u2019ll show you how to add WordPress dark mode to your site and enable it from the admin dashboard. Let\u2019s get started!<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">What is Dark Mode? What is Dark Mode Used for? <\/h2>\n\n\n\n<p>Dark mode is a display setting that changes a website to a light-on-dark color scheme. This adjustment cuts down on the amount of white light coming from a screen, which can reduce eye strain, especially if you\u2019re looking at the screen in the evening. People who prefer browsing in dark mode may enable the option via a setting on their devices or through extensions.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Benefits of Dark Mode Include<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Reduced white light from screens<\/li>\n\n\n\n<li>Saved energy consumption and increased battery life for devices<\/li>\n\n\n\n<li>Less strain on a person&#8217;s eyes<\/li>\n\n\n\n<li>Increased time spent on page<\/li>\n<\/ul>\n\n\n\n<p>However, as a website owner, you might consider adding a dark mode feature to your site. Installing a night mode WordPress plugin can make doing so easy, and give you a bit more control over your site\u2019s <a href=\"https:\/\/wpengine.com\/resources\/optimize-wordpress-usability\/\" target=\"_blank\" rel=\"noreferrer noopener\">appearance and usability<\/a>.<\/p>\n\n\n\n<p>Before we get started, we do want to note a minor yet technical <strong>difference between dark mode and night mode. Dark mode involves switching the User Interface (UI) background to a darker hue, whereas night mode consists of changing the color emitted from the screen.&nbsp;<\/strong><\/p>\n\n\n\n<p>Still, both can help reduce eye strain, and people often use the terms interchangeably. With that being said, let\u2019s take a look at how you can add dark mode to your WordPress site.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Dark Mode to Your WordPress Site<\/h2>\n\n\n\n<p>Now that we\u2019ve explained why you may want to add dark mode to your website, we\u2019ll show you how to add and set up this feature. While you can switch to a WordPress theme with dark mode, it\u2019s much simpler to use a plugin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install the <a href=\"https:\/\/wordpress.org\/plugins\/wp-dark-mode\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Dark Mode<\/a> Plugin<\/h3>\n\n\n\n<p>There are a number of night mode WordPress plugins available. The one we\u2019ll be using is <a href=\"https:\/\/wordpress.org\/plugins\/wp-dark-mode\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Dark Mode<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/P4qKf5KOl6mOAFfgHBYd8664fe_xJvyN_EVqsJJEGo-MUucjfv8c_SeDFKahTZdcQUEqnWXwPG2hcKIcmyDcelMj4TOXoZX2G0Z14rGQ-SJYzonludwVEedjLb-CyC1pji6Do2U8\" alt=\"WP Dark Mode plugin. WordPress dark mode\" \/><\/figure>\n\n\n\n<p>This is a freemium plugin that lets you quickly create a dark version of your website. You won\u2019t have to deal with any code or complicated settings.&nbsp;<\/p>\n\n\n\n<p>You can search for and install this tool in the <a href=\"https:\/\/wordpress.org\/plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Plugin Directory<\/a>. To get started, from your admin dashboard, navigate to <em>Plugins &gt; Add New<\/em> and search for \u201cWP Dark Mode\u201d:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/FdpfGbas8yBt3n8TPD5JOflrbh5zZcCsFCHJpxURZG2LfhibwNbkuBHETCb4MWHr5ycaEuXO34z1jJ2hxJEIHJEnC9dIpOt1k6yAMkULwX4ZEiZyo3g901k9svaAmfAc5G7H3b8c\" alt=\"WP dark mode plugin in wordpress directory. WordPress dark mode\" \/><\/figure>\n\n\n\n<p>Click on the <em>Install Now<\/em> button, followed by <em>Activate<\/em>. This will bring you to the plugin\u2019s settings page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Turn on Dark Mode<\/h3>\n\n\n\n<p>The <em>General Settings<\/em> tab is where you can toggle night mode on and off. When you first install the plugin, you\u2019ll see that <em>Enable Frontend Dark Mode <\/em>and <em>Enable OS Aware Dark Mode<\/em> are switched on by default:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/ukUrh8dakzAmlIYwlXuzlZpvPCePPhqx7ZLm9TifLHIfDla5nPId3uS8VTz8hfDDY7NgVTVwlzWx9ZKxbp4L28dVU4gddlr8ZRMGoCiuW1YdmLcD9naY-svMU4_HvYcD7JzjfVA_\" alt=\"toggling on dark mode within app settings. WordPress dark mode\" \/><\/figure>\n\n\n\n<p><em>Enable Frontend Dark Mode <\/em>simply means that dark mode is enabled for your WordPress site. Users will be able to flip a switch to turn on the darker color scheme. <em>Enable OS Aware Dark Mode<\/em> means that if a visitor has set their device to dark mode, they will automatically see your website\u2019s dark version.<\/p>\n\n\n\n<p>You might also want to make dark mode the default setting for your website. You can toggle this on from the settings menu and see how you like it. Note that visitors will still be able to turn off dark mode using the switcher button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Enable the Floating Switch<\/h3>\n\n\n\n<p>Next, in <em>General Settings<\/em>, you can toggle on the <em>Show Floating Switch<\/em> option. Doing so will place a button on the front end of your website, so that users can turn dark mode on or off as they prefer.&nbsp;<\/p>\n\n\n\n<p>Below is an example of how the dark mode button would look on the front end of a website, placed in the bottom right-hand corner:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/1lTqp-Mz2C0GVQIxHmGwwhHMXfetRITbDP6Ni6I8nl21UNMsZI_e0KEo2Zshgn8jzrwg89Se6zYw_YlYnvZ_T23lJRz-WA_U12bX2gar-Rqe_SfqDPUaf7d97VywEf1JvIw-C4R4\" alt=\"dark mode button with a moon icon in the bottom right which, when clicked, turns on dark mode for the user. WordPress dark mode\" \/><\/figure>\n\n\n\n<p>You can change the style and placement of the icon in the <em>Display Settings<\/em> tab. However, your options are limited with the free version of the plugin:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/kuG5XPvS-jypzVI1OiYrbaGjPBQZI66AK61lSnsDNO42eI_qDSMXnwM1pJechlZLO7jQWoabQcui-hmbwa3TmOm_OudnvI2X6mbWdbexFap_5GYl-_i3-kDdgiW7oysOumcYdaQz\" alt=\"dark mode button style and placement settings within the plugin. WordPress dark mode\" \/><\/figure>\n\n\n\n<p>You can choose if you\u2019d like text on your button, as well as its position on the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Customize Your Dark Mode Colors<\/h3>\n\n\n\n<p>Finally, you may want to experiment with different dark mode colors. The options are located under the <em>Style Settings<\/em> tab:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/HyPY086nY1OXIN0iEzgaqFEGCWRjK1IcvQ9gwffp202rfVt_kR72GU6vr9kP5bddtE_scuTrQqvX4gT08L3iZm-pmS1hzJRZ-08_QWNFTaDhoJXptwdOIFgs-PfPHjyKwqzitOfU\" alt=\"dark mode style settings within the plugin. WordPress dark mode\" \/><\/figure>\n\n\n\n<p>On this screen, you can select colors that are suitable for your site\u2019s branding. Again, your options are somewhat limited in the free version of the night mode WordPress plugin. If you choose to upgrade, you can use a preset color palette or create your own.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Enable Dark Mode on Your WordPress Admin Dashboard<\/h2>\n\n\n\n<p>While you\u2019re enabling this feature for the front end of your site, you may want to apply a WordPress dark mode theme to your admin dashboard as well. The default WordPress color schemes and settings aren\u2019t conducive to white light reduction, so you\u2019ll need to use the plugin to accomplish this.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install the WP Dark Mode Plugin<\/h3>\n\n\n\n<p>WP Dark Mode also includes options for your website\u2019s back end. If you haven\u2019t already installed it, you can find it in the WordPress Plugin Directory. Once you download and activate the plugin, it will send you to the <em>General Settings<\/em> screen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Enable Backend Dark Mode<\/h3>\n\n\n\n<p>Next, you\u2019ll need to enable backend dark mode. To do so, navigate to <em>Settings &gt; WP Dark Mode &gt;<\/em> <em>General Settings<\/em>, then toggle on <em>Enable Backend Dark Mode<\/em>:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/uuFvFs9XKHICB_ti5tJdiUHgc16JI1w0YNxNBDkGcaIW1Im0oKcNlbhLSQaVN3foPiLZnwoKdaBi_fHVx94zosVbDOhXer1U5sBO0hPhfAqF5cSRDynSLudzZ9ubKn2AmP6NobaS\" alt=\"enable backend dark mode setting within plugin. WordPress dark mode\" \/><\/figure>\n\n\n\n<p>Be sure to scroll down and click on the <em>Save Settings<\/em> button to confirm your changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Toggle Your Admin Dashboard From Light to Dark<\/h3>\n\n\n\n<p>You\u2019ll now see a new switch at the top of your screen that will let you turn on a WordPress admin dark theme:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/oOT1YoolDvCd_58IqiEAM_Yr_7D0vtNI5xm-ahgHY1B-sz6IyJ7-8Qi8ul3zHTLAluHMtOlkTOQY_4e9Fczrl6tNDxiysVOf-bySvRkyBPeTLyeFRrTrDqEa3TU3dcmtavRb14BG\" alt=\"dark mode toggled on for admin within WordPress backend. WordPress dark mode\" \/><\/figure>\n\n\n\n<p>Hopefully, this will make working in the back end a bit more comfortable for you. If your site has multiple users, they\u2019ll each be able to turn dark mode on or off independently.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Adjust Your Admin Color Scheme to Match Dark Mode<\/h3>\n\n\n\n<p>Now that you have dark mode turned on, you may want to adjust your admin color scheme. Start by navigating to <em>Users &gt; Profile<\/em>.<\/p>\n\n\n\n<p>From here, you can select whichever palette you like best:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/BpyUBclyIavu8NcswVmDH86C0sc7gVEIcBX5eTobW7tkGlAj42nYP3FG--ivN5ZaimJHZBWm4Vh2IUZ-s15FI8XgByPtM8-4G-k7k4O8WsY2jQfK2LUOi71Obqho400unJH5dLPp\" alt=\"admin color schemes within WordPress backend. WordPress dark mode\" \/><\/figure>\n\n\n\n<p>Once you have your colors picked out, scroll down and click on the <em>Update Profile<\/em> button to save your new settings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Make Your Site Stand Out (or Blend in) With WP Engine<\/h2>\n\n\n\n<p>Adding dark mode to your WordPress site can benefit you as well as your users. Whether you\u2019re focused on reducing eye strain or simply prefer the darker look, adding a night mode option is worth the effort.<\/p>\n\n\n\n<p>In this article, we went over what dark mode is and some of its advantages. Then we showed you how to use the <a href=\"https:\/\/wordpress.org\/plugins\/wp-dark-mode\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Dark Mode<\/a> plugin to add this feature to your website and admin dashboard.<\/p>\n\n\n\n<p>With <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Engine&#8217;s hosting for WordPress sites<\/a>, you can spend less time worrying about performance and more time customizing your site to stand out from the crowd or blend in with the latest web design trends. <a href=\"https:\/\/wpengine.com\/plans\/\" target=\"_blank\" rel=\"noreferrer noopener\">Check out our plans<\/a> and learn how to provide a seamless site experience!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When we spend much of our time in front of screens, it\u2019s not surprising that dark mode (which is easier on the eyes) is growing in popularity. Also known as night mode, this feature can provide a number of benefits to you and your site\u2019s visitors. Fortunately, adding dark mode to your WordPress site is<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":116677,"template":"","resource-topic":[901],"resource-role":[896,899],"resource-type":[916],"class_list":["post-116675","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Give the Eyes a Break, Add Dark Mode to Your WordPress Site<\/title>\n<meta name=\"description\" content=\"Discover how to enhance your website&#039;s user experience with WordPress dark mode. Learn the benefits as well as easy steps for enabling it from your admin dashboard.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Give the Eyes a Break, Add Dark Mode to Your WordPress Site\" \/>\n<meta property=\"og:description\" content=\"Discover how to enhance your website&#039;s user experience with WordPress dark mode. Learn the benefits as well as easy steps for enabling it from your admin dashboard.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/add-dark-mode-night-mode-wordpress-site\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-02T20:47:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/04\/shutterstock_1687615780-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Give the Eyes a Break, Add Dark Mode to Your WordPress Site\" \/>\n<meta name=\"twitter:description\" content=\"Discover how to enhance your website&#039;s user experience with WordPress dark mode. Learn the benefits as well as easy steps for enabling it from your admin dashboard.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/04\/shutterstock_1687615780-1.jpg\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-dark-mode-night-mode-wordpress-site\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-dark-mode-night-mode-wordpress-site\/\",\"name\":\"Give the Eyes a Break, Add Dark Mode to Your WordPress Site\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2021-04-06T16:53:15+00:00\",\"dateModified\":\"2024-10-02T20:47:54+00:00\",\"description\":\"Discover how to enhance your website's user experience with WordPress dark mode. Learn the benefits as well as easy steps for enabling it from your admin dashboard.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-dark-mode-night-mode-wordpress-site\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/add-dark-mode-night-mode-wordpress-site\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-dark-mode-night-mode-wordpress-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Give the Eyes a Break, Add Dark Mode to Your WordPress Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Give the Eyes a Break, Add Dark Mode to Your WordPress Site","description":"Discover how to enhance your website's user experience with WordPress dark mode. Learn the benefits as well as easy steps for enabling it from your admin dashboard.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Give the Eyes a Break, Add Dark Mode to Your WordPress Site","og_description":"Discover how to enhance your website's user experience with WordPress dark mode. Learn the benefits as well as easy steps for enabling it from your admin dashboard.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/add-dark-mode-night-mode-wordpress-site\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-10-02T20:47:54+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/04\/shutterstock_1687615780-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_title":"Give the Eyes a Break, Add Dark Mode to Your WordPress Site","twitter_description":"Discover how to enhance your website's user experience with WordPress dark mode. Learn the benefits as well as easy steps for enabling it from your admin dashboard.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/04\/shutterstock_1687615780-1.jpg","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-dark-mode-night-mode-wordpress-site\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/add-dark-mode-night-mode-wordpress-site\/","name":"Give the Eyes a Break, Add Dark Mode to Your WordPress Site","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2021-04-06T16:53:15+00:00","dateModified":"2024-10-02T20:47:54+00:00","description":"Discover how to enhance your website's user experience with WordPress dark mode. Learn the benefits as well as easy steps for enabling it from your admin dashboard.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-dark-mode-night-mode-wordpress-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/add-dark-mode-night-mode-wordpress-site\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-dark-mode-night-mode-wordpress-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"Give the Eyes a Break, Add Dark Mode to Your WordPress Site"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/04\/shutterstock_1687615780-2.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Developer, Site Owner","topic":"<strong>Topics:<\/strong> WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/116675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/116677"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=116675"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=116675"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=116675"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=116675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}