Automatic Night Mode Plugin

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?


That would be AWESOME!

1 Like

With a plugin for sure, a bit harder to swing as a theme component.

If you reuse the logic in chronos by @joffreyjaffeux it will probably be not too hard. I would say 2 days of work if I had to pull out a number.


Is this still the case today?

This can be done in a theme component these days


Is there any guide or example code to add editable user custom fields with a theme?

Why a theme when you can manage user fields in admin UI (/admin/customize/user_fields) itself?


Until you find a solution, use this theme component as a placeholder: it’s for Macs. I know it’s not exactly what you need, but figured it may help.


I mean to create custom user preference like time selector that can be saved with a theme. Is that possible these days?

With a plugin, I had to register the custom field as editable with register_editable_user_custom_field so it can be saved.

I believe @pmusaraj was looking at this last.

Is it possible to have a day - night switch on Discourse with a theme component?


Need this for sure. Will be keeping an eye on this topic to see if anything updates.

1 Like

I don’t think we support custom user fields in themes at the moment. I do see the use case for them though, it’s nice to be able to ship a theme component with a user-configurable setting.

There is a fairly hacky workaround, to add a field in the UI only and then store the data in local storage or the session. That’s what I did on the experimental automatic dark mode switch for Safari, you can look at the code of that component to see how it’s done.


I made a theme component for anyone who interested: