Introduction
This guide covers dark mode, how to select it, and how to enable it.
What is dark mode?
As Forbes explains,
The idea behind dark mode is that it reduces the light emitted by device screens while maintaining the minimum colour contrast ratios required for readability.
Dark mode is essentially a mainly dark theme on your device (black or grey, usually), with light text on it for contrast. Discourse has many themes that have both light and dark color schemes.
How do I select dark mode?
In your Discourse forum, your admin first needs to install it. Under admin/customize/themes, the admin can choose āDarkā under the list of popular themes.
Afterwards, you will need to go to my/preferences/interface to change themes. You should see this page.
(Mobile)
After this, select the dropdown where the cuurent theme is displayed, or under the āThemeā dropdown. In my case, itās Meta Branded.
Then, choose from the dropdown Dark, or any theme that has a dark color scheme (weāll find out how in a short bit).
After selecting your theme of choice, click on the Regular dropdown. Select any color scheme that has the word āDarkā in it. Common ones include āDarkā, āWCAG Darkā and āSolarized Darkā.
Selecting any color scheme for light mode will not yield good results when following this guide. It is advised that you select āDarkā for this guide, as that is what we will be using.
After doing all this, you may click the Save Changes button at the bottom of the page. This will make Discourse go into dark mode (or, rather, a dark color scheme).
What is the dark mode dropdown for?
I know youāre probably wondering this.
To put it simply, the color scheme you put there is activated when your device is in dark mode. The color scheme selected will override the one selected in the āRegularā dropdown when your device is in dark mode.
Generally, you wouldnāt be changing this. However, if you have selected a color scheme in āRegularā and wish to be the same in āDark modeā without having to keep switching when changing color schemes, you can set the āDark modeā dropdown to āSame as regularā, so that Discourse will follow the scheme selected in āRegularā.
If your device is on light mode, the āDark modeā dropdown wonāt have any effect.
Soā¦ how do I check if a theme has a dark color scheme?
Ah, yes! Basically, you can select a theme and have a glance at the color schemes supported, and check if there are any dark color schemes. A good gauge is to look for āWCAG Darkā, as it is a color scheme that follows accessibility guidelines.
Dark/Light Toggle
Now that this component has been merged into core, there is no need to install it.
See this topic for more information about the toggle:
Conclusion
So thatās it! You managed to locate the area to change your theme to dark mode, and experimented with different color schemes!
Sources and Citations
Forbes: What Is Dark Mode ā And Should You Be Using It? ā Forbes Advisor UK
Adding dark mode for admins: Looking for default dark theme - #2 by JammyDodger
All information in this guide is not generated by AI, except for image captions. All other information is original, and where it is not, is linked above.
