How to overrule a color variable for one theme only?

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