Challenges creating a custom color palette

[mk0r]

I’ve tried to create a completely custom color scheme by defining my colors in the about.json file of my theme on GitHub.

Unfortunately only some of my color definitions are being respected in the site.

For example, in my json scheme I define: "success_low": "DDE2B2”,

However my style guide shows a different (computed) color for var(--success-low)

I’ve read through all the guides and it seems maybe the json palette definitions are not all used and instead discourse is computing some of the values on its own and not respecting my definition.

Do I need to instead hard code the colors in a css variables file? Will these override the computed values? Where and how should I do this? I’d like to define every single color for both light and dark mode in discourse, I don’t like any of the computed values.

Thanks for any help. It’s been very hard to wrap my head around how all this stuff works, what takes priority in the final css, etc.

update: this post would seem to contradict my troubleshooting:

Override values for auto-generated color variables

As of v2.3.3 (released early September) you can now override our automatically-generated SASS color variables ($primary-low, $primary-medium, etc) in remote themes (you can not yet do this directly via the admin UI.) To override one of these colors you need to add it to the color_scheme section of your theme’s about.json file. Once you’ve done that you can see the override listed within your color scheme in /admin/customize/colors. "color_schemes": { “My_colors”: { "primary": "000000…

So it leaves me more confused about why discourse still seems to be auto generating colors

[Lilly]

@mk0r

For example, in my json scheme I define: "success_low": "DDE2B2”,

However my style guide shows a different (computed) color for var(--success-low)

i see there is an underscore in the first (success_low) and a dash in the second (success-low).

you can always paste your color palette here as it appears in the json file for us to have a look.

[mk0r]

Thanks, I will go through and check all the underscores vs dashes. Is there any reference json file I could find somewhere that has a reference for all variables, with dashes and underscores in the right places?

[mk0r]

I originally used the “solarized” theme as a reference

[mk0r]

This is extremely confusing. In the styleguide the labeled css variables use dashes:

Whereas in this (and other) example schemes they have underscores:

about.json

I am admittedly not the sharpest coding knife in the drawer, and I’m sure people who’ve worked on this for a long time find it more obvious and intuitive… but trying to wade through this feels like I’m going a bit crazy.

It’s really hard to get an intuitive grasp of all the logic for how light and dark mode colors are used. Between the multitude of scss files and transformations, json, admin GUI, palettes which are (somewhat?) independent of themes…

Sorry for my rambling, just struggling a bit over here

[Lilly]

you have another old topic that may help you with this

Reference for full color customization

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: Custom…

[mk0r]

Unfortunately that thread didn’t solve the issue.

I’m still confused – is there no clear guidance available about how to set every color? And what the correct syntax/names are in the json vs the css variables?

[Lilly]

did you look at this?

app/assets/stylesheets/common/foundation/color_transformations.scss

I’m not seeing anything obviously wrong with your about.json file so it may be something else with the way you have your theme configured.

specifically which variables are working and which aren’t?

have you read any of the theme dev topics? i think it is possible you may be missing other required theme files in your repo.

Theme Developer Quick Reference Guide

As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under #howto / #themes, but if you just need something to jog your memory, this guide may help. General Resources Beginner’s guide Designer’s guide Developer’s guide Theme Creator Theme CLI Theme Directory Component Directory Theme Modifiers File/Folder Structu…

Structure of themes and theme components

Discourse supports native themes that can be sourced from a .tar.gz archive or from a remote git repository including private repositories. [56] An example theme is at: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme [32] The git repository will be checked for updates (once a day), or by using the Check for Updates button. When changes are detected the Check for Updates button will change to the Update to Latest. [image] To create a theme you need to follow a spe…

Beginner's guide to developing Discourse Themes

So, you want to create Discourse themes? Not sure where to start? Or maybe you have created Discourse themes before, but want to learn how to do even more cool things. Well, you’ve come to the right place Developer’s guide to Discourse Themes Subjects include a general overview of Discourse themes, creating and sharing Discourse themes, theme development examples, searching for and finding information / examples in the Discourse repository, and best practices. Prerequisites: …

[mk0r]

Yes I’ve read them, but there’s no complete reference for all the color variables that I could see. I based my about.json file on the “solarized” theme which seemed to have all the variables declared. I’m going to try again from clean slate and report back and use developer tools to see what the issues might be…

Thanks for the help so far