Reference for full color customization

[mk0r]

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

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. [image] Tips: I used a chrome plugin (color picker) 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 …

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.

[nolo (Manuel)]

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.:

{
  "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:

[mk0r]

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

[nolo (Manuel)]

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.