How to Implement Dark Mode in the AdminLTE Theme Using Laravel, Vue 3, Pinia, and LocalStorage?

all right welcome back to another interesting video and in this video I will show you how we can switch between light mode and dark mode so first of all let me give you the demo over here I have this icon and this is representing that we are on light mode now if I click on this icon got changed and we are on dark mode which is great right I can switch between pages and everything's box is expected and now if I refresh the page this will still work which is great I can easily switch between light mode and then dark mode so in this video I will show you how we can do this step by step so make sure to watch this video till the end so now let's get started okay so first of all let's start by adding the icon over here so let me open up the code editor and let me go to app napper actually we have these two links we don't need this for now so let me comment those and let's create another link let me paste that over here and here instead of this name let's add font of some icon so let's do I class equals f a r f a song icon okay now we see the sound icon right now when someone click on this icon then we need to listen for that click event and call the function so let's do that over here on this anchor tag let's listen for the click event and let's prevent the default behavior and let's call the method called change theme okay and we need to create this method so let me add the script setup section over here script setup let's create that method change the same and for now let's just alert here now let me try this let me click on and we see this a lot so first of all let's start by defining the state to represent whether we are on dark mode or light mode so let's do that and to Define this let's let's use Global store so let me go over here on stores inside of this setting store let me create another state let me give it a name called theme and by default let's make this as light and to change the theme let me create another function so let's do const sense theme and this function will change this state okay so over here let's do theme dot value equals if you are on the light mode so if the theme dot value is light then let's change this to dark otherwise let's send this to light okay and now we have this function so let's make this available so that we can use in our template so here return the change theme and now inside of app number we can import this store and here let's import use settings store from stores and then settings store okay so let's define this setting store and let's call the function use setting store and now inside of our template we can simply use that action that we have defined on use setting store okay we have defined distance theme so we can directly use that in our template so for that let me remove this from here and on this setting store over here let's do setting store dot change theme okay now let me go over setting store and to show you let me do alert here on stir so now let me try this and we are getting that alert message which is great let me remove this and to apply dark mode on this admin LTE theme we can simply add one class so that class is dark mode so if I go over here on our app.view file over here we have this class now if I add the class called Dark mode then it will apply dark mode on our application which is really great right but there is one issue over here on our navigation bar we still see this light theme so we need to fix that and we need to make this toga level right so currently we are manually adding dark mode over here so now if I remove this then dark mode is gone so to apply the class dynamically we can do classicals and here on the top we need to import settings store so that we can use that let's import that use setting store from settings to and let's define that setting store equals use setting store and over here we can do setting store dot theme is dark then let's apply the glass called Dark mode otherwise do nothing okay now let me try this let me click over here and we are getting the issue because we misspelled this so let's fix this use setting store and now this is fine and here we are still getting the issue because we forgot to add this theme inside of this written object so let's make theme available so that we can use this on our template now let me try this if I click on this dark theme is applied again if I click on this then light theme is applied but now if I click on this again we are on Dark theme but if I refresh the paste then that is gone right so we need to fix this and the another thing is let's add this icon dynamically as well currently it is just showing the sound icon so when on dark mode let's use Moon icon so let's do that let me go over app number and let's add this class conditionally so here let's define the class and inside this we can add the condition if the settings store theme is dark then add the class called fa Moon otherwise at the class called Faison okay now let me try this we are on dark mode we are seeing this Moon we are on light mode and we see the sun which is great and here on this navigation bar we are still seeing this light theme let's fix this as well so here we have this class called number light and number white so let's make this dynamic as well so let me remove this and let's add the class and we can say if our settings store dot theme is dark then apply the classical number dark otherwise never light okay now let me go to the browser and we see this dark mode applied on our navigation bar response which is great let me switch the light mode light theme dark mode Dark theme but now if I refresh the piece then our Dark theme is gone right so let's fix this So currently we are just storing that value on our store and it will get removed if we refresh the page right and in search cases we can use local storage and in this video I will show you how we can use we use library and this Library consists of lots of cool composables and those are reusable so in this video we'll be using use storage so let me click on get started and let's install this Library first npm install view use core and let me search for local storage and here we have it use local storage and for the uses we can prefer to use stories so to use this we can simply import use storage from the US score so let me go over here and inside of this Global store we can simply use composables so we can simply import that use store composable from view score over here let's use that use storage and for the key let's give it this name called setting store colon and this state name so that it will be easy to identify theme and as the second argument we can pass ref and by default is light and here we are storing this value inside of our local storage with the key name considering store call on theme so now let me refresh the page over here and if I open up the console let me go to application Tab and here instead of local storage let me click on this and here we have this key call settings store column theme and currently we are on light mode and now if I change this to dark mode we are in dark mode right and this value also got changed and after doing this now if I refresh the paste then we are on dark mode as well because we are getting that value from our local stories right which is really great let me close this let me click on logout and here we don't see that dark mode so let's fix this as well let me go to app.view and over here let's apply the same class our login page as well so let's add that class now we see this dark theme and we can also extract this code into computed method so let's do that let's create another method let's say current theme mode use computed function and insert this we can return setting store dot theme is dark then return dark mode otherwise do nothing and we can simply use this instead of this code can remove this and use current theme mode you can do the same over here as well and this is great I can click on sign in and we are on dashboard page all right this was for this video I hope this video was helpful for you make sure to like share and subscribe to this channel as I'll be uploading the videos like this so till then have a great time and I will see you on the next one [Music]

Channel: Clovon

Views: 1,827

Keywords: coding, tutorial, laravel, laravel 9 and vue 3 tutorial, laravel and vue 3 project, laravel admin panel, laravel vue adminlte, laravel admin, vue3 tutorial, laravel application development, learn laravel 9, learn laravel framework, laravel crud, laravel crud tutorial, laravel how to, adminlte with php, vue 3 events, laravel vue popup modal, laravel vue 3 tutorials, dark mode, how to add dark mode in adminlte theme using laravel and vue 3, localStorage, pinia

Id: 7Q0CC0LyW3s

Length: 10min 32sec (632 seconds)

Published: Tue Sep 05 2023