Referencing Discourse theme color variables in custom theme component?

Product Support

AI-generated summary

jordan-violet is trying to access Discourse theme color variables in a custom theme component, but is having trouble using variables like --secondary in CSS. david confirms that it is possible to access core’s native-css variables from a theme or theme component, and provides an example of how to use them, e.g., body { background-color: var(--secondary); }. jordan-violet realizes they forgot to use the var() function. pfaffman chimes in, sharing a resource from https://ask.discourse.com that lists available color variables, such as var(--primary), var(--secondary), and var(--highlight), and provides an example of how to use them, e.g., body { background: var(--highlight); }.

1

Is it possible to access Discourse theme color variables in my own theme component?

I’m trying to use variables like --secondary in my CSS and it doesn’t seem to be working.

3

Yes, you should be able to access core’s native-css variables from a theme or theme component :+1:

e.g.

body {
  background-color: var(--secondary);
}

Could you share an example that’s not working?

4

Ah! I wasn’t using var()

5

I have trouble like this all the time. Sure, it’s “obvious” to use var, but only if you know and can remember!

i’m waiting for something to run, so out of curiosity I checked https://ask.discourse.com/ and asked “Is it possible to access Discourse theme color variables in my own theme component?” and lo! I got this:

  1. Available Color Variables:
    Discourse provides several predefined CSS custom properties for colors, such as:

    var(--primary)
var(--secondary)
var(--tertiary)
var(--quaternary)
var(--header_background)
var(--header_primary)
var(--highlight)
var(--danger)
var(--success)
var(--love)

  2. Example Usage:
    You can use these variables in your CSS to ensure your theme adapts to different user-selected color schemes. For instance:

    body {
    background: var(--highlight);
}