tailwind-theme-switcher
Version:
A plugin to enable theme switching in the tailwind
108 lines (105 loc) • 5.04 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link rel="stylesheet" href="/build/tailwind.css" />
<title>Tailwind theme switch</title>
<style>
#check:checked + span > span{
transform: translate(100%, 0);
}
</style>
</head>
<body class="antialiased">
<div class="bg-bg">
<div class="h-64 left-0 top-0 w-full bg-primary absolute"></div>
<div class="container m-auto p-6 relative">
<div class="text-text p-16 text-center bg-bgalt relative mt-24 shadow">
<h1 class="text-4xl font-bold">Tailwind Theme Switch</h1>
<p class="mt-4 text-xl">
A demo page to illustrate theme switch in tailwind
</p>
<p class="mt-2 inline-flex text-xl">
<span>Dark mode</span>
<span class="mx-4">
<label class="relative align-middle">
<input type="checkbox" id="check" class="invisible absolute"/>
<span class="w-12 rounded-full h-6 relative inline-block border-border border-2 text-m">
<span class="absolute duration-200 transition-transform left-0 z-10 w-6 h-full rounded-full bg-text t-0"></span>
</span>
</label>
</span>
</p>
</div>
<div class="lg:flex mt-12 bg-bg">
<div class="lg:w-1/3 p-4">
<div class="shadow-md bg-bgalt">
<img src="https://placeimg.com/640/640/any" class="w-full w-100" alt="Image"/>
<div class="text-text text-xl p-3">
<h3 class="font-bold">Switch</h3>
<p class="text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum vehicula est et ultricies.</p>
</div>
</div>
</div>
<div class="lg:w-1/3 p-4">
<div class="shadow-md bg-bgalt">
<img src="https://placeimg.com/640/640/any?q=1" class="w-full w-100" alt="Image"/>
<div class="text-text text-xl p-3">
<h3 class="font-bold">Switch</h3>
<p class="text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum vehicula est et ultricies.</p>
</div>
</div>
</div>
<div class="lg:w-1/3 p-4">
<div class="shadow-md bg-bgalt">
<img src="https://placeimg.com/640/640/any?q=2" class="w-full w-100" alt="Image"/>
<div class="text-text text-xl p-3">
<h3 class="font-bold">Switch</h3>
<p class="text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum vehicula est et ultricies.</p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-12 p-8 pb-0 h-64 text-center relative">
<div class="absolute h-32 bottom-0 bg-primary w-full left-0"></div>
<div class="container py-16 bg-bgalt relative">
<h2 class="text-text text-3xl font-bold">Tailwind theme switch</h2>
</div>
</div>
</div>
<script>
var checkBox = document.querySelector("#check");
var body = document.querySelector("body");
if(localStorage.getItem("theme")){
checkBox.setAttribute("checked", true);
body.classList.add("theme-dark");
}
checkBox.addEventListener("change", function(e){
if(e.target.checked) {
body.classList.add("theme-dark");
localStorage.setItem("theme", "theme-dark");
} else {
body.classList.remove("theme-dark");
localStorage.removeItem("theme");
}
})
</script>
</body>
</html>