As of yesterday’s update (of my hosted server at https://doomemacs.discourse.group), none of my custom CSS is applied. Changes to my theme(s) or components’ CSS have no effect (though changes their or other HTML sections work fine). There is one suspect link tag pointing to an empty stylesheet, whose hash changes each time I change my CSS. It appears Discourse is silently failing to compile my stylesheets. There are no mentions of failures in my error logs and discourse_theme uploads my stylesheets without complaint, but to no effect. Would an admin kindly have a look?

The fix is now merged in core and your site is deployed @hlissner. Note that I disabled two theme components: the one with custom styles (which you can enable) and discourse-theme-category-homepage, which needs to be updated upstream before you can enable it. More details on that in Enhanced category-box display component - #7 by pmusaraj

~~I am not certain, but I think you might be hitting this change https://meta.discourse.org/t/restrict-editing-of-remote-themes/170051~~ Looks like this is incorrect :smiley:

Hi @hlissner, I am working on a fix for this, a recent upgrade to core broke the theme component on your instance. I should have a fix shortly.

Thank you! The stylesheets now correctly load, however, the SCSS color variables don’t appear to inherit my theme’s color scheme. e.g. $secondary yields its default value, #ffffff, instead of #282c34. Is this perhaps another regression from e8b8272?

Yes, it is another regression. It’s a bit of a tricky fix… and for the vast majority of color variables, theme components should be using CSS custom properties. You can look at this guide Update themes and plugins to support automatic dark mode, for an overview and some examples on how to add custom color variations in a special color_definitions.scss file in your theme component. Let me know how it goes!

I’ve done so where I can, but without access to these variables I cannot transform colors based off my active scheme. e.g. $primary-low: dark-light-choose(darken($secondary, 12%), lighten($secondary, 10%)); :root { --primary-low: #{$primary-low}; } Is there a better way around this? I could add styles directly to each theme, but I intend to have many, and I’d rather handle some general cases from a central, global component where possible.

Yes, that makes sense, did you try adding that SCSS above to a new file in common/color_definitions.scss? It should just work if you add it there. (There is also a tab in the UI for that special stylesheet.)

Was about to try exactly that, then the discourse went down with a The software powering this discussion forum encountered an unexpected problem, haha.

You can access the site via /safe-mode, that disables themes and components and then you can see what happened. This is yet another regression though, those SCSS errors should not blow up the whole site, I’ll certainly fix that in the next few days.

That worked! The color variables are properly set in color_definitions.scss’s scope. Only trouble is I can’t import other stylesheets from it. e.g. // scss/globals.scss $foo: "#000000"; // color_definitions.scss @import "globals"; :root { --foo: #{$foo}; } Yields this in the Discourse error logs: SCSS compilation error: Error: File to import not found or unreadable: globals.scss. on line 129 of color_definitions.scss >> @import "globals"; I can redesign my stylesheets to avoid the dependency though, so not a big deal, but could this be considered a bug?

Yes, I have a PR up to fix the import issue, should be merged by tomorrow. https://github.com/discourse/discourse/pull/11963

Custom CSS isn't applied to my Discourse

Product Support

hlissner (Henrik Lissner) February 4, 2021, 11:42pm 14

Thanks for your help! The PR was merged, my instance was updated, and I can import styelsheets into color_definitions.scss, but this issue has resurfaced:

This time, this affects variables in color_definitions.scss as well.

Topic		Replies	Views
Referencing Discourse theme color variables in custom theme component? Product Support css	3	260	March 21, 2025
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	12395	January 9, 2018
Theme Developer Tutorial: 3. CSS in Themes Developer Guides	5	985	March 18, 2025
Feature proposal: Import user-defined SCSS files UX	4	1417	August 1, 2018
Color palettes loading incorrectly with 2.7.0.beta5 Bug	7	1342	March 18, 2021

Custom CSS isn't applied to my Discourse

Related topics