Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
490 views
Welcome To Ask or Share your Answers For Others

1 Answer

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share

548k questions

547k answers

4 comments

86.3k users

...