Unique color scheme for a category

Dev
1

Greetings.

I am porting an older forum onto discourse and the original site had a unique theme (including unique header logo) for one of their categories.

My current solution is a theme-component that looks something like this:

CSS:

body.category-target-category{
///replace the #hexcodes with the color values of your choice
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
///continue for any/all required color values
}

HTML/JS:

<script type="text/discourse-plugin" version="0.2.0">
    api.onPageChange(() =>{
        var logo = document.getElementById("site-logo");
        var categories = document.getElementsByClassName("category-target-category");
        if(categories.length > 0)
        {
           logo.src = "category-specific-logo-url";
        }
        else
        {
            logo.src = "standard-logo-url";
        }
    });
</script>

Currently, I have to iterate through every possible color value mentioned in color_definitions.scss in order to override them. I believe that the values for this file are produced foundation/color_transformations.scss, which generates them from the values found in foundation/colors.scss. I know that you can override the root color theme values either via the admin menu or in the about.json of the theme-component, but I believe these changes take place site-wide.

Is there a more efficient way to customize a specific category aside from listing out all of the 100+ variables in color_definitions.scss? For instance can the foundation/colors.scss file be modified via a theme-component?

Thanks for your help!

1 Like
2

Hi @Rhababo :wave: welcome to Meta :slight_smile:

If you haven’t worked with Discourse themes and development, I would start with the resources here:

Also, for example, you can change the logo and header color and even icon colors for a specific category with CSS code something like this:

.category-<category-slug> .d-header {
    background: rgba(#ce0303, 0.90);
    .d-header-icons .d-icon  {
        color: #cccccc;
    }
    .header-sidebar-toggle button .d-icon {
        color: #cccccc;
        &:hover {
            color: #999999;
        }
    }
}    
    
.category-<category-slug> .d-header #site-logo.logo-small {
	content:url($small-logo);
}

.category-<category-slug> .d-header #site-logo.logo-big {
	content:url($big-logo);
}

If you simply create a new theme, you can add code and upload the logos as assets. <category-slug> is the lower case category name that appears in the URL field of the browser (separate parent and subcategories with “-” dashes, as in parentcategory-subcategory.

There are also various Theme component’s like this one that you could search for

3 Likes
3

Thank you Lilly for your help and resources!

I really appreciate the css instructions for the logo. Way more elegant than my clunky script.

Your solution will absolutely work for my use case. Although selecting every element and directly coding the color for it seemed tedious. I’m wondering if theres a way to take advantage of the mechanism that discourse uses to generate its color palette from the only 12 or so base colors found in colors.scss. I think doing so may require a plugin rather than a theme component, and that is a challenge for a different day.

Thanks!

2 Likes