SCSS variables in custom CSS


(Callan Bryant) #1

It’s possible to customise CSS/HTML under customisation in the admin interface, but for the sake of being able to version control a theme, would it be a good idea to add SCSS support on the custom CSS page?

Then the code could be set that override the custom colors pane via the variables defined in discourse/colors.scss at master · discourse/discourse · GitHub


(Kane York) #2

I believe SCSS is used in the customization panel, but that you can’t use the variables from the core CSS.


(Neil Lalonde) #3

Yes, SCSS is already supported in site customizations, and you can include the theme variables too. For example:

@import "theme_variables";

.d-header .current-username a {
  color: $success;
}

That UI could use some help text somewhere to make this more obvious.


(Kane York) #4

Ah, so it is available - you just have to @import it. I’ll try to remember that!


(Callan Bryant) #5

Excellent! Yes I agree there should be some text.

So, it looks like whilst we can read the theme variables, we can’t change them? If this is the case, it’s not as useful.


(Neil Lalonde) #6

Those variables are changed in the Colors tab of Customizations:

The variables in “theme_variables” will use the values from that UI.


(Callan Bryant) #7

Yes, of course. Maybe I am not making myself clear: I think it would be useful to be able to override those UI values in the custom CSS page. This way, the whole theme can be in a file and therefore versioned outside discourse and distributed easily.

For example, If I want to send you my basic theme, I would have to either list all the changes I made in the UI and also attach the CSS code, or modify the CSS to elaborate those colours into controlling the elements that depend on them.


(Johan Jatko) #8

Why not maybe add an import/export feature for the colors?
A simple JSON array handled client-side would do.


(system) #9

(Sam Saffron) #10

Themes can now be placed under version control per:


(Sam Saffron) #11