{"id":2024,"date":"2025-11-01T15:09:07","date_gmt":"2025-11-01T13:09:07","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=2024"},"modified":"2025-11-04T10:44:32","modified_gmt":"2025-11-04T08:44:32","slug":"dark-light-template-switch","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/","title":{"rendered":"Simple Animated Dark-Light Theme Switch for Your Website"},"content":{"rendered":"<p><strong>In recent years, the demand for dark mode \ud83c\udf17&nbsp;options in web design has surged, driven by its aesthetic appeal and potential benefits for user experience. Dark mode not only reduces eye strain, especially in low-light environments, but it also conserves battery life \ud83d\udd0b on devices with OLED screens.<\/strong><\/p>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/03\/dark-light-theme-switch.jpg\" alt=\"dark light theme switch\"><\/p>\n<p><!--more--><br \/>\nConsequently, many websites are now integrating dark mode features to cater to user preferences. In this article, we&#8217;ll explore how to implement a dark-light theme switch for your website using <a rel=\"external nofollow\" targett=\"_blank\" href=\"https:\/\/html-css-js.com\/?html=%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Ctitle%3EDark%20theme%20switch%3C\/title%3E%0A%3C\/head%3E%0A%3Cbody%3E%0A%3Ch1%20style=%22text-align:center%22%3EDark%20mode%20switch%3C\/h1%3E%0A%3Cdiv%20style=%22text-align:center%22%3E%0A%0A%3Cdiv%20i$*$d=%22wrapDarkLightSwitch%22%3E%0A%09%3Cdiv%20i$*$d=%22darkLightSwitch%22%20title=%22Dark%20\/%20Light%20View%22%3E%0A%09%09%3Cdiv%20i$*$d=%22darkLightSvgWrap%22%3E%0A%3Csvg%20height=%2220px%22%20wi$*$dth=%2220px%22%20version=%221.1%22%20i$*$d=%22sunIcon%22%20xmlns=%22http:\/\/www.w3.org\/2000\/svg%22%20xmlns:xlink=%22http:\/\/www.w3.org\/1999\/xlink%22%20viewBox=%220%200%20207.628%20207.628%22%20xml:space=%22preserve%22%3E%3Ccircle%20cx=%22103.814%22%20cy=%22103.814%22%20r=%2245.868%22\/%3E%3Cpath%20d=%22M103.814,157.183c-29.427,0-53.368-23.941-53.368-53.368s23.941-53.368,53.368-53.368s53.368,23.941,53.368,53.368%20S133.241,157.183,103.814,157.183z%20M103.814,65.446c-21.156,0-38.368,17.212-38.368,38.368s17.212,38.368,38.368,38.368%20s38.368-17.212,38.368-38.368S124.97,65.446,103.814,65.446z%22\/%3E%3Cpath%20d=%22M103.814,39.385c-4.142,0-7.5-3.358-7.5-7.5V7.5c0-4.142,3.358-7.5,7.5-7.5s7.5,3.358,7.5,7.5v24.385%20C111.314,36.027,107.956,39.385,103.814,39.385z%22\/%3E%3Cpath%20d=%22M103.814,207.628c-4.142,0-7.5-3.358-7.5-7.5v-24.385c0-4.142,3.358-7.5,7.5-7.5s7.5,3.358,7.5,7.5v24.385%20C111.314,204.271,107.956,207.628,103.814,207.628z%22\/%3E%3Cpath%20d=%22M200.128,111.314h-24.385c-4.142,0-7.5-3.358-7.5-7.5s3.358-7.5,7.5-7.5h24.385c4.142,0,7.5,3.358,7.5,7.5%20S204.271,111.314,200.128,111.314z%22\/%3E%3Cpath%20d=%22M31.885,111.314H7.5c-4.142,0-7.5-3.358-7.5-7.5s3.358-7.5,7.5-7.5h24.385c4.142,0,7.5,3.358,7.5,7.5%20S36.027,111.314,31.885,111.314z%22\/%3E%3Cpath%20d=%22M154.676,60.452c-1.919,0-3.839-0.732-5.303-2.197c-2.929-2.929-2.929-7.678,0-10.606l17.243-17.242%20c2.929-2.929,7.678-2.93,10.606,0c2.929,2.929,2.929,7.678,0,10.606l-17.243,17.242C158.515,59.72,156.595,60.452,154.676,60.452z%22\/%3E%3Cpath%20d=%22M35.709,179.419c-1.919,0-3.839-0.732-5.303-2.197c-2.929-2.929-2.929-7.678,0-10.606l17.243-17.243%20c2.929-2.929,7.678-2.929,10.606,0c2.929,2.929,2.929,7.678,0,10.606l-17.243,17.243C39.548,178.687,37.629,179.419,35.709,179.419z%22\/%3E%3Cpath%20d=%22M171.918,179.419c-1.919,0-3.839-0.732-5.303-2.197l-17.243-17.243c-2.929-2.929-2.929-7.678,0-10.606%20c2.929-2.929,7.678-2.929,10.606,0l17.243,17.243c2.929,2.929,2.929,7.678,0,10.606%20C175.757,178.687,173.838,179.419,171.918,179.419z%22\/%3E%3Cpath%20d=%22M52.952,60.452c-1.919,0-3.839-0.732-5.303-2.197L30.406,41.013c-2.929-2.929-2.929-7.677,0-10.606%20c2.929-2.929,7.678-2.93,10.606,0l17.243,17.242c2.929,2.929,2.929,7.677,0,10.606C56.791,59.72,54.872,60.452,52.952,60.452z%22\/%3E%3C\/svg%3E%0A%09%09%3C\/div%3E%0A%09%09%3Cdiv%20i$*$d=%22darkLightOverlay%22%3E%0A%09%09%3C\/div%3E%0A%09%3C\/div%3E%0A%3C\/div%3E%0A%0A%3C\/div%3E%20%20%0A%3C\/body%3E%0A%3C\/html%3E&amp;amp;css=#wrapDarkLightSwitch%20%7B%0A%09display:%20inline-block;%0A%09position:%20relative;%0A%09user-select:%20none%0A%7D%0A#darkLightSwitch%20%7B%0A%09cursor:%20pointer;%0A%09padding:%204px%205px%202px;%0A%09position:%20relative;%0A%09display:%20inline-block%0A%7D%0A#darkLightSwitch%20svg%20%7B%0A%09fill:%20#000;%0A%09height:%2024px;%0A%09wi$*$dth:%2024px;%0A%09transition:%20all%201s%0A%7D%0A.darkModeOn%20#darkLightSwitch%20svg%7B%0A%09fill:#FFF%0A%7D%0A#darkLightSvgWrap%7B%0A%09height:24px;%0A%09wi$*$dth:24px;%0A%09overflow:hi$*$dden;%0A%09position:relative;%0A%09transition:all%200.3s;%0A%09margin-bottom:5px%0A%7D%0A#darkLightSwitch:hover%20#darkLightSvgWrap%7B%0A%09transform:scale(1)%20rotate(45deg)%0A%7D%0A.darkModeOn%20#darkLightSvgWrap%20svg%7B%0A%09height:44px;%0A%09wi$*$dth:44px;%0A%09position:absolute;%0A%09transition:all%200.5s;%0A%09top:-10px;%0A%09right:-10px%0A%7D%0A.darkModeOn%20#darkLightSvgWrap%7B%0A%09border-radius:10px%0A%7D%0A#darkLightOverlay%20%7B%0A%09wi$*$dth:%206px;%0A%09height:%2010px;%0A%09position:%20absolute;%0A%09background:%20#FFF;%0A%09transition:%20all%200.5s;%0A%09top:%2011px;%0A%09left:%2016px;%0A%09border-radius:%200%2010px%2010px%200;%0A%7D%0A.darkModeOn%20#darkLightOverlay%7B%0A%09wi$*$dth:22px;%0A%09height:22px;%0A%09border-radius:20px;%0A%09top:0;%0A%09left:0;%0A%09background:%20#456;%0A%7D%0A\/*Your%20custom%20theme%20styles%20below%20this*\/%0Abody%7B%0A%09background:#f7fbff;%0A%09color:#000%0A%7D%0Abody.darkModeOn%7B%0A%09background:#456;%0A%09color:#FFF%0A%7D&amp;amp;js=document.getElementById('wrapDarkLightSwitch').onclick%20=%20function()%20%7B%0A%20%20%20%20document.body.classList.toggle('darkModeOn');%0A%7D\">HTML, CSS, and JavaScript<\/a>.<\/p>\n<h2>Live Demo<\/h2>\n<p>Click the Sun\u2600\ufe0f \/ Moon\ud83c\udf19 icon to see the background and other colors changing. Since we have also implemented this feature in this website, you can test it in the navigation header on wider screens.<\/p>\n<p class=\"aligncenter\"><iframe loading=\"lazy\" width=\"300\" height=\"120\" style=\"width: 100%; height: 120px; overflow: hidden; border: none;\" src=\"https:\/\/html-online.com\/demo\/dark-theme-switch\/\"><\/iframe><\/p>\n<h2>Understanding the Components<\/h2>\n<p>Before diving into the implementation details, let&#8217;s dissect the components involved in creating a dark-light theme switch:<\/p>\n<ol>\n<li><strong>HTML markup<\/strong>: The <a rel=\"external nofollow\" targett=\"_blank\" href=\"https:\/\/html-online.com\/\">HTML code<\/a> defines the structure of the switch button and its associated elements.<\/li>\n<li><strong>CSS styles<\/strong>: <a href=\"\/articles\/category\/css\/\">CSS<\/a> is utilized to style the switch button, its overlay, and the SVG icon used to indicate the theme mode.<\/li>\n<li><strong>JavaScript<\/strong>: <a href=\"\/articles\/category\/javascript\/\">JS<\/a> provides the interactivity by toggling a class on the <code>body<\/code> element, which triggers the dark mode styles.<\/li>\n<\/ol>\n<h2>The Implementation Process<\/h2>\n<h3>HTML Markup<\/h3>\n<p>The HTML markup lays the foundation for the dark-light theme switch. It consists of a <code>div<\/code> container with an ID of <code>wrapDarkLightSwitch<\/code>, which encapsulates the switch button.<\/p>\n<div>\n<pre><span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"wrapDarkLightSwitch\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"darkLightSwitch\"<\/span> <span style=\"color: #0000cc;\">title=<\/span><span style=\"background-color: #fff0f0;\">\"Dark \/ Light View\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"darkLightSvgWrap\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n<span style=\"color: #007700;\">&lt;svg<\/span> <span style=\"color: #0000cc;\">height=<\/span><span style=\"background-color: #fff0f0;\">\"20px\"<\/span> <span style=\"color: #0000cc;\">width=<\/span><span style=\"background-color: #fff0f0;\">\"20px\"<\/span> <span style=\"color: #0000cc;\">version=<\/span><span style=\"background-color: #fff0f0;\">\"1.1\"<\/span> <span style=\"color: #0000cc;\">xmlns=<\/span><span style=\"background-color: #fff0f0;\">\"http:\/\/www.w3.org\/2000\/svg\"<\/span> <span style=\"color: #0000cc;\">xmlns:xlink=<\/span><span style=\"background-color: #fff0f0;\">\"http:\/\/www.w3.org\/1999\/xlink\"<\/span> <span style=\"color: #0000cc;\">viewBox=<\/span><span style=\"background-color: #fff0f0;\">\"0 0 207.628 207.628\"<\/span> <span style=\"color: #0000cc;\">xml:space=<\/span><span style=\"background-color: #fff0f0;\">\"preserve\"<\/span><span style=\"color: #007700;\">&gt;&lt;circle<\/span> <span style=\"color: #0000cc;\">cx=<\/span><span style=\"background-color: #fff0f0;\">\"103.814\"<\/span> <span style=\"color: #0000cc;\">cy=<\/span><span style=\"background-color: #fff0f0;\">\"103.814\"<\/span> <span style=\"color: #0000cc;\">r=<\/span><span style=\"background-color: #fff0f0;\">\"45.868\"<\/span><span style=\"color: #007700;\">\/&gt;&lt;path<\/span> <span style=\"color: #0000cc;\">d=<\/span><span style=\"background-color: #fff0f0;\">\"M103.814,157.183c-29.427,0-53.368-23.941-53.368-53.368s23.941-53.368,53.368-53.368s53.368,23.941,53.368,53.368 S133.241,157.183,103.814,157.183z M103.814,65.446c-21.156,0-38.368,17.212-38.368,38.368s17.212,38.368,38.368,38.368 s38.368-17.212,38.368-38.368S124.97,65.446,103.814,65.446z\"<\/span><span style=\"color: #007700;\">\/&gt;&lt;path<\/span> <span style=\"color: #0000cc;\">d=<\/span><span style=\"background-color: #fff0f0;\">\"M103.814,39.385c-4.142,0-7.5-3.358-7.5-7.5V7.5c0-4.142,3.358-7.5,7.5-7.5s7.5,3.358,7.5,7.5v24.385 C111.314,36.027,107.956,39.385,103.814,39.385z\"<\/span><span style=\"color: #007700;\">\/&gt;&lt;path<\/span> <span style=\"color: #0000cc;\">d=<\/span><span style=\"background-color: #fff0f0;\">\"M103.814,207.628c-4.142,0-7.5-3.358-7.5-7.5v-24.385c0-4.142,3.358-7.5,7.5-7.5s7.5,3.358,7.5,7.5v24.385 C111.314,204.271,107.956,207.628,103.814,207.628z\"<\/span><span style=\"color: #007700;\">\/&gt;&lt;path<\/span> <span style=\"color: #0000cc;\">d=<\/span><span style=\"background-color: #fff0f0;\">\"M200.128,111.314h-24.385c-4.142,0-7.5-3.358-7.5-7.5s3.358-7.5,7.5-7.5h24.385c4.142,0,7.5,3.358,7.5,7.5 S204.271,111.314,200.128,111.314z\"<\/span><span style=\"color: #007700;\">\/&gt;&lt;path<\/span> <span style=\"color: #0000cc;\">d=<\/span><span style=\"background-color: #fff0f0;\">\"M31.885,111.314H7.5c-4.142,0-7.5-3.358-7.5-7.5s3.358-7.5,7.5-7.5h24.385c4.142,0,7.5,3.358,7.5,7.5 S36.027,111.314,31.885,111.314z\"<\/span><span style=\"color: #007700;\">\/&gt;&lt;path<\/span> <span style=\"color: #0000cc;\">d=<\/span><span style=\"background-color: #fff0f0;\">\"M154.676,60.452c-1.919,0-3.839-0.732-5.303-2.197c-2.929-2.929-2.929-7.678,0-10.606l17.243-17.242 c2.929-2.929,7.678-2.93,10.606,0c2.929,2.929,2.929,7.678,0,10.606l-17.243,17.242C158.515,59.72,156.595,60.452,154.676,60.452z\"<\/span><span style=\"color: #007700;\">\/&gt;&lt;path<\/span> <span style=\"color: #0000cc;\">d=<\/span><span style=\"background-color: #fff0f0;\">\"M35.709,179.419c-1.919,0-3.839-0.732-5.303-2.197c-2.929-2.929-2.929-7.678,0-10.606l17.243-17.243 c2.929-2.929,7.678-2.929,10.606,0c2.929,2.929,2.929,7.678,0,10.606l-17.243,17.243C39.548,178.687,37.629,179.419,35.709,179.419z\"<\/span><span style=\"color: #007700;\">\/&gt;&lt;path<\/span> <span style=\"color: #0000cc;\">d=<\/span><span style=\"background-color: #fff0f0;\">\"M171.918,179.419c-1.919,0-3.839-0.732-5.303-2.197l-17.243-17.243c-2.929-2.929-2.929-7.678,0-10.606 c2.929-2.929,7.678-2.929,10.606,0l17.243,17.243c2.929,2.929,2.929,7.678,0,10.606 C175.757,178.687,173.838,179.419,171.918,179.419z\"<\/span><span style=\"color: #007700;\">\/&gt;&lt;path<\/span> <span style=\"color: #0000cc;\">d=<\/span><span style=\"background-color: #fff0f0;\">\"M52.952,60.452c-1.919,0-3.839-0.732-5.303-2.197L30.406,41.013c-2.929-2.929-2.929-7.677,0-10.606 c2.929-2.929,7.678-2.93,10.606,0l17.243,17.242c2.929,2.929,2.929,7.677,0,10.606C56.791,59.72,54.872,60.452,52.952,60.452z\"<\/span><span style=\"color: #007700;\">\/&gt;&lt;\/svg&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"darkLightOverlay\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n<\/pre>\n<\/div>\n<h3>CSS Styles<\/h3>\n<p><a rel=\"external nofollow\" targett=\"_blank\" href=\"https:\/\/csseditor.com\/\">CSS is employed<\/a> to style the switch button and its associated elements. Key CSS properties include <code>fill<\/code>, <code>transition<\/code>, and <code>transform<\/code> to ensure smooth transitions between dark and light modes.<\/p>\n<div>\n<pre><span style=\"color: #0066bb; font-weight: bold;\">#wrapDarkLightSwitch<\/span>{<span style=\"color: #008800; font-weight: bold;\">display<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">inline<\/span><span style=\"color: #333333;\">-<\/span><span style=\"color: #008800; font-weight: bold;\">block<\/span>;<span style=\"color: #008800; font-weight: bold;\">position<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">relative<\/span>;user<span style=\"color: #333333;\">-<\/span>select<span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">none<\/span>}\n<span style=\"color: #0066bb; font-weight: bold;\">#darkLightSwitch<\/span>{<span style=\"color: #008800; font-weight: bold;\">cursor<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">pointer<\/span>;<span style=\"color: #008800; font-weight: bold;\">padding<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">4px<\/span> <span style=\"color: #6600ee; font-weight: bold;\">5px<\/span> <span style=\"color: #6600ee; font-weight: bold;\">2px<\/span>;<span style=\"color: #008800; font-weight: bold;\">position<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">relative<\/span>;<span style=\"color: #008800; font-weight: bold;\">display<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">inline<\/span><span style=\"color: #333333;\">-<\/span><span style=\"color: #008800; font-weight: bold;\">block<\/span>}\n<span style=\"color: #0066bb; font-weight: bold;\">#darkLightSwitch<\/span> <span style=\"color: #007700;\">svg<\/span>{fill<span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">#000<\/span>;<span style=\"color: #008800; font-weight: bold;\">height<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">24px<\/span>;<span style=\"color: #008800; font-weight: bold;\">width<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">24px<\/span>;transition<span style=\"color: #333333;\">:<\/span>all <span style=\"color: #6600ee; font-weight: bold;\">1s<\/span>}\n<span style=\"color: #bb0066; font-weight: bold;\">.darkModeOn<\/span> <span style=\"color: #0066bb; font-weight: bold;\">#darkLightSwitch<\/span> <span style=\"color: #007700;\">svg<\/span>{fill<span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">#FFF<\/span>}\n<span style=\"color: #0066bb; font-weight: bold;\">#darkLightSvgWrap<\/span>{<span style=\"color: #008800; font-weight: bold;\">height<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">24px<\/span>;<span style=\"color: #008800; font-weight: bold;\">width<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">24px<\/span>;<span style=\"color: #008800; font-weight: bold;\">overflow<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">hidden<\/span>;<span style=\"color: #008800; font-weight: bold;\">position<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">relative<\/span>;transition<span style=\"color: #333333;\">:<\/span>all <span style=\"color: #6600ee; font-weight: bold;\">0.3s<\/span>;<span style=\"color: #008800; font-weight: bold;\">margin-bottom<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">5px<\/span>}\n<span style=\"color: #0066bb; font-weight: bold;\">#darkLightSwitch<\/span><span style=\"color: #555555; font-weight: bold;\">:hover<\/span> <span style=\"color: #0066bb; font-weight: bold;\">#darkLightSvgWrap<\/span>{transform<span style=\"color: #333333;\">:<\/span>scale(<span style=\"color: #6600ee; font-weight: bold;\">1<\/span>) rotate(<span style=\"color: #6600ee; font-weight: bold;\">45<\/span>deg)}\n<span style=\"color: #bb0066; font-weight: bold;\">.darkModeOn<\/span> <span style=\"color: #0066bb; font-weight: bold;\">#darkLightSvgWrap<\/span> <span style=\"color: #007700;\">svg<\/span>{<span style=\"color: #008800; font-weight: bold;\">height<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">44px<\/span>;<span style=\"color: #008800; font-weight: bold;\">width<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">44px<\/span>;<span style=\"color: #008800; font-weight: bold;\">position<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">absolute<\/span>;transition<span style=\"color: #333333;\">:<\/span>all <span style=\"color: #6600ee; font-weight: bold;\">0.5s<\/span>;<span style=\"color: #008800; font-weight: bold;\">top<\/span><span style=\"color: #333333;\">:-<\/span><span style=\"color: #6600ee; font-weight: bold;\">10px<\/span>;<span style=\"color: #008800; font-weight: bold;\">right<\/span><span style=\"color: #333333;\">:-<\/span><span style=\"color: #6600ee; font-weight: bold;\">10px<\/span>}\n<span style=\"color: #bb0066; font-weight: bold;\">.darkModeOn<\/span> <span style=\"color: #0066bb; font-weight: bold;\">#darkLightSvgWrap<\/span>{<span style=\"color: #008800; font-weight: bold;\">border<\/span><span style=\"color: #333333;\">-<\/span>radius<span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">10px<\/span>}\n<span style=\"color: #0066bb; font-weight: bold;\">#darkLightOverlay<\/span>{<span style=\"color: #008800; font-weight: bold;\">width<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">6px<\/span>;<span style=\"color: #008800; font-weight: bold;\">height<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">10px<\/span>;<span style=\"color: #008800; font-weight: bold;\">position<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">absolute<\/span>;<span style=\"color: #008800; font-weight: bold;\">background<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">#FFF<\/span>;transition<span style=\"color: #333333;\">:<\/span>all <span style=\"color: #6600ee; font-weight: bold;\">0.5s<\/span>;<span style=\"color: #008800; font-weight: bold;\">top<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">11px<\/span>;<span style=\"color: #008800; font-weight: bold;\">left<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">16px<\/span>;<span style=\"color: #008800; font-weight: bold;\">border<\/span><span style=\"color: #333333;\">-<\/span>radius<span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">0<\/span> <span style=\"color: #6600ee; font-weight: bold;\">10px<\/span> <span style=\"color: #6600ee; font-weight: bold;\">10px<\/span> <span style=\"color: #6600ee; font-weight: bold;\">0<\/span>}\n<span style=\"color: #bb0066; font-weight: bold;\">.darkModeOn<\/span> <span style=\"color: #0066bb; font-weight: bold;\">#darkLightOverlay<\/span>{<span style=\"color: #008800; font-weight: bold;\">width<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">22px<\/span>;<span style=\"color: #008800; font-weight: bold;\">height<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">22px<\/span>;<span style=\"color: #008800; font-weight: bold;\">border<\/span><span style=\"color: #333333;\">-<\/span>radius<span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">20px<\/span>;<span style=\"color: #008800; font-weight: bold;\">top<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">0<\/span>;<span style=\"color: #008800; font-weight: bold;\">left<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">0<\/span>;<span style=\"color: #008800; font-weight: bold;\">background<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">#456<\/span>}\n<span style=\"color: #888888;\">\/*Your custom theme styles below this*\/<\/span>\n<span style=\"color: #007700;\">body<\/span>{<span style=\"color: #008800; font-weight: bold;\">background<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">#f7fbff<\/span>;<span style=\"color: #008800; font-weight: bold;\">color<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">#000<\/span>}\n<span style=\"color: #007700;\">body<\/span><span style=\"color: #bb0066; font-weight: bold;\">.darkModeOn<\/span>{<span style=\"color: #008800; font-weight: bold;\">background<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">#456<\/span>;<span style=\"color: #008800; font-weight: bold;\">color<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #6600ee; font-weight: bold;\">#FFF<\/span>}\n<\/pre>\n<\/div>\n<h3>JavaScript<\/h3>\n<p>JavaScript is listening for the click event on the button and it&#8217;s toggling the dark mode class on the <code>body<\/code> element when the switch button is clicked. This functionality is achieved through an event listener attached to the <code>wrapDarkLightSwitch<\/code> container.<\/p>\n<div>\n<pre><span style=\"color: #007700;\">document<\/span><span style=\"color: #bb0066; font-weight: bold;\">.getElementById<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">'wrapDarkLightSwitch'<\/span><span style=\"color: #333333;\">)<\/span><span style=\"color: #bb0066; font-weight: bold;\">.onclick<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #007700;\">function<\/span><span style=\"color: #333333;\">()<\/span> {\n    document<span style=\"color: #333333;\">.<\/span>body<span style=\"color: #333333;\">.<\/span>classList<span style=\"color: #333333;\">.<\/span>toggle(<span style=\"background-color: #fff0f0;\">'darkModeOn'<\/span>);\n}\n<\/pre>\n<\/div>\n<h2>Or, if you are using <a rel=\"external nofollow\" targett=\"_blank\" href=\"https:\/\/htmlcheatsheet.com\/jquery\/\">jQuery<\/a>:<\/h2>\n<div>\n<pre><span style=\"color: #ff0000; background-color: #ffaaaa;\">$<\/span><span style=\"color: #333333;\">(<\/span><span style=\"color: #007700;\">document<\/span><span style=\"color: #333333;\">)<\/span><span style=\"color: #bb0066; font-weight: bold;\">.ready<\/span><span style=\"color: #333333;\">(<\/span><span style=\"color: #007700;\">function<\/span><span style=\"color: #333333;\">()<\/span> {\n\t<span style=\"color: #ff0000; background-color: #ffaaaa;\">$<\/span>(<span style=\"background-color: #fff0f0;\">\"#wrapDarkLightSwitch\"<\/span>)<span style=\"color: #333333;\">.<\/span>click(function() <span style=\"color: #ff0000; background-color: #ffaaaa;\">{<\/span>\n\t\t<span style=\"color: #ff0000; background-color: #ffaaaa;\">$<\/span>(<span style=\"background-color: #fff0f0;\">'body'<\/span>)<span style=\"color: #333333;\">.<\/span>toggleClass(<span style=\"background-color: #fff0f0;\">'darkModeOn'<\/span>);\n\t}<span style=\"color: #333333;\">);<\/span>\n<span style=\"color: #ff0000; background-color: #ffaaaa;\">}<\/span><span style=\"color: #333333;\">);<\/span>\n<\/pre>\n<\/div>\n<h2>How It Works<\/h2>\n<ol>\n<li><strong>Initial Setup<\/strong>: Upon loading the webpage, the default theme is set to light mode.<\/li>\n<li><strong>User Interaction<\/strong>: When the user clicks on the dark-light theme switch button, the JavaScript function is triggered, adding a &#8220;<em>darkModeOn<\/em>&#8221; class to the body tag.<\/li>\n<li><strong>Toggle Action<\/strong>: The JavaScript function toggles the <code>darkModeOn<\/code> class on the <code>body<\/code> element, triggering the corresponding CSS styles for dark mode.<\/li>\n<li><strong>Visual Feedback<\/strong>: As the class is toggled, CSS transitions smoothly adjust the appearance of elements, the Sun icon fades into a Moon, providing visual feedback to the user.<\/li>\n<\/ol>\n<h2>Customization Options<\/h2>\n<p>You might need to customize this dark-light theme switch to align with your website&#8217;s design preferences. This includes modifying the SVG icon, adjusting transition durations, and refining color schemes to seamlessly integrate dark mode into your website&#8217;s aesthetic.<\/p>\n<p>It&#8217;s going to be your job to implement a dark template that fits your current website design.<\/p>\n<h2>prefers-color-scheme<\/h2>\n<p><span><strong>The &#8220;<em>prefers-color-scheme<\/em>&#8221; CSS media feature enables detection of user preference for light or dark color themes, based on their operating system or user agent settings.<\/strong> <\/span><\/p>\n<p><span>It applies to embedded elements like SVGs and iframes, allowing customization of their styles based on the color scheme of the parent element. The syntax includes &#8220;<strong>light<\/strong>&#8221; and &#8220;<strong>dark<\/strong>&#8221; values, indicating user preference for light or dark interfaces. An example demonstrates using &#8220;prefers-color-scheme&#8221; to switch between light and dark themes in HTML and CSS. This feature enhances user experience by adapting website themes to match user preferences for light or dark interfaces.<\/span><\/p>\n<h3><span>Using it with media queries<\/span><\/h3>\n<div>\n<pre><span style=\"color: #bb0066; font-weight: bold;\">.mytheme<\/span> {\n  <span style=\"color: #008800; font-weight: bold;\">background<\/span><span style=\"color: #333333;\">:<\/span> <span style=\"color: #007020;\">white<\/span>;\n  <span style=\"color: #008800; font-weight: bold;\">color<\/span><span style=\"color: #333333;\">:<\/span> <span style=\"color: #007020;\">black<\/span>;\n}\n<span style=\"color: #008800; font-weight: bold;\">@media<\/span> <span style=\"color: #333333;\">(<\/span><span style=\"color: #007700;\">prefers-color-scheme<\/span><span style=\"color: #333333;\">:<\/span> <span style=\"color: #007700;\">dark<\/span><span style=\"color: #333333;\">)<\/span> {\n  <span style=\"color: #bb0066; font-weight: bold;\">.mytheme.adaptive<\/span> {\n    <span style=\"color: #008800; font-weight: bold;\">background<\/span><span style=\"color: #333333;\">:<\/span> <span style=\"color: #007020;\">black<\/span>;\n    <span style=\"color: #008800; font-weight: bold;\">color<\/span><span style=\"color: #333333;\">:<\/span> <span style=\"color: #007020;\">white<\/span>; <span style=\"color: #888888;\">\/*Your dark styles*\/<\/span>\n  }\n}\n<\/pre>\n<\/div>\n<h3>Detecting with Javascript<\/h3>\n<div>\n<pre><span style=\"color: #008800; font-weight: bold;\">if<\/span> (<span style=\"color: #007020;\">window<\/span>.matchMedia <span style=\"color: #333333;\">&amp;&amp;<\/span> <span style=\"color: #007020;\">window<\/span>.matchMedia(<span style=\"background-color: #fff0f0;\">'(prefers-color-scheme: dark)'<\/span>).matches) {\n    <span style=\"color: #888888;\">\/\/ dark theme<\/span>\n}\n<\/pre>\n<\/div>\n<h2>Conclusion<\/h2>\n<p>Implementing a dark-light theme switch for your website <strong>enhances user experience<\/strong> by offering flexibility and personalization options. By leveraging <a rel=\"external nofollow\" targett=\"_blank\" href=\"https:\/\/html-css-js.com\/?html=%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Ctitle%3EDark%20theme%20switch%3C\/title%3E%0A%3C\/head%3E%0A%3Cbody%3E%0A%3Ch1%20style=%22text-align:center%22%3EDark%20mode%20switch%3C\/h1%3E%0A%3Cdiv%20style=%22text-align:center%22%3E%0A%0A%3Cdiv%20i$*$d=%22wrapDarkLightSwitch%22%3E%0A%09%3Cdiv%20i$*$d=%22darkLightSwitch%22%20title=%22Dark%20\/%20Light%20View%22%3E%0A%09%09%3Cdiv%20i$*$d=%22darkLightSvgWrap%22%3E%0A%3Csvg%20height=%2220px%22%20wi$*$dth=%2220px%22%20version=%221.1%22%20i$*$d=%22sunIcon%22%20xmlns=%22http:\/\/www.w3.org\/2000\/svg%22%20xmlns:xlink=%22http:\/\/www.w3.org\/1999\/xlink%22%20viewBox=%220%200%20207.628%20207.628%22%20xml:space=%22preserve%22%3E%3Ccircle%20cx=%22103.814%22%20cy=%22103.814%22%20r=%2245.868%22\/%3E%3Cpath%20d=%22M103.814,157.183c-29.427,0-53.368-23.941-53.368-53.368s23.941-53.368,53.368-53.368s53.368,23.941,53.368,53.368%20S133.241,157.183,103.814,157.183z%20M103.814,65.446c-21.156,0-38.368,17.212-38.368,38.368s17.212,38.368,38.368,38.368%20s38.368-17.212,38.368-38.368S124.97,65.446,103.814,65.446z%22\/%3E%3Cpath%20d=%22M103.814,39.385c-4.142,0-7.5-3.358-7.5-7.5V7.5c0-4.142,3.358-7.5,7.5-7.5s7.5,3.358,7.5,7.5v24.385%20C111.314,36.027,107.956,39.385,103.814,39.385z%22\/%3E%3Cpath%20d=%22M103.814,207.628c-4.142,0-7.5-3.358-7.5-7.5v-24.385c0-4.142,3.358-7.5,7.5-7.5s7.5,3.358,7.5,7.5v24.385%20C111.314,204.271,107.956,207.628,103.814,207.628z%22\/%3E%3Cpath%20d=%22M200.128,111.314h-24.385c-4.142,0-7.5-3.358-7.5-7.5s3.358-7.5,7.5-7.5h24.385c4.142,0,7.5,3.358,7.5,7.5%20S204.271,111.314,200.128,111.314z%22\/%3E%3Cpath%20d=%22M31.885,111.314H7.5c-4.142,0-7.5-3.358-7.5-7.5s3.358-7.5,7.5-7.5h24.385c4.142,0,7.5,3.358,7.5,7.5%20S36.027,111.314,31.885,111.314z%22\/%3E%3Cpath%20d=%22M154.676,60.452c-1.919,0-3.839-0.732-5.303-2.197c-2.929-2.929-2.929-7.678,0-10.606l17.243-17.242%20c2.929-2.929,7.678-2.93,10.606,0c2.929,2.929,2.929,7.678,0,10.606l-17.243,17.242C158.515,59.72,156.595,60.452,154.676,60.452z%22\/%3E%3Cpath%20d=%22M35.709,179.419c-1.919,0-3.839-0.732-5.303-2.197c-2.929-2.929-2.929-7.678,0-10.606l17.243-17.243%20c2.929-2.929,7.678-2.929,10.606,0c2.929,2.929,2.929,7.678,0,10.606l-17.243,17.243C39.548,178.687,37.629,179.419,35.709,179.419z%22\/%3E%3Cpath%20d=%22M171.918,179.419c-1.919,0-3.839-0.732-5.303-2.197l-17.243-17.243c-2.929-2.929-2.929-7.678,0-10.606%20c2.929-2.929,7.678-2.929,10.606,0l17.243,17.243c2.929,2.929,2.929,7.678,0,10.606%20C175.757,178.687,173.838,179.419,171.918,179.419z%22\/%3E%3Cpath%20d=%22M52.952,60.452c-1.919,0-3.839-0.732-5.303-2.197L30.406,41.013c-2.929-2.929-2.929-7.677,0-10.606%20c2.929-2.929,7.678-2.93,10.606,0l17.243,17.242c2.929,2.929,2.929,7.677,0,10.606C56.791,59.72,54.872,60.452,52.952,60.452z%22\/%3E%3C\/svg%3E%0A%09%09%3C\/div%3E%0A%09%09%3Cdiv%20i$*$d=%22darkLightOverlay%22%3E%0A%09%09%3C\/div%3E%0A%09%3C\/div%3E%0A%3C\/div%3E%0A%0A%3C\/div%3E%20%20%0A%3C\/body%3E%0A%3C\/html%3E&amp;css=#wrapDarkLightSwitch%20%7B%0A%09display:%20inline-block;%0A%09position:%20relative;%0A%09user-select:%20none%0A%7D%0A#darkLightSwitch%20%7B%0A%09cursor:%20pointer;%0A%09padding:%204px%205px%202px;%0A%09position:%20relative;%0A%09display:%20inline-block%0A%7D%0A#darkLightSwitch%20svg%20%7B%0A%09fill:%20#000;%0A%09height:%2024px;%0A%09wi$*$dth:%2024px;%0A%09transition:%20all%201s%0A%7D%0A.darkModeOn%20#darkLightSwitch%20svg%7B%0A%09fill:#FFF%0A%7D%0A#darkLightSvgWrap%7B%0A%09height:24px;%0A%09wi$*$dth:24px;%0A%09overflow:hi$*$dden;%0A%09position:relative;%0A%09transition:all%200.3s;%0A%09margin-bottom:5px%0A%7D%0A#darkLightSwitch:hover%20#darkLightSvgWrap%7B%0A%09transform:scale(1)%20rotate(45deg)%0A%7D%0A.darkModeOn%20#darkLightSvgWrap%20svg%7B%0A%09height:44px;%0A%09wi$*$dth:44px;%0A%09position:absolute;%0A%09transition:all%200.5s;%0A%09top:-10px;%0A%09right:-10px%0A%7D%0A.darkModeOn%20#darkLightSvgWrap%7B%0A%09border-radius:10px%0A%7D%0A#darkLightOverlay%20%7B%0A%09wi$*$dth:%206px;%0A%09height:%2010px;%0A%09position:%20absolute;%0A%09background:%20#FFF;%0A%09transition:%20all%200.5s;%0A%09top:%2011px;%0A%09left:%2016px;%0A%09border-radius:%200%2010px%2010px%200;%0A%7D%0A.darkModeOn%20#darkLightOverlay%7B%0A%09wi$*$dth:22px;%0A%09height:22px;%0A%09border-radius:20px;%0A%09top:0;%0A%09left:0;%0A%09background:%20#456;%0A%7D%0A\/*Your%20custom%20theme%20styles%20below%20this*\/%0Abody%7B%0A%09background:#f7fbff;%0A%09color:#000%0A%7D%0Abody.darkModeOn%7B%0A%09background:#456;%0A%09color:#FFF%0A%7D&amp;js=document.getElementById('wrapDarkLightSwitch').onclick%20=%20function()%20%7B%0A%20%20%20%20document.body.classList.toggle('darkModeOn');%0A%7D\">HTML, CSS, and JavaScript<\/a>, you can create a seamless transition between light and dark modes, catering to the preferences of your audience.<\/p>\n<p>Whether it&#8217;s reducing eye strain \ud83d\udc40 or conserving battery life, dark mode functionality adds value to your website and demonstrates your commitment to user-centric design.<\/p>\n<p>Incorporate this feature into your <a href=\"https:\/\/www.templatemonster.com\/\">website template<\/a> and empower your users with the freedom to choose their preferred viewing experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In recent years, the demand for dark mode \ud83c\udf17&nbsp;options in web design has surged, driven by its aesthetic appeal and potential benefits for user experience. Dark mode not only reduces eye strain, especially in low-light environments, but it also conserves battery life \ud83d\udd0b on devices with OLED screens.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,2,3,5],"tags":[],"class_list":["post-2024","post","type-post","status-publish","format-standard","hentry","category-articles","category-css","category-freebies","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Simple Animated Dark-Light Theme Switch for Your Website<\/title>\n<meta name=\"description\" content=\"The demand for dark mode \ud83c\udf17\u00a0options in web design has surged, driven by its aesthetic appeal and potential benefits for user experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple Animated Dark-Light Theme Switch for Your Website\" \/>\n<meta property=\"og:description\" content=\"The demand for dark mode \ud83c\udf17\u00a0options in web design has surged, driven by its aesthetic appeal and potential benefits for user experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-01T13:09:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-04T08:44:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/03\/dark-light-theme-switch.jpg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Simple Animated Dark-Light Theme Switch for Your Website\",\"datePublished\":\"2025-11-01T13:09:07+00:00\",\"dateModified\":\"2025-11-04T08:44:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/\"},\"wordCount\":650,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/03\/dark-light-theme-switch.jpg\",\"articleSection\":[\"Articles\",\"CSS\",\"Freebies\",\"JavaScript\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/\",\"url\":\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/\",\"name\":\"Simple Animated Dark-Light Theme Switch for Your Website\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/03\/dark-light-theme-switch.jpg\",\"datePublished\":\"2025-11-01T13:09:07+00:00\",\"dateModified\":\"2025-11-04T08:44:32+00:00\",\"description\":\"The demand for dark mode \ud83c\udf17\u00a0options in web design has surged, driven by its aesthetic appeal and potential benefits for user experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/03\/dark-light-theme-switch.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/03\/dark-light-theme-switch.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Simple Animated Dark-Light Theme Switch for Your Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple Animated Dark-Light Theme Switch for Your Website","description":"The demand for dark mode \ud83c\udf17\u00a0options in web design has surged, driven by its aesthetic appeal and potential benefits for user experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/","og_locale":"en_GB","og_type":"article","og_title":"Simple Animated Dark-Light Theme Switch for Your Website","og_description":"The demand for dark mode \ud83c\udf17\u00a0options in web design has surged, driven by its aesthetic appeal and potential benefits for user experience.","og_url":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2025-11-01T13:09:07+00:00","article_modified_time":"2025-11-04T08:44:32+00:00","og_image":[{"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/03\/dark-light-theme-switch.jpg","type":"","width":"","height":""}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Simple Animated Dark-Light Theme Switch for Your Website","datePublished":"2025-11-01T13:09:07+00:00","dateModified":"2025-11-04T08:44:32+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/"},"wordCount":650,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/03\/dark-light-theme-switch.jpg","articleSection":["Articles","CSS","Freebies","JavaScript"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/","url":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/","name":"Simple Animated Dark-Light Theme Switch for Your Website","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/03\/dark-light-theme-switch.jpg","datePublished":"2025-11-01T13:09:07+00:00","dateModified":"2025-11-04T08:44:32+00:00","description":"The demand for dark mode \ud83c\udf17\u00a0options in web design has surged, driven by its aesthetic appeal and potential benefits for user experience.","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/dark-light-template-switch\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/03\/dark-light-theme-switch.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/03\/dark-light-theme-switch.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/dark-light-template-switch\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Simple Animated Dark-Light Theme Switch for Your Website"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/2024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=2024"}],"version-history":[{"count":2,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/2024\/revisions"}],"predecessor-version":[{"id":2425,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/2024\/revisions\/2425"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=2024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=2024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=2024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}