Implementing dark themes in our web applications has gone from a luxury to a necessity. Device users now want to switch from light themes to dark themes and vice versa due to both aesthetic preferences and practical reasons.
Dark themes offer a darker color palette for user interfaces, making the interface easy on the eyes in low-light environments. Dark themes also help conserve battery life on devices with OLED or AMOLED screens.
These advantages and more make it more reasonable to give users the choice to switch to dark themes.
Setting Up the Test Application
To get a better understanding of how to add dark themes in Vue, you will need to create a simple Vue app to test-run your development.
To initialize the new Vue app, run the following command from your terminal:
This command will install the latest version of thecreate-vuepackage, the package for initializing new Vue apps. It will also ask you to choose from a particular set of features. You do not need to select any as it is not necessary for the scope of this tutorial.
Add the following template to theApp.vuefile in your application’ssrcdirectory:
The code block above describes the whole application in regular HTML, with no script or style blocks. You’ll use the classes in the above template for styling purposes. As you implement the dark theme, the app’s structure will change.
Styling the Test Application With CSS Variables
CSS variables, or CSS custom properties, are dynamic values you can define in your style sheets. CSS variables provide excellent tooling for theming because they allow you to define and manage values such as colors and font sizes in one place.
You will use CSS variables and CSS pseudo-class selectors to add a regular and a dark mode theme for your Vue application. In thesrc/assetsdirectory, create astyles.cssfile.
Add the following styles to this styles.css file:
These declarations contain a special pseudo-class selector (:root) and an attribute selector ([data-theme=‘true’]). The styles you include in a root selector target the highest parent element. It acts as the default styling for the web page.
The data-theme selector targets HTML elements with that attribute set to true. In this attribute selector, you can then define styles for the dark mode theme, to override the default light theme.
These declarations both define CSS variables using the–prefix. They store color values which you can then use to style the application for light and dark themes.
Edit thesrc/main.jsfile and import the styles.css file:
Now add some more styles instyles.css, below thedata-themeselector. Some of these definitions will reference the color variables using thevarkeyword. This lets you change the colors in use simply by switching the value of each variable, as the initial styles do.
You can set a transition property on all elements using the universal CSS selector (*) to create a smooth animation when switching modes:
These transitions create a gradual change in background color and text color when dark mode is toggled, giving a pleasing effect.
Implementing the Dark Mode Logic
To implement the dark theme mode, you will need JavaScript logic to switch between light and dark themes. In yourApp.vuefile, paste the following script block below the template block written inVue’s Composition API:
The script above includes all JavaScript logic for switching between the light and dark modes in your web app. The script begins with animportstatement to import the ref function for handling reactive data (dynamic data) in Vue.
Next, it defines agetInitialDarkModefunction which retrieves the user’s dark mode preference fromthe browser’sLocalStorage. It declares thedarkModeref, initializing it with the user’s preference retrieved by the getInitialDarkMode function.
ThesaveDarkModePreferencefunction updates the user’s dark mode preference in the browser’s LocalStorage with thesetItemmethod. Finally, thetoggleDarkModefunction will let users toggle the dark mode and update the browser’s LocalStorage value for the dark mode.
Applying the Dark Mode Theme and Testing the Application
Now, in the template block of yourApp.vuefile, add the data-theme attribute selector to the root element to conditional apply the dark mode theme based on your logic:
Here, you’re binding the data-theme selector to the darkMode ref. This ensures that whendarkModeis true, the dark theme will take effect. The click event listener on the button toggles between light and dark modes.
Run the following command in your terminal to preview the application:
You should see a screen like this:
When you click the button, the app should toggle between light and dark themes:
Learn to Integrate Other Packages in Your Vue Applications
CSS variables and the LocalStorage API make it easy to add a dark theme to your Vue app.
There are many third-party libraries and built-in Vue extras that let you customize your web apps and use extra features.
