Light Theme, Dark Theme: Best Approach for Designers & Developers
Hi again, it’s Uchenna, Jackie of all tech trades 😅
Oftentimes, designers create theme-based software and applications without considering the ease of development. This can lead to increased effort and resource allocation in developing a system with identical capabilities “twice,” and sometimes, it can foster an unspoken war between the development and design teams.
Managing Designers and Software Developers across diverse teams that use various technologies for both front-end development and design, I have been able to come up with a method that would solve this problem with ease. It all starts with the design.
Designers create hi-fi wireframes and final designs, without considering the technicalities involved in the development and how it can be executed smoothly. However, my method, humorously dubbed the “awa-way,” addresses this issue effectively. 😅
Now the awa-way attempts to fix this problem right from the start of the project, when designers are still crafting up the perfect design system and color combination to be used for the project.
The first step involves grading the colors (in the dark theme for example) from most contrasted to least contrasted.
In the light theme, we follow a consistent naming pattern for colours, going from the darkest to the lightest. In the dark theme, the order is reversed. However, in Figma, the colours are grouped into Light/Shade/#0-400 and Dark/Shade/#0-400, retaining the same names which will be utilized for CSS styling.
These colours & patterns, when used in design produce the same effect, if not better when compared to randomly selecting dark and light colours that are only aesthetically pleasing to the eyes.
The mockup below illustrates an example, showcasing both sides of a dashboard designed using the precise colours mentioned above.
Now we have gotten the design out of the way, let’s focus on how this can be implemented using CSS & Javascript
As frontend engineers, it’s not a mystery as to how to implement theme-based designs as multiple methods exist on the internet, as it is quite rampant these days. Typically, CSS files can be loaded or unloaded in the browser based on the theme selected by the user. However, the awa-way seeks to minimize the work required, thereby reducing the time spent on implementing these themes.
Using the awa-way, we add the styling for the themes in the root element using theme-specific variables like [data-them="dark"]
Different shades as in the designs are defined for each theme, likely to be used as background colours, border colours, or other stylistic elements to maintain consistency and readability across themes. these shades are stored as CSS variables.
The code snippet above shows how the themes can be implemented as described above while retaining the same variables for the colours grouped under the different themes.
To activate any of these themes, JavaScript is used to verify if a system setting exists or if a theme has been set previously by the user for the site. Based on this information, the appropriate theme is selected to display the correct colours in the UI.
From the code above, if the defaultDark is true, then the initial theme is set to dark else, light
The value of the theme is used in the parent body of the website page
data-theme is a data attribute used to tell the browser what theme to select from the root CSS element, as in the CSS snippet above.
An HTML button can be used to trigger the theme switch from dark to light and vice versa based on the function switchTheme above used in switching themes.
Lastly, for the website page or application to display the proper colours, we need to use the shades in the HTML classes for each element where they are needed.
With this solution, the variable names are defined just once but will behave differently based on the theme selected from the UI — that’s the essence of the awa-way.
Leave a comment if you have any questions or concerns.
Follow me for more interesting tech solutions
👨🏿💻
