How to overrule a color variable for one theme only?

[Queth (Q)]

(i’m sorry I couldn’t find where this would fit most, chose dev)

I have 3 themes. In one theme, the calculation of $primary_low yields a color with too little contrast with the bgcolor. I have tried tweaking the primary color (the BG color can’t be changed due to it being a branding color), but to no avail. It will either give almost no contrast, or make a very “highlight” kind of effect which is just the opposite of what I want.

Solution (I thought) would be to simply assign a colorvalue to $primary_low in that specific theme CSS. But it won’t stick. Even adding !important doesn’t do the trick. Is there a way of changing this for 1 theme only? Nb: these are local themes.

[david (David Taylor)]

Check out @awesomerobot’s guide here:

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…

[Queth (Q)]

Ahh thank you! unfortunately it is a local theme, and will not be remote.
Is there a way i could do this in any other way?

[david (David Taylor)]

This is considered an advanced feature, so it’s not available in the UI. You can use the theme cli on ‘local themes’.

[Queth (Q)]

glad it can be done in some way this whole ruby stuff is still way too advanced for me though, I really hope the override could be available sometime in the future also for local themes.

Going to consider which one I can do with my level of knowledge… I’m a total github noob so making a remote theme sounds very daunting. (yes I have read the guide).

[smrtey]

Remote themes are really easy. I’d never used GitHub before and I had no idea what about.json meant but I’ve used it for a few themes without any problem. You just make a local theme and then upload it to GitHub and then you can add stuff to the about.json file on GitHub and you end up with a bunch of cool customizable options for your theme when you reinstall it on your site from GitHub

I should have time later today to make a post walking you through it and then it should all make sense pretty quickly.

eta: lol I was thinking about settings.yml which is another great thing about remote themes, but looking at David’s link above the about.json is even simpler.

[smrtey]

Here are the way too detailed instructions. Let me know if it doesn’t work as advertised.

1. Create a GitHub account if you don’t already have one.

2. In Discourse, Export your theme:
   Admin -> Customize -> Select the theme you want to export
   

   
   
   This saves the theme as a .zip file on your computer.

3. Extract the files on your computer.

4. Go to GitHub and create a New repository:
   
   

   

5. Click on “uploading an existing file”
   

   

6. Drag the unzipped folders and files from the theme you exported that will be something like:
   
   from your computer to your repository and click “Commit Changes”

7. Now you can edit the about.json file. Click on the file name
   
   

The file will be something like

{
  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-light": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

8. Click on the edit pencil icon.

Now you can edit it. I recommend changing the name of the color scheme; otherwise when you import the theme back to your site, you’ll end up with two different color schemes with the same name. So below I’ve changed "blue-light": { to "blue-lite": {

Just add your color variable overrides to the end of the color scheme after love and make sure to include a comma after the love value

  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-lite": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100",
      "primary-high": "333333",
      "primary-medium": "666666",
      "primary-low-mid": "999999",
      "primary-low": "cccccc"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

9. Click on “Commit Changes”

10. Click on the repository name to go back to the main repository page
    

    

11. Copy the Clone or Download link
    

12. In Discourse, Import your theme:
    Admin -> Customize -> Install -> From a git repository: Paste the link and Install
    

13. You can now edit this theme just like you would any local theme with your custom $primary-high, $primary-medium, $primary-low-mid and $primary-low values.

[Queth (Q)]

thank you so much @smrtey for creating this step by step guide! Today I finally had time to sit down for this and follow it. It worked like a charm!
These were my first steps on github too, I had never created an account or a repository. So thank you once again.

Perhaps this could be included in the theme creating guide? or linked to?

[smrtey]

Custom settings are also a great thing I discovered. You need to add a settings.yml file to your theme or component’s github repository. Here is a sample component with settings you can customize:
https://github.com/oerog/CustomSettings.git

This is the settings.yml file that sets the variables $header_text, $header_text_color and $header_bg

header_text: 
  type: bool
  default: false
  description:
    en: 'Select to add text in header next to logo.'
header_text_color: 
  type: string
  default: "$header_primary"
  description:
    en: 'Text color (default is "header primary")'
header_bg: 
  type: string
  default: "$header_background"
  description:
    en: 'Text color (default is "header background")'

Which gives you these setting options when you install the component:

Which sets this css

@if $header_text == "true" {
    .d-header .title::after {
        padding: 0 20px;
        font-size: 1.3em;
        color: $header_text_color;
        background-color:$header_bg;
        content: "Here is some text";
    }
    .archetype-regular #main.no-text .d-header .title::after {
        display:none;
    }
}

You can install the same component multiple times (just rename it once you’ve installed it to help keep track) so you can add the component to different themes with different settings for each theme.

Here is how you create the settings.yml file. Create a new file:

Enter the code (I write it in a text file and then C&P it):

Save it by “Commit new file”

Then install the component on your site and edit the settings