Can some knowledgeable code guru explain why this seems to always throw an error (regardless of the settings.yaml file contents): .d-header { background: rgba($header_color, $transparency); } but this does not? .d-header { background: rgba(darkslategrey, 0.5); } Even if I switch the code to use $header_color in the rgb(47, 79, 79) format, it always give me an error related to a $color element. :thinking:

Hello Lilly :wave: You have to create variables from these to make it workable in setting. :slightly_smiling_face: Here is a quick example: https://github.com/VaperinaDEV/header-transparency

This works for me? $header_color: rgb(0,0,0); $transparency: 0.5; .d-header { background: rgba($header_color, $transparency); }

Yes but as soon as I put the variables into a settings.yml like this, it does not work for me. I get an error saying $color is not a color even though I am not using a $color variable here. So I assume it may be related to an interpolation thing that I don’t understand. header_color: type: string default: "" description: en: "..." transparency: type: string default: "" description: en: "..." In my mind, it seems like this is about how the CSS is compiled. the variables work when declared at the CSS run time, but not dynamically via separate settings.yml file. :thinking: this doesn’t work either: .d-header { background: rgba(#{$header_color}, #{$transparency}); }

Hi Lilly! I stumble upon the same issue not so long ago. :smile: Short answer: Themes and CSS variables are considered strings and, while you can use them in attributes such as color, background, border and so on, they can’t be used in SCSS color functions. The issue is not related to Discourse: https://github.com/sass/sass/issues/3006 There’s an overcomplicated way to circumvent this I didn’t try: Issue · GitHub

That’s awesome, thank you @Don :slight_smile:

It’s not the first time I say “it’s not possible” and you come like “yes it is”, Don :smile: probably not the last time as well :see_no_evil:

SCSS: כאבי ראש של משתני מאפיין צבע

מפתח

Lilly (Lillian ) 12 בספטמבר,‏ 2023,‏ 1:58pm 6

That’s awesome, thank you @Don

נושא		תגובות	צפיות
SCSS variable theme issue after update Product Support	4	792	22 בפברואר,‏ 2019
Custom CSS isn't applied to my Discourse Product Support	17	3242	5 בפברואר,‏ 2021
Theme with variable width inside settings UX	5	1170	13 באפריל,‏ 2022
Update themes and plugins to support automatic dark mode Developer Guides how-to , auto-dark , theme-guides	10	4577	14 בנובמבר,‏ 2025
Discourse's CSS variables aren't set Product Support	39	1671	8 במאי,‏ 2023

SCSS: כאבי ראש של משתני מאפיין צבע

נושאים קשורים