Hello everyone. I would like to share with you my experiences of how I implemented basic light/dark mode for our Owwly Angular web application.
Background: The last trend for the dark theme option convinced us to introduce a similar approach to our website to fulfill all user's needs - especially mine 😎.
You can also look at the real website: https://owwly.com to check the described implementation yourself in a real-world use case.
Okay, let's begin.
For start define default theme class, which is going to be your fallback CSS class and default setup for the theme:
Create the definitions for colors and put them to the one list which is going to be used later.
_colors.scss
Create an SCSS script to iterate through the colors you defined and generate the right CSS variables:
_theme.scss
To provide a smooth transition between both themes, add the CSS class for color and background transitions as below:
_animations.scss
Next, create the service responsible for themes toggling. setTimeout is not a pretty solution here, but it does the job. Thanks to it we don’t see the transitions when the page is loaded and style is set to dark. On the other hand, we don’t see page to load light and immediately change to the dark mode. A win-win solution to the rescue.
ui-style-toggle.service.ts
Initialize the theme toggle service when the app boots up to set previously selected by a user theme.
ui.module.ts
That's it, now you can use the defined values in your standard component styles as below:
It is a very basic implementation that works for us. I hope you will share your solutions on how you implemented light/dark mode in your angular websites. See ya!