CSS variables

CSS variables can be used in site and personal css files, and since MW version 1.39 also inline inside style tags.
With the update to MW 1.43 in March 2025, they are also supported in TemplateStyles.

General info

CSS variables are defined like this:

--color-lightblue: #00EAFF;

and can then be used everywhere like this:

background-color: var(--color-lightblue);

They can also be defined for certain classes, like for example:

.theme-fandomdesktop-dark  { --color-blue: #0000FF; }
.theme-fandomdesktop-light { --color-blue: #00EAFF; }

and then be applied to other classes like this:

.bg-blue { background-color: var(--color-blue); }

Fandom CSS variables

Fandom wikis have a lot of css variables either predefined generally, or calculated from the colors set in Theme Designer.

Beside the color variables, there are also variables for things like width, height, opacity, images, etc.

Some variables additionally are available as RGB variant. This opens the possibility to alter their opacity. See RGB variants below.

The following is a list of css color variables that can be used and dynamically change for dark or light mode.

CSS color variables

Note: For the full list of all Fandom variables for the For All Mankind Wiki see Fandom CSS

Variable	RGB variant	Theme
Variable	RGB variant	Current	Dark	Light
`--theme-accent-color` Accent color taken from ThemeDesigner	yes		#cfa93d	#a92f1a
`--theme-accent-color--hover` Accent color taken from ThemeDesigner, darkened or lightened by 20%, depending on theme			#856b20	#e25d46
`--theme-accent-dynamic-color-1` dynamic-1 color for accent. See section Dynamic colors below.	yes		#000	#fff
`--theme-accent-dynamic-color-2` dynamic-2 color for accent. See section Dynamic colors below.	yes		#3a3a3a	#e6e6e6
`--theme-accent-label-color` Accessible text color to use with --theme-accent-color background			#000	#fff
`--theme-alert-color` Alert color (red-ish), adjusted for proper contrast comparing with page background	yes		#c40017	#b40015
`--theme-alert-color--hover` Alert color (red-ish) adjusted for proper contrast comparing with page background, darkened or lightened by 20%, depending on theme			#ff2b43	#4d0009
`--theme-alert-label` Accessible text color to use with --theme-alert-color background			#fff	#fff
`--theme-body-background-color` Body background color taken from ThemeDesigner			#070707	#d0a68e
`--theme-body-dynamic-color-1` dynamic-1 color for body background. See section Dynamic colors below.	yes		#fff	#000
`--theme-body-dynamic-color-2` dynamic-2 color for body background. See section Dynamic colors below.	yes		#e6e6e6	#3a3a3a
`--theme-body-text-color` Accessible text color to use with --body-background-color background			#fff	#000
`--theme-body-text-color--hover` Accessible text color to use with --body-background-color background, darkened or lightened by 20%, depending on theme			#cccccc	#333333
`--theme-border-color` Accessible border color calculated based on --theme-page-background-color	yes		#3f3f3f	#ab8b79
`--theme-link-color` Link color taken from ThemeDesigner	yes		#d5b356	#792212
`--theme-link-color--hover` Link color taken from ThemeDesigner, darkened or lightened by 20%, depending on theme			#e9d7a7	#200904
`--theme-link-dynamic-color-1` dynamic-1 color for links. See section Dynamic colors below.	yes		#000	#fff
`--theme-link-dynamic-color-2` dynamic-2 color for links. See section Dynamic colors below.	yes		#3a3a3a	#e6e6e6
`--theme-link-label-color` Accessible text color to use with --theme-link-color background			#000	#fff
`--theme-message-color` Message color (blue-ish), adjusted for proper contrast comparing with page background			#913f82	#753369
`--theme-message-label` Accessible text color to use with --theme-message-color background			#fff	#fff
`--theme-page-accent-mix-color` Mix of a page background color and accent color in the 50-50 ratio			#6b5822	#bd6b54
`--theme-page-background-color` Page (article) background color taken from ThemeDesigner	yes		#070707	#d0a68e
`--theme-page-background-color--secondary` Secondary color calculated based on --theme-page-background-color, slightly mixed with white or black color, depending on theme			#2c2c2c	#c69e87
`--theme-page-dynamic-color-1` dynamic-1 color for page (article) background. See section Dynamic colors below.	yes		#fff	#000
`--theme-page-dynamic-color-2` dynamic-2 color for page (article) background. See section Dynamic colors below.	yes		#e6e6e6	#3a3a3a
`--theme-page-text-color` Text color for a page. Alias for --theme-page-dynamic-color-2.	yes		#e6e6e6	#3a3a3a
`--theme-page-text-color--hover` Hover state of a page text color			#b3b3b3	#6d6d6d
`--theme-page-text-mix-color` Mix of a page background color and page dynamic-2 color in the 50-50 ratio			#777777	#857064
`--theme-sticky-nav-background-color` Sticky nav background color. This color can be set inside the Theme Designer.			#2b2b2a	#c4361e
`--theme-sticky-nav-dynamic-color-1` dynamic-1 color for sticky nav background. See section Dynamic colors below.	yes		#fff	#fff
`--theme-sticky-nav-dynamic-color-2` dynamic-2 color for sticky nav background. See section Dynamic colors below.	yes		#e6e6e6	#e6e6e6
`--theme-sticky-nav-text-color` Text color for sticky nav. Alias for --theme-sticky-nav-dynamic-color-1			#fff	#fff
`--theme-sticky-nav-text-color--hover` Hover state of a sticky nav text color			#cccccc	#cccccc
`--theme-success-color` Success color (green-ish), adjusted for proper contrast comparing with page background	yes		#0c742f	#0a6629
`--theme-success-label` Accessible text color to use with --theme-success-color background			#fff	#fff
`--theme-warning-color` Warning color (yellow-ish), adjusted for proper contrast comparing with page background			#cf721c	#874a12
`--theme-warning-label` Accessible text color to use with --theme-warning-color background			#000	#fff

RGB variants

The rgb variants of the variables can be used to produce semi transparent versions of that color.

Some examples, showing the result on different backgrounds:(switch the theme to see both variants)

Code	Color
`--theme-page-background-color--rgb`	Lorem ipsum dolor sit amet
`rgba(var(--theme-page-background-color--rgb), 0.5)`	Lorem ipsum dolor sit amet
	Lorem ipsum dolor sit amet
	Lorem ipsum dolor sit amet

`--theme-border-color--rgb`	Lorem ipsum dolor sit amet
`rgba(var(--theme-border-color--rgb), 0.2)`	Lorem ipsum dolor sit amet
	Lorem ipsum dolor sit amet
	Lorem ipsum dolor sit amet

`--theme-link-color--rgb`	Lorem ipsum dolor sit amet
`rgba(var(--theme-link-color--rgb), 0.2)`	Lorem ipsum dolor sit amet
	Lorem ipsum dolor sit amet
	Lorem ipsum dolor sit amet

`--theme-accent-color--rgb`	Lorem ipsum dolor sit amet
`rgba(var(--theme-accent-color--rgb), 0.7)`	Lorem ipsum dolor sit amet
	Lorem ipsum dolor sit amet
	Lorem ipsum dolor sit amet

Dynamic colors

Dynamic colors are established on the basis of their background. They are calculated to reach the best contrast ratio possible.

dynamic-color-1 is fandom-black (#0E191A) for light backgrounds and white (#FFFFFF) for dark backgrounds.
dynamic-color-2 is dark grey (#3A3A3A) for light backgrounds and light grey (#E6E6E6) for dark backgrounds.

Variable aliases

Variable name	Alias for
`--theme-accent-label-color`	`--theme-accent-dynamic-color-1`
`--theme-body-text-color`	`--theme-body-dynamic-color-1`
`--theme-link-label-color`	`--theme-link-dynamic-color-1`
`--theme-page-text-color`	`--theme-page-dynamic-color-2`
`--theme-sticky-nav-text-color`	`--theme-sticky-nav-dynamic-color-1`

Notes

CSS variables are allowed to be used in inline css styles since the update to MediaWiki 1.39.7 in 2023.
CSS variables are supported in TemplateStyles as of the MediaWiki 1.43 update in March 2025.
Depening on the editor used, CSS variables used in css files generate an error message due to the editor being outdated and not recognizing them as valid code. These errors can be ignored.

External help pages

CSS variables on help.fandom.com
Theming variables
ThemeColorClasses CSS stylesheet to allow color variables as classes.
developer.mozilla.org
w3schools.com

CSS variables

Contents