How to change the default theme color for Discourse site
If you’re creating a Discourse site for the first time, you’re probably very interested in changing the design of the theme. As I built a community related to ChatGPT, I learned how to change theme colors and I’m happy to share my knowledge with you.
On this page, you can learn how to change the default theme color of the Discourse site, as well as create new colors for the theme and learn about the settings for dark mode. On the Discourse official forum, there is a lack of information regarding theme color settings. Those who need information related to theme colors may find it helpful.
Setting the default theme color
To change the color of the theme, you first need to go to the admin page where you can control all settings on the site. To go to the admin page, go to example.com/admin in the browser address bar.
- example.com/admin
- myfirstsite.com/admin
Remove the domain of example.com and enter /admin after the domain of the site you are managing. Please refer to the example above.
Change the color palette of the theme
①. Select [Customize] from the control menu at the top of the admin page.
②. Next, click on the [Themes] menu.
③. Click on the name of the theme you are using. (My theme is named ‘Light’.)
④. Select the desired color from the Color Palette dropdown menu box.
Consider dark mode
Discourse site is set up to change the theme color depending on the user’s system settings. I was confused when I changed the default theme color but it wasn’t applied correctly.
If you have changed the default theme color but there is no change in the theme color, you should consider the theme color for dark mode users.
①. Click on [Settings] on the control panel at the top of the site’s admin page.
②. Enter “dark mode” in the settings option filtering window.
③. Select the theme color to be displayed to users who use dark mode in the default dark mode color scheme ID setting.
Creating Color Palettes for Theme Colors
When creating a website with Discourse, several default color palettes are provided. If the colors provided here are not to your liking, you can customize the color palette to be used in the theme yourself.
①. Select [Customize] from the menu at the top of the admin page.
②. Click on [Colors].
③. Choose a pre-defined color.
④. Choose whether the color scheme will be changed by the user.
⑤. Fine-tune the colors of the items displayed in the theme below.
Below the predefined color palettes, you can also create custom color palettes by clicking the [+ New] button.
Tip for Configuring Color Palette
It can be very difficult to directly configure all the colors of a theme. If you have a desired color but find it difficult to configure all the colors, please refer to color palette sites.
The links below are sites that can be useful when configuring site colors.