TailwindCSS ធ្វើ dark mode ហើយនេះគឺរបៀបធ្វើ dark mode
<div class="w-full h-40 dark:bg-slate-800 text-white p-2 border border-gray">
<h1 class="text-xl text-slate-700 dark:text-white">Content of Dark mode</h1>
<p class="text-slate-500 dark:text-slate-100">
div.w-full.h-40.dark:bg-slate-800.text-white.p-2 border.border-gray>h1.text-xl.text-slate-700.dark:text-white
>p.text-slate-500.dark:text-slate-100
</p>
</div>
នេះវាដើរសាស្រ័យលើ system device ប្រសិនជា device light នោះនឹងចេញពណ៌ស
វិធីបិទមួយគឺ add javaScript ដូចខាងក្រោមនេះ
</head>
<script>
tailwind.config = {
darkMode: 'class'
}
</script>
<body>
ចំណែកបើកវាវីញយើងបន្លែម class
<html lang="en" class="dark">
ប្រើជាមួយ button
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<script>
tailwind.config = {
darkMode: 'class'
}
</script>
<style>
.toggle-checkbox:checked{
right: 0;
background-color: aquamarine;
}
.toggle-checkbox:checked +.toggle-label{
background-color: aquamarine;
}
</style>
<body>
<div class="w-full h-40 dark:bg-slate-800 text-white p-2 border border-gray">
<h1 class="text-xl text-slate-700 dark:text-white">Content of Dark mode</h1>
<p class="text-slate-500 dark:text-slate-100">
div.w-full.h-40.dark:bg-slate-800.text-white.p-2 border.border-gray>h1.text-xl.text-slate-700.dark:text-white
>p.text-slate-500.dark:text-slate-100
</p>
</div>
<!-- Dark mode butto -->
<div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in ">
<input type="checkbox" name="toggle" id="toggle" 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>
</body>
<script>
document.getElementById('toggle').addEventListener('change',function(){
if(this.checked){
document.documentElement.classList.add('dark')
}else{
document.documentElement.classList.remove('dark')
}
})
</script>
</html>
0 Comments