8

What is the best way to implement a dark mode and light mode throughout my bootstrap 4 (scss) angular application? Angular cli compiles the scss files, so the old way of including a separate css file for each theme does not appeal to me. How?? Set a body class and use .dark / .light throughout my scss files? Use mixins? Use bootstrap color themes?

Any ideas are welcome!

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
Mcanic
  • 1,304
  • 16
  • 22
  • 1
    possible similar question https://stackoverflow.com/questions/19192747/how-to-dynamically-change-themes-after-clicking-a-drop-down-menu-of-themes – Shiv Kumar Baghel Oct 31 '18 at 06:35
  • 1
    thanks for your input, but that question is not applicable to a an angular (2+) application with bootstrap 4 scss – Mcanic Oct 31 '18 at 14:04

2 Answers2

3

Don't know if this was the best way, but this is what i did.

I used [ngClass]="setPrimary() on the top most component

this setPrimary function checked the time of the day (https://api.sunrise-sunset.org) and depending upon the hour of night or sunrise/sunset or day it would set the class on this top most component

inside the scss file: i developed 3 different color sets for day, night, sunrise/sunset

on page load, default value was day, but as soon as setPrimary() would place the appropriate class, the rest of the styling will follow it

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
  • could you give me an example of how you solved it? I would like to use the default bootstrap variables, but I guess that's not possible? – Mcanic Nov 01 '18 at 21:22
  • a minimal working example is available here: https://stackblitz.com/edit/angular-tzxvzf - good luck !! – Akber Iqbal Nov 02 '18 at 03:46
0

I wasn't able to solve this using Angular CLI and Bootstrap 4 scss. I tried to configure the project to compile 2 lazy bundles, which works, but I could not have 2 scss files with dark.scss and light.scss each containing the same variables with different values, 1 resulting in the dark bundle, one resulting in then light bundle. What I ended up with is one scss source containing variables and styles for both dark and light, compiles into 2 bundles woth dark.scss and light.scss containing css overrides for each specific style. Thanks anyways guys for the suggestions!

Mcanic
  • 1,304
  • 16
  • 22