ThemeColorClasses

ThemeColorClasses is a CSS stylesheet that allows using the wiki's theme colors in page content.
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.
== ==
== ==
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.
=== ===
Lorem ipsum 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.
Lorem ipsum 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.
Lorem ipsum 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.
Lorem ipsum 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.
Lorem ipsum 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.
Lorem Ipsum 
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Lorem Ipsum 
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
=== 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:
Lorem ipsum 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.
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.
== ==
* ThemeStyle