Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Design var: Difference between revisions

Template page
Proton One (talk | contribs)
m Added <nowiki/> to default case to prevent hex codes from being interpreted as a wikitext ordered list
Proton One (talk | contribs)
Added coral (= orange)
 
Line 3: Line 3:
   TEXT COLORS:  -->
   TEXT COLORS:  -->
| red    = var(--color-syntax-red)
| red    = var(--color-syntax-red)
| orange = var(--color-syntax-orange)
| orange
| coral  = var(--color-syntax-orange)
| yellow = var(--color-syntax-yellow)
| yellow = var(--color-syntax-yellow)
| lightgreen
| lightgreen
Line 27: Line 28:
| progressive = var(--color-progressive)
| progressive = var(--color-progressive)
| destructive = var(--color-destructive)
| destructive = var(--color-destructive)
| visited    = var(--color-visited)<!-- may be useless? included for completion -->
| visited    = var(--color-visited)<!-- may be useless? included for completeness -->
| error      = var(--color-error)
| error      = var(--color-error)
| warning    = var(--color-warning)
| warning    = var(--color-warning)

Latest revision as of 07:12, 3 December 2025

Template documentation (for the above template, sometimes hidden or invisible)
Description
Design variables allow visual consistency by adjusting the light and dark themes to account for the physiological difference in color perception between black-on-white and white-on-black
Dependencies
Used by
{{co}}
Syntax
{{Design var|<text color>}}
Parameters
text color
If a replacement design variable exists, injects it. If not, passes the color unchanged.
Sample
{{Design var|red}}
gives...
var(--color-syntax-red)
{{Design var|magenta}}
gives...
magenta
{{Design var|#abcdef}}
gives...
#abcdef
List of design variables
  • red orange(coral) yellow green(lightgreen) cyan blue paleblue purple brown pink violet grey
  • base inverted base-fixed inverted-fixed
  • emphasized subtle placeholder disabled
  • progressive destructive visited
  • error warning success
  • notice added removed
Visit Template:Design var/doc to edit this text! (How does this work?) (Refresh this text - why?)