How do I see the variables, css and CSS that come by default in Discourse?

dev
1

I want to see the styles that are already applied in discourse by default, is there any way to see the css and csss and variables page?

2

A pretty easy way to see the variables is to open the browser console (usually F12, or right click and inspect the page), then look for Elements tab, and on the style panel, you can see all the :root definitions:

image
image786×1159 51 KB

You can also explore the source code here:

5 Likes
3

Also helpful to browse through the Styleguide: https://meta.discourse.org/styleguide/
E.g. there’s a section now explaining the general css class syntax.

3 Likes