Currently, I am working on a small project utilizing tailwindCSS and have decided to incorporate a dark mode feature. To achieve this, I created a button that toggles the dark class in the html tag. However, upon testing the functionality, I noticed that the switch between modes happens abruptly, which doesn't look very smooth. Is there a way to add a transition duration or timing function to make this change more visually appealing?
Below is the basic code snippet illustrating how I am managing this toggle (using vue):
<template>
<input @click="darkClassToggle" id="toggle" class="toggle" type="checkbox" />
</template>
<script>
export default {
name: "darkModeToggle",
methods: {
darkClassToggle() {
const toggle = document.querySelector(".toggle");
const html = document.firstElementChild;
if (toggle.checked) {
html.classList.remove("dark");
} else {
html.classList.add("dark");
}
},
},
};
</script>
I would greatly appreciate any guidance or suggestions regarding this matter. Thank you.