# Allow users to select new color palettes
**URL:** https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857
**Category:** Site Management
**Tags:** how-to, users
**Created:** [4월 12, 2017, 5:15오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857 "2017-04-12T17:15:19Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [4월 12, 2017, 5:15오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/1 "2017-04-12T17:15:19Z")
> 🔖 This is a guide for making new color palette available for all users to choose from their profile preferences.
>
> 🙋 Required user level: Administrator
## Include a new color palette
1. Go to `Admin` → `Appearance` → `Color Palettes`
2. Create a new color palette by clicking on the + New button
3. Select the preferred base color palette from the list
4. Check the `Color palette can be selected by users` option
5. Make the appropriate palette adjustments, if needed
6. Save the color palette
## Selecting the color palette
Now users can select the new color palette on their respective `https://your-site.com/my/preferences/interface` page:
1. **Accessing User Preferences:** Users can navigate to their preferences by clicking on their profile icon in the top right corner of the forum and selecting “Preferences” from the dropdown menu.
2. **Interface Tab:** Within the preferences, the “Interface” tab contains the setting to choose a color palette for Light and Dark modes.
3. **Color Palette Selection:** Users can choose their preferred color palette from the provided dropdown menu.
4. **Interface Color Mode:** Users can also select their preferred interface color mode — Auto (follows system preference), Light, or Dark.
5. **Saving Changes:** Upon selecting their desired color palette, users need to click the “Save Changes” button at the bottom of the page to apply the changes.
## Dark mode
By default, Dark, WCAG Light, WCAG Dark, Dracula, Solarized Light, and Solarized Dark are already color palettes defined in Discourse.
## Additional resources
- [Automatic Dark Mode color scheme switching](https://meta.discourse.org/t/automatic-dark-mode-color-scheme-switching/161593)
- [Create and share a color scheme](https://meta.discourse.org/t/create-and-share-a-color-scheme/61196)
- [Update themes and plugins to support automatic dark mode](https://meta.discourse.org/t/update-themes-and-plugins-to-support-automatic-dark-mode/161595)
> Last edited by @hugh 2025-07-31T07:02:29Z
>
> Last checked by @hugh 2024-12-17T02:12:49Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [4월 12, 2017, 8:26오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/2 "2017-04-12T20:26:36Z")
Great work! Simple to understand how to compose themes together quite nicely – I’m going to play around with themes soon, for sure!
Bit o’ feedback on this:
I’m seeing that there’s an option to import themes directly - What’s the structure that import-able themes should take? A repository with the .dcstyle.json file(s) at the root? It’s not clear, and the placeholder value – `https://github.com/discourse/discourse/sample_theme` - doesn’t lend any clues.
It also seems that exporting themes got a little more difficult as you can’t just export a theme with a single click if that theme is dependent on child themes. I understand why this might need to be this way, but I’m concerned about portability of themes with the added inheritance - will there be a way to export the theme as a bundle with all child themes attached as well?
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [4월 12, 2017, 8:28오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/3 "2017-04-12T20:28:00Z")
> [@awole20](#):
>
> What’s the structure that import-able themes should take?
You can read about that here:
> [@Structure of themes and theme components](https://meta.discourse.org/t/how-to-develop-custom-themes/60848):
>
> Discourse supports [native themes](https://meta.discourse.org/t/native-theme-support/47494/26) that can be sourced from a .tar.gz archive or from a remote git repository including [private repositories](https://meta.discourse.org/t/how-to-source-a-theme-from-a-private-git-repository/82584). An example theme is at: [GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub](https://github.com/SamSaffron/discourse-simple-theme) The git repository will be checked for updates ([once a day](https://github.com/discourse/discourse/blob/main/app/jobs/scheduled/check_out_of_date_themes.rb)), or by using the Check for Updates button. When changes are detected the Check for Updates button will change to the Update to Latest. [image] To create a theme you need to foll…
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [4월 12, 2017, 8:36오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/4 "2017-04-12T20:36:18Z")
We are going to ship both dark and light themes by default out of the box, yes? That’s my goal here. We also need:
- small font
- large font
themes to ship natively as well.
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [4월 12, 2017, 11:38오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/5 "2017-04-12T23:38:54Z")
This is fabulous. 🚀 Thanks for adding this feature and for writing up this howto. Can you add instructions for specifying a different logo for the dark theme? That will be a common request I am sure.
---
### Author:  [@Vocino](https://meta.discourse.org/u/Vocino)
#### Post date: [4월 13, 2017, 9:24오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/6 "2017-04-13T21:24:00Z")
> [@tobiaseigen](#):
>
> Can you add instructions for specifying a different logo for the dark theme? That will be a common request I am sure.
Yup, this is the primary (only?) blocker for this. I see that Meta is switching logos, or applying some kind of shadow.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [4월 13, 2017, 9:29오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/7 "2017-04-13T21:29:42Z")
> [@Updated December 2018](#):
>
> This method no longer works. Instead, use this theme component: [https://meta.discourse.org/t/alternative-logo-for-dark-themes/88502](https://meta.discourse.org/t/alternative-logo-for-dark-themes/88502)
This is actually pretty simple:
> **old method**
>
> ```plaintext
> .logo-big {
> display: block;
> -moz-box-sizing: border-box;
> box-sizing: border-box;
> background: url(awesome-dark-logo.png) no-repeat;
> width: 150px;
> height: 40px;
> padding-left: 150px;
> background-size: 150px 40px;
> }
>
> ```
>
> You basically evict the existing image out of the IMG tag
---
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [4월 13, 2017, 10:07오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/8 "2017-04-13T22:07:18Z")
Setting up a dark theme made me inquire into where this grey background colour comes from:
I do not have any black in my colour scheme so I suppose that the grey is calculated as a lighter version of the complementary colour of the primary colour (white, in my case).
While I can see the reasoning behind it, it doesn’t really work if your black theme is using anything outside the black/grey spectrum as secondary colour. Perhaps it’s a matter of taste, but I’d probably prefer that navigation button background colour (or whatever it’s called) to be based on the secondary colour.
I am not saying that every colour should be chosen manually (discourse is generally doing a great job in calculating colours - mainly shades and tints, I believe - based on the few customizable ones) but this particular formula seems a bit too constraining.
Perhaps it can be solved with a single switch that allows the user to switch the color base between primary and secondary colour?
Use secondary colour as base for button backgrounds
---
### Author:  [@Vocino](https://meta.discourse.org/u/Vocino)
#### Post date: [4월 15, 2017, 12:06오전 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/9 "2017-04-15T00:06:57Z")
@tophee, I think the derivative colors make it really easy to use. For advanced color schemes you have to use advanced features—specifically custom CSS in this case. That seems like a logical ask to me.
---
### Author:  [@Jo0Lz](https://meta.discourse.org/u/Jo0Lz)
#### Post date: [4월 15, 2017, 12:10오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/10 "2017-04-15T12:10:50Z")
Awesome. This makes browsing the discourse at night so much easier on the eyes, even with the new Windows 10 “night mode” the light theme is pretty bright.
Now the ability to switch the theme easily through a keyboard shortcut, menu item or other button, and we’re set! 🕶 😍
---
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [4월 15, 2017, 9:52오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/11 "2017-04-15T21:52:35Z")
> [@Vocino](#):
>
> I think the derivative colors make it really easy to use.
I am not calling derivative colours into question, merely pointing out that the way one of them is derived could be improved.
> [@Vocino](#):
>
> For advanced color schemes you have to use advanced features
So using a colour outside the black-white continuum is advanced? I wouldn’t think so.
---
### Author:  [@rewphus](https://meta.discourse.org/u/rewphus)
#### Post date: [5월 10, 2017, 7:20오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/12 "2017-05-10T19:20:30Z")
In my testing I am noticing some peculiarities, and I even had another user on my site test this because this seemed to simple that I thought I was missing something, but here are my steps to reproduce:
1. Have no user selectable themes enabled.
2. Change your default theme.
Observed Result: The theme doesn’t change for the user until they go in to their Preferences \> Interface and click `Save Changes`, even though that is the only theme available to them in the dropdown. Is anybody else seeing this?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [5월 10, 2017, 7:24오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/13 "2017-05-10T19:24:01Z")
I think this is an admin thing, also make sure you are on latest.
If you ever set the theme via the selector in prefs we set a cookie (this cookie is validated server side with an admin bypass)
So, I would re-test this theory of yours on Chrome incognito … what happens? Then as a non admin … what happens?
---
### Author:  [@rewphus](https://meta.discourse.org/u/rewphus)
#### Post date: [5월 10, 2017, 7:31오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/14 "2017-05-10T19:31:56Z")
Yeah, must just be a cookie refresh issue. I was doing a hard refresh clearing the cache, but I had two logged in tabs open so I think that may have played a part. I can reproduce in incognito, but not after a hard refresh, so this appears to be a non-issue. I will be more careful about testing in incognito mode before reporting again. Thanks for the quick reply.
---
### Author:  [@djcyry](https://meta.discourse.org/u/djcyry)
#### Post date: [9월 26, 2017, 12:12오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/21 "2017-09-26T12:12:45Z")
Hello
I have try it but i am not able to change theme from menu (like on meta) i use discourse app and safari and still not show . I run the latest version of discourse .
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [9월 26, 2017, 12:35오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/22 "2017-09-26T12:35:35Z")
You need the [Hamburger Theme Selector](https://meta.discourse.org/t/hamburger-theme-selector/61210) to display themes inside the hamburger menu.
---
### Author:  [@djcyry](https://meta.discourse.org/u/djcyry)
#### Post date: [9월 26, 2017, 12:50오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/23 "2017-09-26T12:50:39Z")
Oh y understand now …Thanks .
---
### Author:  [@foodaginnovators](https://meta.discourse.org/u/foodaginnovators)
#### Post date: [10월 18, 2017, 12:41오전 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/24 "2017-10-18T00:41:34Z")
What would be the right code for .logo-small? Seems to be a large gap on right when using:
`.logo-small { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(awesome-dark-icon.png) no-repeat; width: 40px; height: 40px; padding-left: 150px; background-size: 40px 40px; }`
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [10월 18, 2017, 1:25오전 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/25 "2017-10-18T01:25:27Z")
Not totally sure, can you add a screenshot of what you have now? Perhaps @awesomerobot can help.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [10월 19, 2017, 3:39오후 UTC](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857/26 "2017-10-19T15:39:52Z")
My guess from looking at your CSS is that the `padding-left: 150px;` is the cause; your `.logo-small` is 40px wide, so you’d have 110px of space to the right of it because of that `padding-left`.
[다음 페이지](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857.md?page=2)