How to overrule a color variable for one theme only?

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

Check out @awesomerobot’s guide here:

6 Likes

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?

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

9 Likes

glad it can be done in some way :slight_smile: 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).

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.

6 Likes

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

  5. Click on “uploading an existing file”

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

  1. 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"
}
  1. 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"
}
  1. Click on “Commit Changes”

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

  3. Copy the Clone or Download link
    image

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

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

6 Likes

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?

3 Likes

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:

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

2 Likes