Flarum CSS keys?

HasanMerkit

How can I use which Flarum settings with CSS? What do we have? Can you share with examples?

For example, there was a code that got the primary color, but I couldn't find it.

HasanMerkit

I also have this: Dark mode calibrate; @config-dark-mode (seems Boolean)

.div-name when (@config-dark-mode=false){
#style codes. bla bla bla, light mode.
}

.div-name when (@config-dark-mode=true){
#style codes. You love dark themes like me
}

clarkwinkelmann

Most of Flarum's variables can be found in https://github.com/flarum/framework/blob/main/framework/core/less/common/variables.less

The first 4 are the ones that are automatically updated with the settings' values from the admin: @config-primary-color, @config-secondary-color (colors), @config-dark-mode, @config-colored-header (booleans)

The other variables in the file can also be used by extensions/custom less, those values are either "constants" or values computed from the settings variables.

Since the most recent Flarum version, most of these values are also exposed as native CSS variables instead of Less, which means they can be used in external CSS sheets or even inline CSS. This file shows the names of the CSS variables https://github.com/flarum/framework/blob/main/framework/core/less/common/root.less