Add theme toggle
This commit is contained in:
parent
44de54fd84
commit
fa420b1702
5 changed files with 65 additions and 20 deletions
18
assets/scripts/themeToggle.js
Normal file
18
assets/scripts/themeToggle.js
Normal file
|
@ -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);
|
|
@ -1,5 +1,6 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: 'selector',
|
||||
content: ["./templates/**/*.html"],
|
||||
theme: {
|
||||
extend: {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -20,6 +20,8 @@
|
|||
<link rel="stylesheet" href="/assets/fa/all.min.css">
|
||||
<link rel="preload" href="/assets/index.css" as="style">
|
||||
<link rel="preload" href="/assets/fa/all.min.css" as="style">
|
||||
|
||||
<script async src="/assets/scripts/themeToggle.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col min-h-screen bg-base dark:bg-base-dark text-sm text-text dark:text-text-dark">
|
||||
|
|
|
@ -13,6 +13,22 @@
|
|||
<h2><a href="https://kc.viyurz.fr/" target="_blank">Account</a></h2>
|
||||
</div>
|
||||
<div class="basis-1/6 flex flex-row justify-end items-center">
|
||||
<div class="flex items-center z-30"></div>
|
||||
<svg class="h-5 w-5 mr-2 text-surface" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
<div class="relative inline-block w-10 select-none">
|
||||
<input type="checkbox" name="toggleTheme" id="toggleTheme"
|
||||
class="transition-transform transform translate-x-0 duration-300 theme-switch absolute block w-4 h-4 rounded-full bg-overlay appearance-none cursor-pointer mx-1 my-1">
|
||||
<label for="toggleTheme"
|
||||
class="theme-switch-label block overflow-hidden w-12 h-6 rounded-full bg-surface cursor-pointer"></label>
|
||||
</div>
|
||||
<svg class="h-5 w-5 ml-4 text-turquoise" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden relative inline-block opacity-10">
|
||||
<div>
|
||||
<button type="button"
|
||||
|
|
Loading…
Reference in a new issue