MediaWiki:Common.css/doc
Documentation
This wiki is using the theming template from the default loadout. This template is intended to minimize the work required to create a custom colored version of the standard Vector skin, while maximizing the various nooks and crannies that those colors reach, all while keeping everything legible and matching.
Themes
The ThemeToggle extension is installed, and allows multiple themes to be used. In the actual stylesheet below this documentation, you'll find two huge rules at the top, each containing lots of CSS color variables. They look like this:
:root,
.view-light {
--wiki-body-background-image: none;
--wiki-body-background-color: #f6f6f6;
/* ... and so on */
}
.view-dark {
--wiki-body-background-image: none;
--wiki-body-background-color: #171717;
/* ... and so on */
}
These are the standard light and dark themes, defined in Mediawiki:Theme-definitions. Important: if you want your wiki to only support a single theme, edit that page and remove the line you don't want (don't remove both). The :root selector is a fallback, meaning that in case something happens and ThemeToggle fails to work, the following theme will still mostly work. If you have multiple themes, you can move the :root rule to whichever you'd consider the "default" theme.
RGB variables
Every color variable has an associated --rgb variant right below it. This should be an RGB representation of the color formatted as a comma-separated list, like so: 128,255,128. Do not include the rgb() wrapper.
This is used in many places to add transparency to the color, which adds flexibility to the color palette while minimizing the amount of colors that need to be defined.
Remember to update RGB variables when changing colors. Websites that can make this conversion for you are plentiful, such as rapidtables.
List of all colors with contrast checking
The table below shows all the colors currently in use, as well as notes on how to use them. The last column shows which colors are expected to show up as text against other colors. With the exception of --wiki-content-text-mix-color--95, all text in the last column should be clearly legible. If it is not, you may need to adjust one of the referenced colors in your color palette.
| Variable name | Color | Notes | Test contrast against these variables |
|---|---|---|---|
| --wiki-body-background-image | N/A | This is the image path to the wiki's background image. Usually this is uploaded to File:Site-background.jpg, File:Site-background-light.jpg, and/or File:Site-background-dark.jpg. While there's not a hard file size limit, it is recommended that this not exceed 300 KB. File size can be reduced by resizing (anything over 2560x1440p is excessive), converting to a jpg, and compressed using sites like tinypng. | N/A |
| --wiki-body-background-color | The background color behind the background image. This usually only shows up if the background image doesn't load, doesn't fill the screen, or has some transparency. This color should be similar to the overall color of the background image, or the top-left corner if it is made up of many different colors. In the former case, https://matkl.github.io/average-color/ is helpful. |
--wiki-body-dynamic-color | |
| --wiki-body-dynamic-color | This is expected to contrast sharply with the body-background-color, for cases when text needs to be displayed against it. Usually this is Template:Color on light themes and Template:Color on dark themes. |
--wiki-body-background-color | |
| --wiki-body-dynamic-color--inverted | The inverse of --wiki-body-dynamic-color. This should optimally have almost no contrast with the body-background-color.
|
N/A | |
| --wiki-body-dynamic-color--secondary | A slightly different version of body-dynamic-color. Usually this is Template:Color on light themes and Template:Color on dark themes. |
--wiki-body-background-color | |
| --wiki-body-dynamic-color--secondary--inverted | The inverse of --wiki-body-dynamic-color--secondary.
|
N/A | |
| --wiki-body-font-family | N/A | The font family of most of the wiki, such as the sidebar, navigation, and content text. Usually this is sans-serif. If modifying this, use a simple font that is easy to read. See --wiki-heading-font-family if you want to incorporate a more decorative font into the theme.
|
N/A |
| --wiki-content-background-color | The background color of the main content area. |
--wiki-content-text-color | |
| --wiki-content-background-opacity | N/A | The opacity of the main content area, to let the wiki's background image show through. Please keep this high, usually above 0.9, or it can make reading text difficult. | N/A |
| --wiki-content-background-color--secondary | A secondary content background to highlight certain things. Usually this is --wiki-content-background-color with saturation and/or value reduced or increased by about 10%, but you're free to make it whatever you want provided the contrast checks to the right still pass.
|
--wiki-content-text-color | |
| --wiki-content-border-color | Border color for the main content area and elements within it. | N/A | |
| --wiki-content-text-color | Text color for the main content area. | N/A | |
| --wiki-content-link-color | Links within the content area. Please do not make this red, as red links on wikis traditionally denote pages that don't exist. |
--wiki-content-link-label-color | |
| --wiki-content-link-label-color | This is used when placing text on an element with the link color as a background, such as a button. | N/A | |
| --wiki-content-link-color--visited | The color of visited links. This is optional, and usually inherits --wiki-content-link-color.
|
N/A | |
| --wiki-content-link-color--hover | The color links change to when hovered over. This is optional, and usually inherits --wiki-content-link-color.
|
N/A | |
| --wiki-content-redlink-color | The color of links to pages that don't exist. Since these should only rarely be seen, you can be a little lax about choosing a color that contrasts with the background, but it should still be legible. | N/A | |
| --wiki-content-text-mix-color | A mix of --wiki-content-text-color and --wiki-content-background-color. There are many sites that can generate this for you, such as w3schools' color mixer. This is generally used to mark disabled elements or placeholder text.
|
--wiki-content-background-color | |
| --wiki-content-text-mix-color-95 | The same as --wiki-content-text-mix-color, but the mix is 95% --wiki-content-background-color. This is used to mark disabled elements. The contrast checker to the right should actually be very hard to read.
|
--wiki-content-background-color | |
| --wiki-content-dynamic-color | This is expected to contrast sharply with --wiki-content-background-color. Usually this is Template:Color on light themes and Template:Color on dark themes.
|
--wiki-content-background-color | |
| --wiki-content-dynamic-color--inverted | The inverse of --wiki-content-dynamic-color.
|
N/A | |
| --wiki-content-dynamic-color--secondary | A slightly different version of --wiki-content-dynamic-color. Usually this is Template:Color on light themes and Template:Color on dark themes.
|
--wiki-content-background-color | |
| --wiki-content-dynamic-color--secondary--inverted | The inverse of --wiki-content-dynamic-color--secondary.
|
N/A | |
| --wiki-heading-color | The color of headings, such as the page title and section headings. Usually this is set to --wiki-content-text-color, but feel free to give it a different color to spice up the theme a little.
|
N/A | |
| --wiki-heading-font-family | N/A | The font family of headings, such as the page title and section headings. | N/A |
| --wiki-accent-color | Used to style infoboxes and some buttons, such as the save button when editing. |
--wiki-accent-label-color | |
| --wiki-accent-color--hover | The color of accent-color when hovered over, in some cases. Usually this is just accent-color with saturation and/or value reduced or increased by about 10%, but you're free to make it whatever you want provided the contrast checks to the right still pass. |
--wiki-accent-label-color | |
| --wiki-accent-label-color | The color of normal text against the accent color. | N/A | |
| --wiki-accent-link-color | The color of links against the accent color. | N/A | |
| --wiki-sidebar-background-color | The background color of the sidebar to the left of the content area. Usually this inherits --wiki-content-background-color.
|
--wiki-sidebar-link-color | |
| --wiki-sidebar-background-opacity | N/A | The background opacity of the sidebar. Usually this inherits --wiki-content-background-opacity.
|
N/A |
| --wiki-sidebar-border-color | The border color of the sidebar. Usually this inherits --wiki-content-border-color.
|
N/A | |
| --wiki-sidebar-link-color | The color of links in the sidebar. Usually this inherits --wiki-content-link-color.
|
N/A | |
| --wiki-sidebar-heading-color | The color of headings in the sidebar. Usually this inherits --wiki-content-heading-color.
|
N/A | |
| --wiki-navigation-background-color | The primary background color of the navigation tabs above the content area. Usually this inherits --wiki-content-background-color--secondary.
|
--wiki-navigation-text-color | |
| --wiki-navigation-background-color--secondary | The upper background color of the navigation tabs, as well as the background color of the "More" menu dropdown. Usually this inherits --wiki-content-background-color.
|
--wiki-navigation-text-color | |
| --wiki-navigation-border-color | Border color of the navigation tabs. Usually this inherits --wiki-content-border-color.
|
N/A | |
| --wiki-navigation-text-color | The color of text in the navigation tabs. Usually this inherits --wiki-content-link-color.
|
N/A | |
| --wiki-navigation-selected-background-color | The background color of the currently active navigation tab. Usually this inherits --wiki-content-background-color
|
--wiki-navigation-selected-text-color | |
| --wiki-navigation-selected-border-color | The border color of the currently active navigation tab. Usually this inherits --wiki-navigation-border-color
|
N/A | |
| --wiki-navigation-selected-text-color | The text color of the currently active navigation tab. Usually this inherits --wiki-content-text-color
|
N/A | |
| --wiki-alert-color | A general, usually red-ish color used for negative notices. |
--wiki-alert-label-color | |
| --wiki-alert-label-color | The color of text against --wiki-alert-color as a background.
|
N/A | |
| --wiki-warning-color | A general, usually orange-ish color used for warning notices. |
--wiki-warning-label-color | |
| --wiki-warning-label-color | The color of text against --wiki-warning-color as a background.
|
N/A | |
| --wiki-success-color | A general, usually green-ish color used for success notices. |
--wiki-success-label-color | |
| --wiki-success-label-color | The color of text against --wiki-success-color as a background.
|
N/A | |
| --wiki-icon-general-filter | N/A | A filter applied to many icons to make them visible on dark themes. Usually this is just invert(100%) on dark themes and blank on light themes.
|
N/A |
| --wiki-icon-to-link-filter | N/A | A filter that converts many icons into the same color as --wiki-content-link-color. This can be generated by plugging that into https://mrpie5.gitlab.io/css-filter-generator/.
|
N/A |