{"id":287193,"date":"2021-06-29T19:00:00","date_gmt":"2021-06-29T16:00:00","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-setup-a-dark-mode-theme-for-your-website-cloudsavvy-it\/"},"modified":"2021-06-29T19:00:00","modified_gmt":"2021-06-29T16:00:00","slug":"how-to-setup-a-dark-mode-theme-for-your-website-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-setup-a-dark-mode-theme-for-your-website-cloudsavvy-it\/","title":{"rendered":"#How to Setup a Dark Mode Theme for Your Website \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a36eb01aa647\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a36eb01aa647\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-setup-a-dark-mode-theme-for-your-website-cloudsavvy-it\/#What_Browsers_Support_Dark_Themes\" >What Browsers Support Dark Themes?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-setup-a-dark-mode-theme-for-your-website-cloudsavvy-it\/#How_to_Use_CSS_Color_Scheme_Support\" >How to Use CSS Color Scheme Support<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-setup-a-dark-mode-theme-for-your-website-cloudsavvy-it\/#Set_Up_a_Dark_Theme_with_CSS_Variables\" >Set Up a Dark Theme with CSS Variables<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-setup-a-dark-mode-theme-for-your-website-cloudsavvy-it\/#Fallback_For_IE_11\" >Fallback For IE 11<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Setup a Dark Mode <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Theme<\/a> for Your Website \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage alignnone wp-image-4333 size-full\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/08\/a3925dd1-e1585834041892.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1000\" height=\"511\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Chrome 76 added support for the <code>prefers-color-scheme<\/code>\u00a0CSS <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">media<\/a> query, which allows websites to ask your operating system what color scheme you prefer so they can theme themselves appropriately. Here\u2019s how to set it up for your website.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"What_Browsers_Support_Dark_Themes\"><\/span>What Browsers Support Dark Themes?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As of writing, most of the major browsers support dark mode, although some browsers haven\u2019t been updated to support it yet. You can check the current status on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#search=prefers-color-scheme\">caniuse.com<\/a>, which generates a support table for different browsers:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1177\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/07\/7922ef87.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"700\" height=\"300\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>As usual, IE 11 isn\u2019t receiving any updates, and the 2% of the Internet still stuck on it won\u2019t be able to make use of it. But, those people are likely not on Windows 10, so they wouldn\u2019t see any use anyway without a dark theme to toggle.<\/p>\n<p>Luckily, using <code>prefers-color-scheme<\/code>\u00a0won\u2019t break your CSS, as it\u2019s an optional parameter.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"How_to_Use_CSS_Color_Scheme_Support\"><\/span>How to Use CSS Color Scheme Support<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To actually use <code>prefers-color-scheme<\/code> in your CSS, you\u2019d use it as an optional media query, the same way you\u2019d do for responsive design. For instance, if your default is white background with black text, you can use the media query to change to black background and white text.<\/p>\n<pre>body {&#13;\n  background-color: #fff;&#13;\n  color:#000;&#13;\n}&#13;\n&#13;\n@media (prefers-color-scheme: dark) {&#13;\n  background-color: #000;&#13;\n  color:#fff;&#13;\n}&#13;\n<\/pre>\n<p>You can combine this with any other technique that you\u2019re using\u2014for instance, you could only allow dark mode on mobile devices if you combined with a responsive media query for screen size.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Set_Up_a_Dark_Theme_with_CSS_Variables\"><\/span>Set Up a Dark Theme with CSS Variables<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS Variables are a fairly new addition with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#search=css%20var\">widespread support<\/a>. They\u2019re perhaps the easiest way to make a dark theme alongside <code>prefers-color-scheme<\/code>. Instead of defining color values manually, like so:<\/p>\n<pre>body {&#13;\n  background-color: #fff;&#13;\n}&#13;\n&#13;\np {&#13;\n  color: #000;&#13;\n}<\/pre>\n<p>Instead create a <code>:root<\/code>\u00a0block that will apply everywhere. You can define variables here by using the double hyphen (<code>--<\/code>) followed by the variable name. Then, whenever you need to define a value, use the variable name inside the <code>var()<\/code>\u00a0function instead:<\/p>\n<pre>:root {&#13;\n  --primary: #000;&#13;\n  --background: #fff;&#13;\n}&#13;\n&#13;\nbody {&#13;\n  background-color: var(--background);&#13;\n}&#13;\n&#13;\np {&#13;\n  color: var(--primary);&#13;\n}<\/pre>\n<p>This method has the wonderful benefit of being able to change those variables and having changes reflect everywhere. Just below the <code>:root<\/code>\u00a0block, lets add another one inside the <code>prefers-color-scheme<\/code>\u00a0media query:<\/p>\n<pre>:root {&#13;\n  --primary: #000;&#13;\n  --background: #fff;&#13;\n}&#13;\n&#13;\n@media (prefers-color-scheme: dark) {&#13;\n  :root {&#13;\n    --primary: #ddd;&#13;\n    --background: #222&#13;\n  }&#13;\n}&#13;\n&#13;\nbody {&#13;\n  background-color: var(--background);&#13;\n}&#13;\n&#13;\np {&#13;\n  color: var(--primary);&#13;\n}<\/pre>\n<p>This resets the variables to the dark values if the browser detects that the user prefers a dark scheme. You can manage these two palettes of colors and easily tweak them just by changing the variables.<\/p>\n<p>Additionally, if you need extra CSS for the dark theme, you can place that in another <code>prefers-color-scheme<\/code>\u00a0query, though you\u2019d likely want to place that one below the rest of the CSS so it takes precedence, or use the <code>!important<\/code>\u00a0flag.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Fallback_For_IE_11\"><\/span>Fallback For IE 11<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>IE 11 doesn\u2019t support this (obviously). If you want to provide IE 11 support, you can use the age old method of doubling up your properties:<\/p>\n<pre>p {&#13;\n color: #000;&#13;\n color: var(--primary);&#13;\n}<\/pre>\n<p>This way, IE 11 will only process the first one, and see the other as invalid CSS. Dark themes won\u2019t work, but they wouldn\u2019t anyway as there\u2019s no support for the media query.<\/p>\n<p>Additionally, if you don\u2019t want to use CSS variables at all, you can just completely restyle your site within the <code>prefers-color-scheme<\/code>\u00a0query, but that\u2019s clunky and wastes space. If you must support every browser in existence, use the double property fallback instead.\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/1176\/chrome-now-supports-dark-themes-from-your-website-heres-how-to-set-up-a-dark-theme\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Setup a Dark Mode Theme for Your Website \u2013 CloudSavvy IT&#8221; Chrome 76 added support for the prefers-color-scheme\u00a0CSS media query, which allows websites to ask your operating system what color scheme you prefer so they can theme themselves appropriately. Here\u2019s how to set it up for your website. What Browsers Support Dark Themes?&#8230;<\/p>\n","protected":false},"author":1,"featured_media":287194,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/08\/a3925dd1-e1585834041892.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-287193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/287193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=287193"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/287193\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/287194"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=287193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=287193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=287193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}