diff --git a/assets/scripts/themeToggle.js b/assets/scripts/themeToggle.js new file mode 100644 index 0000000..288a55a --- /dev/null +++ b/assets/scripts/themeToggle.js @@ -0,0 +1,18 @@ +const toggleSwitch = document.querySelector('input[type="checkbox"].theme-switch'); + + if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme:dark)').matches)) { + document.documentElement.classList.add('dark'); + toggleSwitch.checked = true; + } else { + document.documentElement.classList.remove('dark') + } + function switchTheme(e) { + if (e.target.checked) { + localStorage.setItem('theme', 'dark'); + document.documentElement.classList.add('dark'); + } else { + localStorage.setItem('theme', 'light'); + document.documentElement.classList.remove('dark') + } + } + toggleSwitch.addEventListener('change', switchTheme, false); \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index adc23b7..d82b87b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { + darkMode: 'selector', content: ["./templates/**/*.html"], theme: { extend: { diff --git a/tailwind.css b/tailwind.css index 8d58a2d..22c3956 100644 --- a/tailwind.css +++ b/tailwind.css @@ -18,6 +18,14 @@ font-family: "JetBrains Mono", sans-serif, system-ui; } + .theme-switch:checked { + @apply transition-transform transform translate-x-6 duration-300; + } + + .theme-switch:checked + .theme-switch-label { + @apply bg-turquoise; + } + h1, h2, h3 { diff --git a/templates/_base.html b/templates/_base.html index afc9bf0..ed7cfa4 100644 --- a/templates/_base.html +++ b/templates/_base.html @@ -20,6 +20,8 @@ + + diff --git a/templates/_navbar.html b/templates/_navbar.html index 147fce0..be0e4e0 100644 --- a/templates/_navbar.html +++ b/templates/_navbar.html @@ -13,28 +13,44 @@

Account

- \ No newline at end of file