# Challenges creating a custom color palette
**URL:** https://meta.discourse.org/t/challenges-creating-a-custom-color-palette/349121
**Category:** Development
**Created:** [January 27, 2025, 12:17am UTC](https://meta.discourse.org/t/challenges-creating-a-custom-color-palette/349121 "2025-01-27T00:17:57Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [January 27, 2025, 12:17am UTC](https://meta.discourse.org/t/challenges-creating-a-custom-color-palette/349121/1 "2025-01-27T00:17:57Z")
I’ve tried to create a completely custom color scheme by defining my colors in the about.json file of my theme on GitHub.
Unfortunately only some of my color definitions are being respected in the site.
For example, in my json scheme I define: `"success_low": "DDE2B2”,`
However my style guide shows a different (computed) color for `var(--success-low)`
I’ve read through all the guides and it seems maybe the json palette definitions are not all used and instead discourse is computing some of the values on its own and not respecting my definition.
Do I need to instead hard code the colors in a css variables file? Will these override the computed values? Where and how should I do this? I’d like to define every single color for both light and dark mode in discourse, I don’t like any of the computed values.
Thanks for any help. It’s been very hard to wrap my head around how all this stuff works, what takes priority in the final css, etc.
update: this post would seem to contradict my troubleshooting:
> [@Override values for auto-generated color variables](https://meta.discourse.org/t/override-values-for-auto-generated-color-variables/134374):
>
> As of v2.3.3 (released early September) you can now override our automatically-generated SASS color variables ($primary-low, $primary-medium, etc) in remote themes (you can not yet do this directly via the admin UI.) To override one of these colors you need to add it to the color\_scheme section of your theme’s about.json file. Once you’ve done that you can see the override listed within your color scheme in /admin/customize/colors. "color\_schemes": { “My\_colors”: { "primary": "000000…
So it leaves me more confused about why discourse still seems to be auto generating colors
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [January 27, 2025, 12:43am UTC](https://meta.discourse.org/t/challenges-creating-a-custom-color-palette/349121/2 "2025-01-27T00:43:09Z")
> [@mk0r](#):
>
> For example, in my json scheme I define: `"success_low": "DDE2B2”,`
>
> However my style guide shows a different (computed) color for `var(--success-low)`
i see there is an underscore in the first (`success_low`) and a dash in the second (`success-low`).
you can always paste your color palette here as it appears in the json file for us to have a look.
---
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [January 27, 2025, 12:58am UTC](https://meta.discourse.org/t/challenges-creating-a-custom-color-palette/349121/3 "2025-01-27T00:58:35Z")
Thanks, I will go through and check all the underscores vs dashes. Is there any reference json file I could find somewhere that has a reference for all variables, with dashes and underscores in the right places?
---
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [January 27, 2025, 1:02am UTC](https://meta.discourse.org/t/challenges-creating-a-custom-color-palette/349121/4 "2025-01-27T01:02:44Z")
I originally used the “solarized” theme as a reference
---
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [January 27, 2025, 1:14am UTC](https://meta.discourse.org/t/challenges-creating-a-custom-color-palette/349121/5 "2025-01-27T01:14:18Z")
This is extremely confusing. In the styleguide the labeled css variables use dashes:
Whereas in this (and other) example schemes they have underscores:
>
I am admittedly not the sharpest coding knife in the drawer, and I’m sure people who’ve worked on this for a long time find it more obvious and intuitive… but trying to wade through this feels like I’m going a bit crazy.
It’s really hard to get an intuitive grasp of all the logic for how light and dark mode colors are used. Between the multitude of scss files and transformations, json, admin GUI, palettes which are (somewhat?) independent of themes…
Sorry for my rambling, just struggling a bit over here
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [January 27, 2025, 1:30am UTC](https://meta.discourse.org/t/challenges-creating-a-custom-color-palette/349121/6 "2025-01-27T01:30:21Z")
you have another old topic that may help you with this
> [@Reference for full color customization](https://meta.discourse.org/t/reference-for-full-color-customization/255158):
>
> I would like to create two of my own color schemes where I choose all the color variables (I don’t like the computed/transformed values). Is there a reference for this? The example json file in this post: Only has a few of the values listed (seems like the ones that are customizable by default through the admin panel). Whereas some color schemes I’ve seen like the WCAG ones, expose a few more of the variables. This post talked about creating a plugin for advanced color customization: [Custom…](https://meta.discourse.org/t/customizing-colors/85842/10)
---
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [January 29, 2025, 1:26am UTC](https://meta.discourse.org/t/challenges-creating-a-custom-color-palette/349121/7 "2025-01-29T01:26:55Z")
Unfortunately that thread didn’t solve the issue.
I’m still confused – is there no clear guidance available about how to set every color? And what the correct syntax/names are in the json vs the css variables?
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [January 29, 2025, 1:47am UTC](https://meta.discourse.org/t/challenges-creating-a-custom-color-palette/349121/8 "2025-01-29T01:47:09Z")
did you look at this?
>
I’m not seeing anything obviously wrong with your about.json file so it may be something else with the way you have your theme configured. 🤔
specifically which variables are working and which aren’t?
have you read any of the theme dev topics? i think it is possible you may be missing other required theme files in your repo.
> [@Theme Developer Quick Reference Guide](https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448):
>
> As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under [#howto / #themes](https://meta.discourse.org/tags/c/howto/themes), but if you just need something to jog your memory, this guide may help. General Resources [scroll Beginner’s guide](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)[scroll Designer’s guide](https://meta.discourse.org/t/designers-guide-to-discourse-themes/152002/1)[scroll Developer’s guide](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)[paintbrush Theme Creator](http://theme-creator.discourse.org)[desktop_computer Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950)[notebook_with_decorative_cover Theme Directory](https://meta.discourse.org/c/customization/theme/61/none)[jigsaw Component Directory](https://meta.discourse.org/c/customization/theme-component/120)[wrench Theme Modifiers](https://meta.discourse.org/t/theme-modifiers-a-brief-introduction/150605)[wrench Themeable site…](https://meta.discourse.org/t/-/374376)
> [@Structure of themes and theme components](https://meta.discourse.org/t/structure-of-themes-and-theme-components/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…
> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…
---
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [January 29, 2025, 2:21am UTC](https://meta.discourse.org/t/challenges-creating-a-custom-color-palette/349121/9 "2025-01-29T02:21:24Z")
Yes I’ve read them, but there’s no complete reference for all the color variables that I could see. I based my about.json file on the “solarized” theme which seemed to have all the variables declared. I’m going to try again from clean slate and report back and use developer tools to see what the issues might be..
Thanks for the help so far