Reference for full color customization

Development

AI-generated summary

The discussion revolves around full color customization in Discourse. mk0r is looking for a reference to create a custom color scheme with all color variables, not just the ones available through the admin panel. nolo suggests inspecting the browser’s styles tab to find all root variable names and declaring additional variables in the JSON file. They provide an example of a full color scheme JSON file.

mk0r discovers that the complete list of color variables is also available in the instance’s /styleguide > colors page. They then inquire about the difference between descriptive (e.g., primary-high) and numbered (e.g., primary-800) variables. nolo explains that the numbered values are not used in Discourse core but can be used in themes or theme components. They provide an example of how to re-declare descriptive variables using numbered values in a theme.

1

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: Customizing colors - #10 by awesomerobot

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.

2

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

image
image394×1320 110 KB

Then just declare the additional variables in your json file. E.g.:

{
  "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
image1632×1747 210 KB

3

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

4

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:

:root {
  --primary-high: var(--primary-800);
}

But then, there’s only numbered values for primary and tertiary.