-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy paththeme-changer-min.js
7 lines (7 loc) · 1.77 KB
/
theme-changer-min.js
1
2
3
4
5
6
7
//! (c) 2022 Paulo Dias (Licence https://opensource.org/licenses/MIT)
(()=>{const insertThemeToggleElementsIntoThemeTogleElement=(()=>{const containerDiv=document.getElementsByClassName('theme-toggle')[0];var labelElem=document.createElement('label');labelElem.classList.add('theme-toggle-switch');labelElem.setAttribute('for','theme-toggle-input');var checkboxElem=document.createElement('input');checkboxElem.setAttribute('type','checkbox');checkboxElem.id='theme-toggle-input';checkboxElem.setAttribute('checked','');var toggleCtlElem=document.createElement('div');toggleCtlElem.classList.add('theme-toggle-switch__control');labelElem.appendChild(checkboxElem);labelElem.appendChild(toggleCtlElem);containerDiv.appendChild(labelElem)})
insertThemeToggleElementsIntoThemeTogleElement();const btn=document.getElementById('theme-toggle-input');const osPreference=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';const preferredTheme=localStorage.getItem('theme')||osPreference;var currentTheme=preferredTheme;const setTheme=(theme,persist=!0)=>{const htmlElem=document.documentElement;if(theme=='dark'){htmlElem.classList.add('dark');htmlElem.classList.remove('light');btn.checked=!0}else{htmlElem.classList.remove('dark');htmlElem.classList.add('light');btn.checked=!1}
currentTheme=theme;if(persist){localStorage.setItem('theme',theme)}}
const updateUI=(theme)=>{}
btn.addEventListener('click',function(){const htmlElem=document.documentElement;if(currentTheme=='dark'){htmlElem.classList.remove('dark');htmlElem.classList.add('light')}else{htmlElem.classList.add('dark');htmlElem.classList.remove('light')}
var theme=currentTheme=='dark'?'light':'dark';currentTheme=theme;localStorage.setItem('theme',theme);updateUI(theme)});setTheme(preferredTheme,!1);updateUI(preferredTheme)})()