Thomas Cole
e8a9da1185
All checks were successful
continuous-integration/drone/push Build is passing
44 lines
1.2 KiB
Plaintext
44 lines
1.2 KiB
Plaintext
<!-- Could be remade as svelte component.
|
|
For the 3 lines of javascript needed I think its okay to use a script tag -->
|
|
|
|
<style>
|
|
#themetoggle~.dot {
|
|
background-color: #e2e2e2;
|
|
}
|
|
|
|
#themetoggle:checked~.dot {
|
|
transform: translateX(100%);
|
|
background-color: #202020;
|
|
}
|
|
|
|
#themetoggle~.capsule {
|
|
background-color: #181a2a;
|
|
}
|
|
|
|
#themetoggle:checked~.capsule {
|
|
background-color: #cecece;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
let theme = localStorage.getItem("theme");
|
|
if (theme == "business") {
|
|
document.getElementById("themetoggle").checked = true;
|
|
}
|
|
</script>
|
|
|
|
<div class="flex items-center justify-center w-full">
|
|
<span class="material-symbols-outlined mx-2">
|
|
light_mode
|
|
</span>
|
|
<label for="themetoggle" class="flex items-center cursor-pointer">
|
|
<div class="relative">
|
|
<input type="checkbox" id="themetoggle" class="sr-only" data-toggle-theme="business,corporate">
|
|
<div class="capsule block w-14 h-8 rounded-full"></div>
|
|
<div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
|
|
</div>
|
|
</label>
|
|
<span class="material-symbols-outlined mx-2">
|
|
nightlight
|
|
</span>
|
|
</div> |