Colors
Color variables are defined in @layer theme in wexa.css.
They cover light mode (default), dark mode (.dark), and contrast mode (.contrast).
See CSS Variables for how to override them.
Main colors
Main colors
| Variable name |
Default value |
Value in contrast view |
Value in dark view |
| bg-color |
rgb(250, 250, 252) |
|
rgb(24, 28, 38) |
| bg-color-alt |
rgb(240, 240, 240) |
|
rgba(38, 42, 54) |
| fg-color |
rgb(0, 5, 10) |
|
rgb(255, 255, 255) |
| fg-color-alt |
rgb(28, 28, 28) |
|
rgb(255, 255, 255) |
| border-color |
rgb(60, 60, 90) |
|
rgb(228, 228, 228) |
| border-color-alt |
rgba(28, 28, 28, 0.5) |
|
rgba(228, 228, 228, 0.5) |
| outline-color |
rgba(0, 191, 255, 0.8) |
|
rgba(0, 191, 255, 0.8) |
| hr-color |
rgba(128, 128, 128, 0.5) |
|
rgba(128, 128, 128, 0.5) |
Background colors
Background colors
| Variable name |
Default value |
Value in contrast view |
Value in dark view |
| header-bg-color |
radial-gradient(circle, rgba(14, 18, 48, 0.9), rgb(24, 28, 38)) |
|
rgb(167, 187, 207) |
| nav-bg-color |
rgba(14, 18, 48, 0.7) |
|
rgba(167, 187, 207, 0.7) |
| footer-bg-color |
rgb(24, 28, 38) |
|
rgb(167, 187, 207) |
| buttons-bg-color |
rgb(225, 225, 220) |
|
rgb(80, 80, 70) |
| progress-bg-color |
rgb(49, 47, 85) |
|
rgb(67, 77, 97) |
| mark-bg-color |
rgba(255, 250, 100, 0.5) |
|
|
| inputs-bg-color |
rgba(225, 225, 220, 0.5) |
rgba(80, 80, 70, 0.5) |
|
| dialog-bg-color |
var(--bg-color) |
|
|
| selection-bg-color |
rgb(174, 194, 255) |
rgb(114, 114, 205) |
|
Foreground colors
Foreground colors
| Variable name |
Default value |
Value in contrast view |
Value in dark view |
| header-fg-color |
rgb(241, 241, 245) |
|
rgb(41, 41, 45) |
| nav-fg-color |
rgb(231, 231, 235) |
|
rgb(31, 31, 35) |
| footer-fg-color |
rgb(241, 241, 245) |
|
rgb(41, 41, 45) |
| progress-fg-color |
rgb(20, 25, 30) |
|
rgb(226, 226, 248) |
| buttons-fg-color |
rgb(20, 25, 30) |
|
rgb(225, 225, 215) |
| mark-fg-color |
rgb(20, 25, 30) |
|
|
| dialog-fg-color |
var(--fg-color) |
|
|
| h1-color |
rgb(20, 25, 30) |
|
rgb(190, 204, 255) |
| h2-color |
rgb(30, 35, 45) |
|
rgb(190, 204, 223) |
| h3-color |
rgb(40, 45, 60) |
|
rgb(174, 190, 208) |
| h4-color |
rgb(40, 45, 60) |
|
rgb(174, 190, 208) |
| h5-color |
rgb(50, 55, 75) |
|
rgb(170, 180, 208) |
| h6-color |
rgb(60, 65, 90) |
|
rgb(180, 190, 218) |
Table colors
Table colors
| Variable name |
Default value |
Value in contrast view |
Value in dark view |
| table-border-color |
rgba(110, 120, 140, 0.8) |
|
rgb(184, 203, 208) |
| table-row-stripped-bg-color |
rgba(210, 212, 222, 0.4) |
|
rgba(184, 203, 208, 0.28) |
| table-head-bg-color |
rgb(204, 202, 212) |
|
rgb(12, 22, 14) |
| table-head-fg-color |
rgb(14, 12, 22) |
|
rgb(204, 202, 212) |
| table-caption-bg-color |
rgb(24, 28, 38) |
|
rgb(210, 221, 252) |
| table-caption-fg-color |
rgb(210, 222, 252) |
|
rgb(167, 187, 207) |
Other colors
Other colors
| Variable name |
Default value |
Value in contrast view |
Value in dark view |
| a-color |
rgb(0, 150, 200) |
rgb(10, 80, 120) if not dark |
rgb(25, 195, 255) |
| ins-color |
rgba(20, 200, 20, 0.8) |
|
|
| del-color |
rgba(240, 40, 40, 0.8) |
|
|
| s-color |
rgb(100, 100, 100) |
|
rgb(180, 180, 180) |
| blockquote-border-color |
rgb(80, 25, 40) |
|
rgb(200, 180, 200) |
| blockquote-footer-color |
rgb(80, 25, 40) |
|
rgb(200, 180, 200) |
| blockquote-bg-color |
unset — the quote keeps its gradient, from --bg-color-alt to --bg-color. Set it and the quote carries that one flat color instead. |
|
|
| blockquote-fg-color |
unset — the quote inherits --fg-color, like the text around it. |
|
|
| li-color |
rgb(140, 40, 40) |
|
|
| shadow-color |
rgba(110, 120, 140, 0.8) |
|
|
Alert colors
Alert colors
| Variable name |
Default value |
Value in contrast view |
Value in dark view |
| question-color |
rgba(180, 80, 220, 0.5) |
|
rgb(180, 80, 220) |
| question-bg-color |
rgba(180, 80, 220, 0.1) |
|
rgba(180, 80, 220, 0.1) |
| tips-color |
rgba(220, 180, 80, 0.5) |
|
rgb(230, 200, 100) |
| tips-bg-color |
rgba(180, 180, 80, 0.1) |
|
rgba(230, 200, 70, 0.1) |
| success-color |
rgba(0, 150, 0, 0.5) |
|
rgb(140, 200, 150) |
| success-bg-color |
rgba(0, 150, 0, 0.1) |
|
rgba(100, 200, 150, 0.1) |
| info-color |
rgba(0, 0, 255, 0.5) |
|
rgb(100, 130, 200) |
| info-bg-color |
rgba(0, 0, 255, 0.1) |
|
rgba(70, 100, 200, 0.1) |
| warning-color |
rgba(220, 80, 0, 0.5) |
|
rgb(220, 80, 0) |
| warning-bg-color |
rgba(220, 80, 0, 0.1) |
|
rgba(220, 80, 0, 0.1) |
| error-color |
rgba(225, 0, 0, 0.5) |
|
rgb(225, 0, 0) |
| error-bg-color |
rgba(225, 0, 0, 0.1) |
|
rgba(225, 0, 0, 0.1) |
Colors of the themes
A theme may name a color the framework does not: one whose meaning belongs
to a way of drawing, not to the structure of a page. wexa.css
uses such a color where it applies, and defines none of them. A page that
loads no theme is drawn without it.
Colors defined by the themes alone
| Variable name |
What it is |
wexa_theme |
aurora |
| img-bg-color |
What an image is laid on, in every mode |
rgba(150, 170, 210, 0.5) |
rgba(175, 160, 200, 0.5) in light mode,
rgba(190, 175, 215, 0.5) in dark mode |
The highcontrast theme writes rgb(255, 255, 255) in
both modes: a ground that lets the page show through would lower the contrast
of what is drawn on it.