71 lines
2.2 KiB
HTML
71 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
}
|
|
</script>
|
|
<style>
|
|
.toggle-checkbox:checked {
|
|
right: 0;
|
|
border-color: #68d391;
|
|
}
|
|
.toggle-checkbox:checked + .toggle-label {
|
|
background-color: #68d391;
|
|
}
|
|
</style>
|
|
<title>Dark Mode</title>
|
|
</head>
|
|
<body>
|
|
<!-- By default, you can have your project use whatever mode your OS is using. You can use "dark:{class}". You can also set your config to use a class instead of using your OS mode -->
|
|
<div
|
|
class="container mx-auto mt-10 bg-white dark:bg-slate-900 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl"
|
|
>
|
|
<h3
|
|
class="text-slate-900 dark:text-white text-base font-medium tracking-tight"
|
|
>
|
|
Writes Upside-Down
|
|
</h3>
|
|
<p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
|
|
The Zero Gravity Pen can be used to write in any orientation, including
|
|
upside-down. It even works in outer space.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="relative inline-block w-10 mr-2 ml-6 mt-6 align-middle select-none transition duration-200 ease-in"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
name="toggle"
|
|
id="toggle"
|
|
checked
|
|
class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
|
|
/>
|
|
<label
|
|
for="toggle"
|
|
class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"
|
|
></label>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('toggle').addEventListener('change', function () {
|
|
if (this.checked) {
|
|
document.documentElement.classList.add('dark')
|
|
} else {
|
|
document.documentElement.classList.remove('dark')
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
<!-- Credit for toggle button style
|
|
https://tailwindcomponents.com/component/toggle-switch
|
|
-->
|