Each wiki has its own set of colors, which is subject to changes via Theme Designer and also differs between light mode and dark mode. The colors are already exposed via a set of CSS variables/custom properties, but this stylesheet makes it easier to use them via dedicated class names.

In addition, the stylesheet offers a method to set free colors based on theme via the page's source code.

Installation

Usage

There are many different variables and therefore many related classes, but there is some sense behind them. Some of the colors are set directly via Theme Designer, while others are picked automatically by Fandom. Below is a list of the available colors, without the class names which are listed later:

• Background color of the wiki and the appropriate text color
• Background color of the page and an appropriate text color
  • Secondary background color of the page, slightly different from the main one
• Link color, which is naturally used for link text but can also be used as a background color with an appropriate text color
• Accent color, same as used by default in infoboxes
• "Alert", "Warning", "Success" and "Message" colors
• Background color of the wiki's sticky navigation bar (the one that appears at the top of the screen when scrolling the page down) and an appropriate text color

The desired color is applied by specifying the correct class name on the element, see the code examples below.

Class names

Below is a list of the available class names. Some of the classes have an optional mode that changes the color slightly when the element is hovered over. This is turned on by adding the class with-hover besides the color class.

The list is also a live demo. If DemoScripts is enabled on your account (should be by default), each list item would also show it's associated color according to this wiki's theme. Switch between light and dark theme to see the colors change, and hover over the with-hover part to see the hover effect.

• theme-body
  • with-hover
• theme-page
  • with-hover
• theme-page-secondary
  • with-hover
• theme-accent
  • with-hover
• theme-link
  • with-hover
• theme-alert
  • with-hover
• theme-success
• theme-warning
• theme-message
• theme-sticky-nav
• theme-body-text
  • with-hover
• theme-page-text
  • with-hover
• theme-accent-text
  • with-hover
• theme-link-text
  • with-hover
• theme-alert-text
  • with-hover
• theme-success-text
• theme-warning-text
• theme-message-text
• theme-sticky-nav-text
• theme-border

Notes

• The base classes affect both the background and text color, while those with -text only affect text color. It is possible to use both types together on the same element, and it will result in the background color from one and the text color from the other. Though, make sure the combination is readable on both themes.
• The theme-border class can be used alone or with any of the other classes. It applies a solid 1px border in the theme's "border color", and you can customize the width and type of the border via site CSS or inline style="..." attribute. When customizing, make sure to use the longhand property names border-width: and border-style:. Using the shorthand form like border: 5px solid; with no specific color would reset the border color to match the text color, which is fine as well but in this case you don't need the border class.

Examples

<div class="theme-page-secondary" style="padding: 1em;">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</div>

<span class="theme-alert-text">Lorem ipsum</span> dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

<div class="theme-accent with-hover">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</div>

<div class="theme-body theme-page-text">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</div>

<div class="theme-border" style="border-style: dashed; border-width: 10px;">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</div>

<div class="theme-page-secondary theme-border" style="alpha: 70%; padding: 1em;">
<span style="font-size: 150%;">Lorem Ipsum</span><div class="theme-alert" style="height: 3px;">&nbsp;</div>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</div>

Custom theme-based colors

The classes above allow applying theme-based colors out of the wiki's predefined pallete. However, sometimes wikis want to use custom colors in certain places (like colorful templates or tables), and still want different colors for each theme. This can be done by using the special class theme-custom, and setting the colors via custom properties. The custom properties are:

• --background-light
• --background-dark
• --color-light
• --color-dark
• --border-color-light
• --border-color-dark

Here is an example of how to use it:

<div class="theme-custom" style="--background-dark: darkblue; --background-light: lightblue; --border-color-light: lime; --color-dark: yellow; --color-light: purple;">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</div>

If a certain value is missing, the background defaults to no color (transparent), the text color to the wiki's page text color, and the border color to match the text color. However, no actual border is added by default. Use border-width: and border-style: to add it.

See also

• ThemeStyle