From 5fd8d899fa1069c26e8522f2eb8712f41de30c28 Mon Sep 17 00:00:00 2001 From: Florin D Date: Wed, 26 Aug 2020 22:42:27 +0300 Subject: [PATCH 1/5] Solved flickering bug for dark mode and added script to head --- dark-mode-switch.js | 79 +++++++++++++++++++++++++++++++++++++---- dark-mode-switch.min.js | 2 +- dark-mode.css | 16 --------- index.html | 5 ++- 4 files changed, 76 insertions(+), 26 deletions(-) delete mode 100644 dark-mode.css diff --git a/dark-mode-switch.js b/dark-mode-switch.js index aa34359..6dcd7ec 100644 --- a/dark-mode-switch.js +++ b/dark-mode-switch.js @@ -1,5 +1,21 @@ -const darkSwitch = document.getElementById('darkSwitch'); +// Global darkSwitch +var darkSwitch = null; + +/** + * Execute at the beginning of the document + * If this is placed in there will be no flickering + */ +(function () { + const darkThemeSelected = + localStorage.getItem('darkSwitch') !== null && + localStorage.getItem('darkSwitch') === 'dark'; + + darkThemeSelected ? applyBackgroundTheme("dark") : applyBackgroundTheme("light"); +})(); + +// Initialize js theme controls after document load window.addEventListener('load', () => { + darkSwitch = document.getElementById('darkSwitch'); if (darkSwitch) { initTheme(); darkSwitch.addEventListener('change', () => { @@ -25,23 +41,74 @@ function initTheme() { localStorage.getItem('darkSwitch') !== null && localStorage.getItem('darkSwitch') === 'dark'; darkSwitch.checked = darkThemeSelected; - darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') : - document.body.removeAttribute('data-theme'); } /** * Summary: resetTheme checks if the switch is 'on' or 'off' and if it is toggled - * on it will set the HTML attribute 'data-theme' to dark so the dark-theme CSS is + * on it will set a style with the appropriate background * applied. * @return {void} */ function resetTheme() { if (darkSwitch.checked) { - document.body.setAttribute('data-theme', 'dark'); + applyBackgroundTheme('dark'); localStorage.setItem('darkSwitch', 'dark'); } else { - document.body.removeAttribute('data-theme'); + applyBackgroundTheme('light'); localStorage.removeItem('darkSwitch'); } } + +/** + * Apply the stylesheet with the appropriate theme + * @param {*} color + */ +function applyBackgroundTheme(color) { + // CSS for dark mode + var cssDark = `body { + background-color: #111 !important; + color: #eee; + } + + .bg-light { + background-color: #333 !important; + } + + .bg-white { + background-color: #000 !important; + } + + .bg-black { + background-color: #eee !important; + }`; + + // CSS for light mode + var cssLight = `body { + background-color: #f2f2f2 !important; + color: #212529; + } + + .bg-light { + background-color: #f8f9fa !important; + } + + .bg-white { + background-color: #fff !important; + } + + .bg-black { + background-color: #eee !important; + }`; + + head = document.head || document.getElementsByTagName('head')[0]; + style = document.createElement('style'); + head.appendChild(style); + + style.type = 'text/css'; + if (style.styleSheet) { + style.styleSheet.cssText = color === 'dark' ? cssDark : cssLight; + } else { + style.appendChild(document.createTextNode(color === 'dark' ? cssDark : cssLight)); + } +} \ No newline at end of file diff --git a/dark-mode-switch.min.js b/dark-mode-switch.min.js index d0d68b9..7d9eb02 100644 --- a/dark-mode-switch.min.js +++ b/dark-mode-switch.min.js @@ -1 +1 @@ -const darkSwitch=document.getElementById("darkSwitch");function initTheme(){const e=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch");darkSwitch.checked=e,e?document.body.setAttribute("data-theme","dark"):document.body.removeAttribute("data-theme")}function resetTheme(){darkSwitch.checked?(document.body.setAttribute("data-theme","dark"),localStorage.setItem("darkSwitch","dark")):(document.body.removeAttribute("data-theme"),localStorage.removeItem("darkSwitch"))}window.addEventListener("load",()=>{darkSwitch&&(initTheme(),darkSwitch.addEventListener("change",()=>{resetTheme()}))}); \ No newline at end of file +var darkSwitch=null;function initTheme(){const e=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch");darkSwitch.checked=e}function resetTheme(){darkSwitch.checked?(applyBackgroundTheme("dark"),localStorage.setItem("darkSwitch","dark")):(applyBackgroundTheme("light"),localStorage.removeItem("darkSwitch"))}function applyBackgroundTheme(e){var t="body {\n background-color: #111 !important;\n color: #eee;\n }\n \n .bg-light {\n background-color: #333 !important;\n }\n \n .bg-white {\n background-color: #000 !important;\n }\n \n .bg-black {\n background-color: #eee !important;\n }",n="body {\n background-color: #f2f2f2 !important;\n color: #212529;\n }\n \n .bg-light {\n background-color: #f8f9fa !important;\n }\n \n .bg-white {\n background-color: #fff !important;\n }\n \n .bg-black {\n background-color: #eee !important;\n }";head=document.head||document.getElementsByTagName("head")[0],style=document.createElement("style"),head.appendChild(style),style.type="text/css",style.styleSheet?style.styleSheet.cssText="dark"===e?t:n:style.appendChild(document.createTextNode("dark"===e?t:n))}applyBackgroundTheme(null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch")?"dark":"light"),window.addEventListener("load",()=>{(darkSwitch=document.getElementById("darkSwitch"))&&(initTheme(),darkSwitch.addEventListener("change",()=>{resetTheme()}))}); \ No newline at end of file diff --git a/dark-mode.css b/dark-mode.css deleted file mode 100644 index d81f006..0000000 --- a/dark-mode.css +++ /dev/null @@ -1,16 +0,0 @@ -[data-theme="dark"] { - background-color: #111 !important; - color: #eee; -} - -[data-theme="dark"] .bg-light { - background-color: #333 !important; -} - -[data-theme="dark"] .bg-white { - background-color: #000 !important; -} - -[data-theme="dark"] .bg-black { - background-color: #eee !important; -} \ No newline at end of file diff --git a/index.html b/index.html index 46a65f9..f8df5bd 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,8 @@ - + + @@ -35,8 +36,6 @@

Dark Mode Switch

- - From cc66194cf5ca3da2bf1d5938c00d6dbb7d543d25 Mon Sep 17 00:00:00 2001 From: Florin D Date: Wed, 26 Aug 2020 23:23:41 +0300 Subject: [PATCH 2/5] Fixed variable declaration --- dark-mode-switch.js | 4 ++-- dark-mode-switch.min.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dark-mode-switch.js b/dark-mode-switch.js index 6dcd7ec..60cc41e 100644 --- a/dark-mode-switch.js +++ b/dark-mode-switch.js @@ -101,8 +101,8 @@ function applyBackgroundTheme(color) { background-color: #eee !important; }`; - head = document.head || document.getElementsByTagName('head')[0]; - style = document.createElement('style'); + var head = document.head || document.getElementsByTagName('head')[0]; + var style = document.createElement('style'); head.appendChild(style); style.type = 'text/css'; diff --git a/dark-mode-switch.min.js b/dark-mode-switch.min.js index 7d9eb02..b170192 100644 --- a/dark-mode-switch.min.js +++ b/dark-mode-switch.min.js @@ -1 +1 @@ -var darkSwitch=null;function initTheme(){const e=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch");darkSwitch.checked=e}function resetTheme(){darkSwitch.checked?(applyBackgroundTheme("dark"),localStorage.setItem("darkSwitch","dark")):(applyBackgroundTheme("light"),localStorage.removeItem("darkSwitch"))}function applyBackgroundTheme(e){var t="body {\n background-color: #111 !important;\n color: #eee;\n }\n \n .bg-light {\n background-color: #333 !important;\n }\n \n .bg-white {\n background-color: #000 !important;\n }\n \n .bg-black {\n background-color: #eee !important;\n }",n="body {\n background-color: #f2f2f2 !important;\n color: #212529;\n }\n \n .bg-light {\n background-color: #f8f9fa !important;\n }\n \n .bg-white {\n background-color: #fff !important;\n }\n \n .bg-black {\n background-color: #eee !important;\n }";head=document.head||document.getElementsByTagName("head")[0],style=document.createElement("style"),head.appendChild(style),style.type="text/css",style.styleSheet?style.styleSheet.cssText="dark"===e?t:n:style.appendChild(document.createTextNode("dark"===e?t:n))}applyBackgroundTheme(null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch")?"dark":"light"),window.addEventListener("load",()=>{(darkSwitch=document.getElementById("darkSwitch"))&&(initTheme(),darkSwitch.addEventListener("change",()=>{resetTheme()}))}); \ No newline at end of file +var darkSwitch=null;function initTheme(){const e=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch");darkSwitch.checked=e}function resetTheme(){darkSwitch.checked?(applyBackgroundTheme("dark"),localStorage.setItem("darkSwitch","dark")):(applyBackgroundTheme("light"),localStorage.removeItem("darkSwitch"))}function applyBackgroundTheme(e){var t="body {\n background-color: #111 !important;\n color: #eee;\n }\n \n .bg-light {\n background-color: #333 !important;\n }\n \n .bg-white {\n background-color: #000 !important;\n }\n \n .bg-black {\n background-color: #eee !important;\n }",n="body {\n background-color: #f2f2f2 !important;\n color: #212529;\n }\n \n .bg-light {\n background-color: #f8f9fa !important;\n }\n \n .bg-white {\n background-color: #fff !important;\n }\n \n .bg-black {\n background-color: #eee !important;\n }",a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");a.appendChild(o),o.type="text/css",o.styleSheet?o.styleSheet.cssText="dark"===e?t:n:o.appendChild(document.createTextNode("dark"===e?t:n))}applyBackgroundTheme(null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch")?"dark":"light"),window.addEventListener("load",()=>{(darkSwitch=document.getElementById("darkSwitch"))&&(initTheme(),darkSwitch.addEventListener("change",()=>{resetTheme()}))}); \ No newline at end of file From 7fc6abb0fe57374ed5260c7e3cbe60f78d467a23 Mon Sep 17 00:00:00 2001 From: Florin D Date: Sat, 29 Aug 2020 22:47:13 +0300 Subject: [PATCH 3/5] Added dark mode css --- dark-mode-switch.js | 58 ++++++++++------------------------------- dark-mode-switch.min.js | 2 +- dark-mode.css | 16 ++++++++++++ index.html | 1 - 4 files changed, 31 insertions(+), 46 deletions(-) create mode 100644 dark-mode.css diff --git a/dark-mode-switch.js b/dark-mode-switch.js index 60cc41e..3d3c87a 100644 --- a/dark-mode-switch.js +++ b/dark-mode-switch.js @@ -65,50 +65,20 @@ function resetTheme() { * @param {*} color */ function applyBackgroundTheme(color) { - // CSS for dark mode - var cssDark = `body { - background-color: #111 !important; - color: #eee; - } - - .bg-light { - background-color: #333 !important; - } - - .bg-white { - background-color: #000 !important; - } - - .bg-black { - background-color: #eee !important; - }`; + // CSS path for dark mode + var cssDark = 'dark-mode.css'; - // CSS for light mode - var cssLight = `body { - background-color: #f2f2f2 !important; - color: #212529; - } - - .bg-light { - background-color: #f8f9fa !important; - } - - .bg-white { - background-color: #fff !important; - } - - .bg-black { - background-color: #eee !important; - }`; - - var head = document.head || document.getElementsByTagName('head')[0]; - var style = document.createElement('style'); - head.appendChild(style); - - style.type = 'text/css'; - if (style.styleSheet) { - style.styleSheet.cssText = color === 'dark' ? cssDark : cssLight; - } else { - style.appendChild(document.createTextNode(color === 'dark' ? cssDark : cssLight)); + if (color === 'dark') { // If dark mode is enabled add css + var head = document.head || document.getElementsByTagName('head')[0]; + var style = document.createElement("link"); + style.setAttribute("rel", "stylesheet"); + style.setAttribute("type", "text/css"); + style.setAttribute("href", cssDark); + style.setAttribute("id", "dark-mode-switch"); + head.appendChild(style); + } else { // If light mode is enabled remove style + darkModeStyle = document.getElementById("dark-mode-switch"); + if (darkModeStyle !== null && typeof darkModeStyle !== 'undefined') + darkModeStyle.parentNode.removeChild(darkModeStyle); } } \ No newline at end of file diff --git a/dark-mode-switch.min.js b/dark-mode-switch.min.js index b170192..21f5513 100644 --- a/dark-mode-switch.min.js +++ b/dark-mode-switch.min.js @@ -1 +1 @@ -var darkSwitch=null;function initTheme(){const e=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch");darkSwitch.checked=e}function resetTheme(){darkSwitch.checked?(applyBackgroundTheme("dark"),localStorage.setItem("darkSwitch","dark")):(applyBackgroundTheme("light"),localStorage.removeItem("darkSwitch"))}function applyBackgroundTheme(e){var t="body {\n background-color: #111 !important;\n color: #eee;\n }\n \n .bg-light {\n background-color: #333 !important;\n }\n \n .bg-white {\n background-color: #000 !important;\n }\n \n .bg-black {\n background-color: #eee !important;\n }",n="body {\n background-color: #f2f2f2 !important;\n color: #212529;\n }\n \n .bg-light {\n background-color: #f8f9fa !important;\n }\n \n .bg-white {\n background-color: #fff !important;\n }\n \n .bg-black {\n background-color: #eee !important;\n }",a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");a.appendChild(o),o.type="text/css",o.styleSheet?o.styleSheet.cssText="dark"===e?t:n:o.appendChild(document.createTextNode("dark"===e?t:n))}applyBackgroundTheme(null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch")?"dark":"light"),window.addEventListener("load",()=>{(darkSwitch=document.getElementById("darkSwitch"))&&(initTheme(),darkSwitch.addEventListener("change",()=>{resetTheme()}))}); \ No newline at end of file +var darkSwitch=null;function initTheme(){const e=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch");darkSwitch.checked=e}function resetTheme(){darkSwitch.checked?(applyBackgroundTheme("dark"),localStorage.setItem("darkSwitch","dark")):(applyBackgroundTheme("light"),localStorage.removeItem("darkSwitch"))}function applyBackgroundTheme(e){if("dark"===e){var t=document.head||document.getElementsByTagName("head")[0],d=document.createElement("link");d.setAttribute("rel","stylesheet"),d.setAttribute("type","text/css"),d.setAttribute("href","dark-mode.css"),d.setAttribute("id","dark-mode-switch"),t.appendChild(d)}else darkModeStyle=document.getElementById("dark-mode-switch"),null!==darkModeStyle&&"undefined"!=typeof darkModeStyle&&darkModeStyle.parentNode.removeChild(darkModeStyle)}applyBackgroundTheme(null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch")?"dark":"light"),window.addEventListener("load",()=>{(darkSwitch=document.getElementById("darkSwitch"))&&(initTheme(),darkSwitch.addEventListener("change",()=>{resetTheme()}))}); \ No newline at end of file diff --git a/dark-mode.css b/dark-mode.css new file mode 100644 index 0000000..f4c9c33 --- /dev/null +++ b/dark-mode.css @@ -0,0 +1,16 @@ +body { + background-color: #111 !important; + color: #eee; +} + +.bg-light { + background-color: #333 !important; +} + +.bg-white { + background-color: #000 !important; +} + +.bg-black { + background-color: #eee !important; +} diff --git a/index.html b/index.html index f8df5bd..a6b96d9 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,6 @@ - From 9901cc71c1e781abf517d8ca9e099b32e3cf0602 Mon Sep 17 00:00:00 2001 From: Florin D Date: Sat, 29 Aug 2020 22:47:13 +0300 Subject: [PATCH 4/5] Added dark mode css --- dark-mode-switch.js | 58 ++++++++++------------------------------- dark-mode-switch.min.js | 2 +- dark-mode.css | 16 ++++++++++++ index.html | 1 - 4 files changed, 31 insertions(+), 46 deletions(-) create mode 100644 dark-mode.css diff --git a/dark-mode-switch.js b/dark-mode-switch.js index 60cc41e..3d3c87a 100644 --- a/dark-mode-switch.js +++ b/dark-mode-switch.js @@ -65,50 +65,20 @@ function resetTheme() { * @param {*} color */ function applyBackgroundTheme(color) { - // CSS for dark mode - var cssDark = `body { - background-color: #111 !important; - color: #eee; - } - - .bg-light { - background-color: #333 !important; - } - - .bg-white { - background-color: #000 !important; - } - - .bg-black { - background-color: #eee !important; - }`; + // CSS path for dark mode + var cssDark = 'dark-mode.css'; - // CSS for light mode - var cssLight = `body { - background-color: #f2f2f2 !important; - color: #212529; - } - - .bg-light { - background-color: #f8f9fa !important; - } - - .bg-white { - background-color: #fff !important; - } - - .bg-black { - background-color: #eee !important; - }`; - - var head = document.head || document.getElementsByTagName('head')[0]; - var style = document.createElement('style'); - head.appendChild(style); - - style.type = 'text/css'; - if (style.styleSheet) { - style.styleSheet.cssText = color === 'dark' ? cssDark : cssLight; - } else { - style.appendChild(document.createTextNode(color === 'dark' ? cssDark : cssLight)); + if (color === 'dark') { // If dark mode is enabled add css + var head = document.head || document.getElementsByTagName('head')[0]; + var style = document.createElement("link"); + style.setAttribute("rel", "stylesheet"); + style.setAttribute("type", "text/css"); + style.setAttribute("href", cssDark); + style.setAttribute("id", "dark-mode-switch"); + head.appendChild(style); + } else { // If light mode is enabled remove style + darkModeStyle = document.getElementById("dark-mode-switch"); + if (darkModeStyle !== null && typeof darkModeStyle !== 'undefined') + darkModeStyle.parentNode.removeChild(darkModeStyle); } } \ No newline at end of file diff --git a/dark-mode-switch.min.js b/dark-mode-switch.min.js index b170192..21f5513 100644 --- a/dark-mode-switch.min.js +++ b/dark-mode-switch.min.js @@ -1 +1 @@ -var darkSwitch=null;function initTheme(){const e=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch");darkSwitch.checked=e}function resetTheme(){darkSwitch.checked?(applyBackgroundTheme("dark"),localStorage.setItem("darkSwitch","dark")):(applyBackgroundTheme("light"),localStorage.removeItem("darkSwitch"))}function applyBackgroundTheme(e){var t="body {\n background-color: #111 !important;\n color: #eee;\n }\n \n .bg-light {\n background-color: #333 !important;\n }\n \n .bg-white {\n background-color: #000 !important;\n }\n \n .bg-black {\n background-color: #eee !important;\n }",n="body {\n background-color: #f2f2f2 !important;\n color: #212529;\n }\n \n .bg-light {\n background-color: #f8f9fa !important;\n }\n \n .bg-white {\n background-color: #fff !important;\n }\n \n .bg-black {\n background-color: #eee !important;\n }",a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");a.appendChild(o),o.type="text/css",o.styleSheet?o.styleSheet.cssText="dark"===e?t:n:o.appendChild(document.createTextNode("dark"===e?t:n))}applyBackgroundTheme(null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch")?"dark":"light"),window.addEventListener("load",()=>{(darkSwitch=document.getElementById("darkSwitch"))&&(initTheme(),darkSwitch.addEventListener("change",()=>{resetTheme()}))}); \ No newline at end of file +var darkSwitch=null;function initTheme(){const e=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch");darkSwitch.checked=e}function resetTheme(){darkSwitch.checked?(applyBackgroundTheme("dark"),localStorage.setItem("darkSwitch","dark")):(applyBackgroundTheme("light"),localStorage.removeItem("darkSwitch"))}function applyBackgroundTheme(e){if("dark"===e){var t=document.head||document.getElementsByTagName("head")[0],d=document.createElement("link");d.setAttribute("rel","stylesheet"),d.setAttribute("type","text/css"),d.setAttribute("href","dark-mode.css"),d.setAttribute("id","dark-mode-switch"),t.appendChild(d)}else darkModeStyle=document.getElementById("dark-mode-switch"),null!==darkModeStyle&&"undefined"!=typeof darkModeStyle&&darkModeStyle.parentNode.removeChild(darkModeStyle)}applyBackgroundTheme(null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch")?"dark":"light"),window.addEventListener("load",()=>{(darkSwitch=document.getElementById("darkSwitch"))&&(initTheme(),darkSwitch.addEventListener("change",()=>{resetTheme()}))}); \ No newline at end of file diff --git a/dark-mode.css b/dark-mode.css new file mode 100644 index 0000000..f4c9c33 --- /dev/null +++ b/dark-mode.css @@ -0,0 +1,16 @@ +body { + background-color: #111 !important; + color: #eee; +} + +.bg-light { + background-color: #333 !important; +} + +.bg-white { + background-color: #000 !important; +} + +.bg-black { + background-color: #eee !important; +} diff --git a/index.html b/index.html index f8df5bd..a6b96d9 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,6 @@ - From d0c2f78bc1f32fffbdbdb44c21718d07a7324499 Mon Sep 17 00:00:00 2001 From: Florin D Date: Sat, 29 Aug 2020 22:58:10 +0300 Subject: [PATCH 5/5] Added missing variable declaration --- dark-mode-switch.js | 2 +- dark-mode-switch.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dark-mode-switch.js b/dark-mode-switch.js index 3d3c87a..efff8cb 100644 --- a/dark-mode-switch.js +++ b/dark-mode-switch.js @@ -77,7 +77,7 @@ function applyBackgroundTheme(color) { style.setAttribute("id", "dark-mode-switch"); head.appendChild(style); } else { // If light mode is enabled remove style - darkModeStyle = document.getElementById("dark-mode-switch"); + var darkModeStyle = document.getElementById("dark-mode-switch"); if (darkModeStyle !== null && typeof darkModeStyle !== 'undefined') darkModeStyle.parentNode.removeChild(darkModeStyle); } diff --git a/dark-mode-switch.min.js b/dark-mode-switch.min.js index 21f5513..c48774f 100644 --- a/dark-mode-switch.min.js +++ b/dark-mode-switch.min.js @@ -1 +1 @@ -var darkSwitch=null;function initTheme(){const e=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch");darkSwitch.checked=e}function resetTheme(){darkSwitch.checked?(applyBackgroundTheme("dark"),localStorage.setItem("darkSwitch","dark")):(applyBackgroundTheme("light"),localStorage.removeItem("darkSwitch"))}function applyBackgroundTheme(e){if("dark"===e){var t=document.head||document.getElementsByTagName("head")[0],d=document.createElement("link");d.setAttribute("rel","stylesheet"),d.setAttribute("type","text/css"),d.setAttribute("href","dark-mode.css"),d.setAttribute("id","dark-mode-switch"),t.appendChild(d)}else darkModeStyle=document.getElementById("dark-mode-switch"),null!==darkModeStyle&&"undefined"!=typeof darkModeStyle&&darkModeStyle.parentNode.removeChild(darkModeStyle)}applyBackgroundTheme(null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch")?"dark":"light"),window.addEventListener("load",()=>{(darkSwitch=document.getElementById("darkSwitch"))&&(initTheme(),darkSwitch.addEventListener("change",()=>{resetTheme()}))}); \ No newline at end of file +var darkSwitch=null;function initTheme(){const e=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch");darkSwitch.checked=e}function resetTheme(){darkSwitch.checked?(applyBackgroundTheme("dark"),localStorage.setItem("darkSwitch","dark")):(applyBackgroundTheme("light"),localStorage.removeItem("darkSwitch"))}function applyBackgroundTheme(e){if("dark"===e){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("link");a.setAttribute("rel","stylesheet"),a.setAttribute("type","text/css"),a.setAttribute("href","dark-mode.css"),a.setAttribute("id","dark-mode-switch"),t.appendChild(a)}else{var d=document.getElementById("dark-mode-switch");null!=d&&d.parentNode.removeChild(d)}}applyBackgroundTheme(null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch")?"dark":"light"),window.addEventListener("load",()=>{(darkSwitch=document.getElementById("darkSwitch"))&&(initTheme(),darkSwitch.addEventListener("change",()=>{resetTheme()}))}); \ No newline at end of file