Page Overview

In this blog, I will be discussing the implementation of a light theme alongside the current dark theme.

Implementing a Theme

In order to create an effective theme, I had to create a list of the hex values I used for my current dark theme. Using this list of hex values, I began working on a light version of my previous theme. Essentially it would be the polar opposite of the dark theme.

Step 1: Creating the Controller

The first step to having multiple themes is to create a controller that can switch between the multiple themes. This controller can also inject the various hex code values into the DOM.

The theme folder contains all the code that is responsible for controlling the theme. The files dark-theme.ts and light-theme.ts contain the hex code values that are responsible for the different colors for the themes. Having a structure like this makes it easy to implement new themes or changes to the colors that each theme features.

Example code from dark-theme.ts:

import { Theme } from './symbols';

export const darkTheme: Theme = {
  name: 'dark',
  properties: {
    '--page-background': '#26262e',
    '--background': '#26262e', // Darkest
    '--on-background': '#18181d',
    '--bubble': '#343440',
    '--border': '#3a3a3a',
    '--primary': 'darkorange',
    '--on-primary': '#343440',
    '--text': '#fff',
    '--sidebar-object': '#bdbdbd',
    '--sidebar-button': '#343440',
    '--sidebar-dropdown': '#343440',
  }
} 

Step 2: Choosing the right colors

Although this step seems very trivial, choosing the right colors to go with your theme is arguably the most important step. This took up a large portion of my time since getting it right was imperative. The color hex values are shown in the light-theme.ts file.

Example code from light-theme.ts

import { Theme } from './symbols';

export const lightTheme: Theme = {
  name: 'light',
  properties: {
    '--page-background': '#e7e9ef',
    '--background': '#f6f7f9',
    '--on-background': '#fff',
    '--border': '#e5e5e5',
    '--bubble': '#dddee0',
    '--primary': '#1976d2',
    '--on-primary': '#fff',
    '--text': '#000',
    '--sidebar-object': 'grey',
    '--sidebar-button': '#e5e5e5',
    '--sidebar-dropdown': '#f6f7f9',
  }
};

Comparison:

Dark Theme:

Light Theme:

Step 3: Implementing a switch

The third and final step would be creating a dropdown menu where users can switch between themes. I implemented this feature in my settings page where it is easily accessible. However, this is not the final product as the settings page still has UI components from the old sneakerbot model. In order to allow users to switch themes, I created a dropdown menu featuring two options: light and dark. Once a user selects an option, the code checks if it is different from the current theme and then executes a switch. The theme values are stored in localstorage out of convenience.

switchTheme() {
    var theme = <HTMLSelectElement> document.getElementById('theme-select');
    theme.value == 'light'? localStorage.setItem('theme', 'light') : localStorage.setItem('theme', 'dark');
    if (theme.value === 'light') {
        this.themeService.setTheme('light');
    } else {
        this.themeService.setTheme('dark');
    }
}

Next Steps:

I will be finishing the rest of the UI modules to fit the standards that are required for a Multi-Channel E-Commerce Listing Platform. I will also be implementing CI/CD pipelines and possible Google Anthos integration. This will combine the knowledge gained over my summer internship with my current project.

Sources:

1. Dark-mode-with-angular-and-css-variables. (n.d.). Retrieved December 09, 2020, from https://stackblitz.com/edit/dark-mode-with-angular-and-css-variables?file=angular.json
2. (n.d.). Retrieved December 09, 2020, from https://angular.io/guide/architecture-modules
3. Trajan, T. (2019, October 25). The complete guide to Angular Material Themes. Retrieved December 09, 2020, from https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1