Enable Dark Mode in Tailwind + Laravel and Vue - 2 WAYS
Im going to show you how you can enable dark mode in telwin regardless of whether you are using Laravel and Vue or in my case both This is a Laravel project in which I have a section with Vue and obviously here I am using Tailwind classes It is a feature of telwin This is the first thing you have to keep in mind Here of course we are using a node project with everything that this implies and with this when we install Tailwind we can expose what the configuration file is which I dont see here it is
tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
}So from here we have two paths
One is to force it so that dark mode is always used in your application by default and you cant disable it unless you come back here to change the settings usually this is the one we dont want since usually If you want dark mode it is because you also want to have light mode enabled or at least give the option which is more than all I want to talk about So if you want to force dark mode you simply put it here put Dark Mode and here you put
When we install Tailwind we can expose what the configuration file is which I dont see here it is
tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
}By user selection
That would be practically everything but if you want to make it optional which is the most interesting part things change a little It is very simple The first thing I want to tell you is that the first thing you have to do here is enable it here place class dark here
<html class="dark">This is simply a function that I trigger using an event and thus modify the html so here the first thing is that if you are using Vue you can also use the selectors without any problem since well we are not here using something that is defined here at the level of this component it is directly the html so here I do the toggle as you can see here the property that tells me what mode I am in that would be practically all for the rest here I trigger this up here in a click event of a little button that I have well Ill show it to you with a cbg and that would be all and from there that property that I showed you can be used to well change the color for example of the little icon so that it is understood there at least for the moment I have it this way but then how do we change the background color how is it defined etcetera
<button class="translate-y-1" @click="darkModeToggle">***
darkModeToggle() {
document.querySelector("html").classList.toggle("dark");
this.isDarkMode = !this.isDarkMode
},Thats where it comes in The first thing you have to keep in mind is what was mentioned which is that you have to place the dar class here to activate the dark mode and if you dont want the dark mode you simply remove it and thats why I had the Script here that I showed you before therefore in my case by default the dark mode is shown but I remove it and it shows the light mode and we can emulate this using javascript which was what was mentioned So the first thing is the class to Activate the dark mode but the interesting thing here is that it is optional so how can we define what colors we want for the dark mode very easily and simply
Now you have to add for the style that you want to apply specifically for the dark mode you add the prefix of giving two points and the color that you want to use in this case it is for a text a link that appears here that says see in Academy that has this and appears in white which is what I have here Notice that if I remove it then it will take the color that it has by default which would be here in purple that as it is very dark So I put it better in white and purple is the one used here in the good mode in the light mode So to speak and it is simply that You simply have to go component by component and add this class but what happens if you have the style in a style sheet you can also do it without problems here I simply look for example in this case I have a style for a letter and here you place it as is you place such and the color that you want to use in dark mode and that would be all And from here obviously if I for example am here in light mode and I start browsing as it is a spa application with Vue it works correctly but if I reload it already returns to dark mode for make this persistent and there you have to use the characteristics of the technology you are using which is already the Telwin layer if it is Vue you can use a Cookie or directly the browser storage There are many ways the browser has like three or four ways to store data persistently or in the case of Arabic which I think is how I am going to do it I am going to store it in a database and I bring it with information from the authenticated user so thats it That was what I wanted to talk to you about and without further ado Ill see you in another video
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter