Wiki source code of Style Variables
Last modified by superadmin on 2026/10/14 18:26
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
![]() |
1.4 | 1 | **A style variable represents a value shared across all of XWiki's style sheets.** These values are meant to be used instead of hard-coding them in stylesheets. Our [[CSS codestyle>>doc:dev:Community.CodeStyle.XhtmlCssCodeStyle.WebHome||anchor="HCSS"]] makes the use of these variables mandatory in XWiki Standard development. It's recommended to rely on those for your own custom developments too. :) |
![]() |
1.1 | 2 | |
| 3 | They provide some level of consistency in the UI: | ||
| 4 | |||
![]() |
1.3 | 5 | * It will be harder for customizations to get unexpected results. |
![]() |
1.1 | 6 | * XWiki can provide colors that work well together by default. Among other things, it can help make sure all your components respect some minimum contrast. |
| 7 | * It's custom UIs using these colors will be compatible with any color theme. | ||
| 8 | |||
| 9 | Style variables are provided by the skin you are using. For XWiki Standard, this skin is Flamingo. All documentation in here will describe specifically the style variables provided by Flamingo. | ||
![]() |
1.2 | 10 | |
| 11 | Currently, the Flamingo Skin supports three kinds of style variables. They are (ranging from the oldest to the newest): | ||
| 12 | |||
![]() |
3.2 | 13 | * The Colibri colorTheme variables |
![]() |
1.2 | 14 | * The LESS variables (Flamingo colorTheme + design system inherited from bootstrap + Misc additions from the Flamingo skin) |
| 15 | * {{version since="17.3.0RC1"}}The CSS properties{{/version}} | ||
| 16 | |||
| 17 | (% class="wikigeneratedid" %) | ||
![]() |
1.5 | 18 | All of these variables are supposed to be used in ##.css## files, ##.less## files and their respective StyleSheet Extensions's contents. |

