1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- <!-- js from https://codepen.io/MrGrigri/pen/XQmWBv -->
- <script>
- // @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
- const themePreference = () => {
- const hasLocalStorage = localStorage.getItem('theme');
- let supports = false;
- let theme = undefined;
- if (hasLocalStorage === 'light') {
- theme = 'light';
- }
- if (hasLocalStorage === 'dark') {
- theme = 'dark';
- }
- if (window.matchMedia(`(prefers_color: dark)`).matches) {
- theme = hasLocalStorage ? hasLocalStorage : 'dark';
- supports = true;
- };
- if (window.matchMedia(`(prefers_color: light)`).matches) {
- theme = hasLocalStorage ? hasLocalStorage : 'light';
- supports = true;
- };
- if (window.matchMedia(`(prefers_color: no-preference)`).matches) {
- theme = hasLocalStorage ? hasLocalStorage : 'none';
- supports = true;
- };
- return {
- supports,
- theme
- };
- }
- document.addEventListener('DOMContentLoaded', e => {
- console.clear();
- const userThemePreference = themePreference();
- const toggle = document.querySelector('[theme_toggle]');
- const html = document.documentElement;
- const setTheme = () => {
- switch (userThemePreference.theme) {
- case 'dark':
- toggle.checked = true;
- html.classList.add('dark');
- html.classList.remove('light');
- break;
- case 'light':
- toggle.checked = false;
- html.classList.remove('dark');
- html.classList.add('light');
- break;
- }
- }
- setTheme();
- toggle.addEventListener('click', e => {
- if (toggle.checked) {
- html.classList.add('dark');
- html.classList.remove('light');
- localStorage.setItem('theme', 'dark');
- } else {
- html.classList.remove('dark');
- html.classList.add('light');
- localStorage.setItem('theme', 'light');
- }
- }, false);
- }, false);
- // @license-end
- </script>
|