Recently (well, not that recently) an issue was submitted to my hobby project that the background, which was very bright white, was a little off putting. Apparently people are surfing on my website at night.
Since I have a new monitor1, I must say that the new monitors indeed transmit a staggering amount of light.
Of course, this means something has to be done about it (apparently) and it's called Darkmode2.
Personally, I find that a bright screen enables me to keep working in the dead of night without becoming tired, but that's just me. And probably not entirely healthy.
Anyway, I am using Bootstrap3, so I was looking for a Bootstrap Theme to fix this problem.
A lot of really FANTASTIC themes for Bootstrap can be found on Bootswatch4.
I choose Cyborg5 from their selection.
The switching
Next is how to provide the websurfer with a choice between the two modes, normal mode and darkmode.
You can find a lot of different ways of doing it, just surfing around.
Now, obviously, I do not wish to add all sorts of classes to my html pages. I just want to replace the appropriate links to the .css files in my html.
I have two different setups in my current website, static pages through a templating engine and two SPA using Angular.
Static pages
For the static pages, the problem is actually non-existant. I just add the appropriate css- and javascript-links in my webpage based on a Darkmode cookie setting, and away we go.
Angular
For Angular, I must confess I used a very low-tech solution, that some of you might not like.
Basically there is a index.html in my Angular app, that contains the link to the css file and I just replace the link using javascript.
I do this in the ngOnInit() of the central Angular component.
As follows:
References
- [1] My new monitor
- https://randomthoughtsonjavaprogramming.blogspot.com/2019/07/a-new-monitor.html
- [2] Wikipedia - Light-on-dark color scheme
- https://en.wikipedia.org/wiki/Light-on-dark_color_scheme
- [3] Bootstrap
- https://getbootstrap.com/
- [4] Bootswatch
- https://bootswatch.com/
- [5] Bootswatch - Cyborg
- https://bootswatch.com/cyborg/
No comments:
Post a Comment