mbcahyono
(Muhlis Cahyono)
April 23, 2019, 3:53am
1
Following up the discussion here:
Some users have been asking about automatic switching between a light and a dark theme. Could this be accomplished with a plugin?
I assume this would need two parts:
a theme component with a javascript switching themes based on local time
a Discourse plugin adding options to the user preferences page:
turn night mode switching on/off, choose nighttime theme, set time nighttime time period
How difficult would it be to code? As in, how much would it cost?
I made a theme component that will automatically switch to night theme based on user preferences. It’s currently work on a per-browser basis.
Repository
https://github.com/muhlisbc/discourse-automatic-night-mode-theme
Screenshot:
Installation
Add this component to each theme installed.
Known Issues
I’ve received a report of the component making all navigation cause full reloads. Upon navigating between different pages every click caused a full refresh instead of an in-app navigation. I have not been able to reproduce this, so please post reproduction steps if you run into this.
Feedback is welcome and thanks to Discourse team for sponsoring this work
24 Likes
terraboss
(Markus)
December 8, 2019, 8:26pm
3
Nice theme component. But I can’t choose a time range for activation. It seems the field is for US time zones only?
Is it possible to add macOS Light/Dark mode detection?
1 Like
mbcahyono
(Muhlis Cahyono)
December 9, 2019, 12:41am
4
I’m sure it’s local (device) time.
There is another theme for that:
5 Likes
terraboss
(Markus)
December 9, 2019, 8:35am
5
I can’t enter my local time manually. Nothing happens.
Thanks for this hint! I’ve had this in my bookmarks before
Unfortunately, it doesn’t work right now. I need to some troubleshooting first…
2 Likes
jrgong
(jrgong)
February 17, 2020, 10:27am
6
Can this theme component be combined with this one?
Any thoughts about making the bottom smaller? When using additional component, it takes a lot of space in the header. For example I like the dark mode button in this ghost theme at top right:
That way users could override the automatic dark mode, when desired
1 Like
mbcahyono
(Muhlis Cahyono)
February 17, 2020, 11:52am
7
Yes, you can but it might lead to unexpected behavior.
jrgong
(jrgong)
August 4, 2020, 12:28pm
8
It seems, this component is broken. Whenever I enable it in my profile settings and reload the page, the checkmark in the box disappears and it’s disabled
I believe @pmusaraj is working on something even more automatic than this.
4 Likes
pmusaraj
(Penar Musaraj)
August 25, 2020, 1:48pm
10
Core has a similar feature now based on the device’s dark mode UI, please see Automatic Dark Mode color scheme switching .
4 Likes