# 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:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@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")

</div>

When you inspect a discourse instance in your browser you can find all root variable names in the styles tab:

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/6/5/865ec0c89a7884737a3d9129c13357982d9f984d.png)

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:

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/6/e/06ebfd8554b8dc69b1f76d8f3e509e724dbc232b.png)

---

_[View the full topic](https://meta.discourse.org/t/reference-for-full-color-customization/255158)._