Viyurz/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add theme toggle

Browse source
This commit is contained in:
Viyurz 2024-09-28 13:45:52 +02:00
parent 44de54fd84
commit fa420b1702
Signed by: Viyurz
SSH key fingerprint: SHA256:IskOHTmhHSJIvAt04N6aaxd5SZCVWW1Guf9tEcxIMj8
5 changed files with 65 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
assets/scripts/themeToggle.js Normal file
View 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
tailwind.config.js
View file

@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
darkMode: 'selector',
content: ["./templates/**/*.html"], content: ["./templates/**/*.html"],
theme: { theme: {
extend: { extend: {

8
tailwind.css
View file

@ -18,6 +18,14 @@
font-family: "JetBrains Mono", sans-serif, system-ui; 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, h1,
h2, h2,
h3 { h3 {

2
templates/_base.html
View file

@ -20,6 +20,8 @@
<link rel="stylesheet" href="/assets/fa/all.min.css"> <link rel="stylesheet" href="/assets/fa/all.min.css">
<link rel="preload" href="/assets/index.css" as="style"> <link rel="preload" href="/assets/index.css" as="style">
<link rel="preload" href="/assets/fa/all.min.css" as="style"> <link rel="preload" href="/assets/fa/all.min.css" as="style">
<script async src="/assets/scripts/themeToggle.js"></script>
</head> </head>
<body class="flex flex-col min-h-screen bg-base dark:bg-base-dark text-sm text-text dark:text-text-dark"> <body class="flex flex-col min-h-screen bg-base dark:bg-base-dark text-sm text-text dark:text-text-dark">

56
templates/_navbar.html
View file

@ -13,28 +13,44 @@
<h2><a href="https://kc.viyurz.fr/" target="_blank">Account</a></h2> <h2><a href="https://kc.viyurz.fr/" target="_blank">Account</a></h2>
</div> </div>
<div class="basis-1/6 flex flex-row justify-end items-center"> <div class="basis-1/6 flex flex-row justify-end items-center">
<div class="hidden relative inline-block opacity-10"> <div class="flex items-center z-30"></div>
<div> <svg class="h-5 w-5 mr-2 text-surface" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<button type="button" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="md:before:content-['Language'] inline-flex w-full justify-center gap-x-1.5 px-3 py-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" />
id="menu-button" aria-expanded="true" aria-haspopup="true"> </svg>
<svg class="-mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <div class="relative inline-block w-10 select-none">
<path fill-rule="evenodd" <input type="checkbox" name="toggleTheme" id="toggleTheme"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" 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">
clip-rule="evenodd" /> <label for="toggleTheme"
</svg> class="theme-switch-label block overflow-hidden w-12 h-6 rounded-full bg-surface cursor-pointer"></label>
</button> </div>
</div> <svg class="h-5 w-5 ml-4 text-turquoise" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div class="hidden absolute right-0 z-10 mt-2 text-right origin-top-right rounded-lg border border-overlay dark:border-overlay-dark bg-surface dark:bg-surface-dark focus:outline-none" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1"> 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" />
<div class="py-1" role="none"> </svg>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" </div>
id="menu-item-0">English</a> <div class="hidden relative inline-block opacity-10">
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" <div>
id="menu-item-1">Français</a> <button type="button"
</div> class="md:before:content-['Language'] inline-flex w-full justify-center gap-x-1.5 px-3 py-2"
id="menu-button" aria-expanded="true" aria-haspopup="true">
<svg class="-mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="hidden absolute right-0 z-10 mt-2 text-right origin-top-right rounded-lg border border-overlay dark:border-overlay-dark bg-surface dark:bg-surface-dark focus:outline-none"
role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1"
id="menu-item-0">English</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1"
id="menu-item-1">Français</a>
</div> </div>
</div> </div>
</div>
</div> </div>
</nav> </nav>