# Reference for full color customization
**URL:** https://meta.discourse.org/t/reference-for-full-color-customization/255158
**Category:** Development
**Created:** [February 14, 2023, 8:48pm UTC](https://meta.discourse.org/t/reference-for-full-color-customization/255158 "2023-02-14T20:48:06Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [February 14, 2023, 8:48pm UTC](https://meta.discourse.org/t/reference-for-full-color-customization/255158/1 "2023-02-14T20:48:07Z")
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:
> [@Create and share a color scheme](https://meta.discourse.org/t/create-and-share-a-color-scheme/61196):
>
> Discourse now supports importing color schemes from remote repository. Here I will demonstrate how you would go about doing this. Navigate to colors and add a color scheme. Head to /admin/customize/colors on your site and create a color scheme. Tips: I used a chrome plugin ([color picker](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en)) to select colors from an existing image of a palette on the web. If you create a theme, assign the color scheme to the theme and preview it, changes will be reflected live. Create a new gi…
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: [Customizing colors - #10 by awesomerobot](https://meta.discourse.org/t/customizing-colors/85842/10)
But I don’t think that’s necessary, if it would be possible to just have a reference json file with all the named color variables that can be overridden, bypassing the computed values.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [February 14, 2023, 9:42pm UTC](https://meta.discourse.org/t/reference-for-full-color-customization/255158/2 "2023-02-14T21:42:00Z")
When you inspect a discourse instance in your browser you can find all root variable names in the styles tab:
Then just declare the additional variables in your json file. E.g.:
```plaintext
{
"about_url": null,
"license_url": null,
"name": "Full Color Schemes",
"color_schemes": {
"Colors Light": {
"primary": "222",
"secondary": "fff",
"tertiary": "08c",
"quaternary": "e45735",
"header_background": "fff",
"header_primary": "333",
"highlight": "ffff4d",
"danger": "c80001",
"success": "090",
"love": "fa6c8d",
"primary-very-low": "f8f8f8",
"primary-low": "e9e9e9",
"primary-low-mid": "bdbdbd",
"primary-medium": "919191",
"primary-high": "646464",
"primary-very-high": "434343",
"secondary-low": "4d4d4d",
"secondary-medium": "gray",
"secondary-high": "a6a6a6",
"secondary-very-high": "ededed"
},
"Colors Dark": {
"primary": "ddd",
"secondary": "222",
"tertiary": "0f82af",
"quaternary": "c14924",
"header_background": "111",
"header_primary": "ddd",
"highlight": "a87137",
"danger": "e45735",
"success": "1ca551",
"love": "fa6c8d",
"primary-very-low": "282828",
"primary-low": "313131",
"primary-low-mid": "7a7a7a",
"primary-medium": "909090",
"primary-high": "a6a6a6",
"primary-very-high": "c7c7c7",
"secondary-low": "bdbdbd",
"secondary-medium": "919191",
"secondary-high": "646464",
"secondary-very-high": "313131"
}
}
}
```
Nice thing is that those variables will then also show up on the backend:
---
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [February 14, 2023, 9:48pm UTC](https://meta.discourse.org/t/reference-for-full-color-customization/255158/3 "2023-02-14T21:48:17Z")
Thank you — after I made this post I saw it’s all also listed in an instance’s `/styleguide` \> `colors` page — I assume this is the complete list…
I am now just wondering what the different usage is between the descriptive (e.g. `primary-high`) and numbered (e.g. `primary-800`) variables and how to account for this when creating my own theme
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [February 14, 2023, 9:59pm UTC](https://meta.discourse.org/t/reference-for-full-color-customization/255158/4 "2023-02-14T21:59:16Z")
As far as I know it’s just some additional, more fine tuned, calculations you could use in a theme or theme component. But they are not used in Discourse core.
If you’d want to write your color scheme with just the numbered values, you could re-declare the descriptive ones like that in your theme:
```plaintext
:root {
--primary-high: var(--primary-800);
}
```
But then, there’s only numbered values for primary and tertiary.
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [March 16, 2023, 9:59pm UTC](https://meta.discourse.org/t/reference-for-full-color-customization/255158/5 "2023-03-16T21:59:22Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.