What is the best way to implement a dark mode and light mode throughout my bootstrap 4 (scss) angular application? Angular cli piles 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 wele!
What is the best way to implement a dark mode and light mode throughout my bootstrap 4 (scss) angular application? Angular cli piles 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 wele!
Share Improve this question edited Mar 17, 2022 at 5:20 Akber Iqbal 15.1k12 gold badges53 silver badges75 bronze badges asked Oct 31, 2018 at 6:14 McanicMcanic 1,3931 gold badge16 silver badges22 bronze badges 2- 1 possible similar question stackoverflow./questions/19192747/… – Shiv Kumar Baghel Commented Oct 31, 2018 at 6:35
- 1 thanks for your input, but that question is not applicable to a an angular (2+) application with bootstrap 4 scss – Mcanic Commented Oct 31, 2018 at 14:04
2 Answers
Reset to default 3Don't know if this was the best way, but this is what i did.
I used [ngClass]="setPrimary() on the top most ponent
this setPrimary function checked the time of the day (https://api.sunrise-sunset) and depending upon the hour of night or sunrise/sunset or day it would set the class on this top most ponent
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
I wasn't able to solve this using Angular CLI and Bootstrap 4 scss. I tried to configure the project to pile 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, piles into 2 bundles woth dark.scss and light.scss containing css overrides for each specific style. Thanks anyways guys for the suggestions!