CustomTheme is a small JavaScript snippet which allows you to personally override your wiki's theme colours and background, without affecting any other users.
Installation
Customisation
CustomTheme can be customised by adding a .custom-theme element to Special:MyPage/global.css and setting any of the following CSS custom properties.
.custom-theme {
--ct-light-background-color: ;
--ct-light-sticky-nav-color: ;
--ct-light-header-color: ;
--ct-light-accent-color: ;
--ct-light-link-color: ;
--ct-light-article-background: ;
--ct-light-background-image: ;
--ct-light-image-display: ;
--ct-light-image-style: ;
--ct-light-image-opacity: ;
--ct-dark-background-color: ;
--ct-dark-sticky-nav-color: ;
--ct-dark-header-color: ;
--ct-dark-accent-color: ;
--ct-dark-link-color: ;
--ct-dark-article-background: ;
--ct-dark-background-image: ;
--ct-dark-image-display: ;
--ct-dark-image-style: ;
--ct-dark-image-opacity: ;
--ct-font: ;
}
Parameters
Properties prefixed with --ct-light- apply to the light theme, and properties prefixed with --ct-dark- apply to the dark theme. The --ct-font property is shared between both themes. Any property left empty will fall back to the wiki's default.
| Property | Description | Accepted values |
|---|---|---|
--ct-light-background-color / --ct-dark-background-color |
Sets the community background color. | Any valid CSS color (e.g. #1a1a2e)
|
--ct-light-sticky-nav-color / --ct-dark-sticky-nav-color |
Sets the sticky nav background color. | Any valid CSS color |
--ct-light-header-color / --ct-dark-header-color |
Sets the community header text color. | Any valid CSS color |
--ct-light-accent-color / --ct-dark-accent-color |
Sets the accent color, used on buttons, infobox headers, and other interface elements. | Any valid CSS color |
--ct-light-link-color / --ct-dark-link-color |
Sets the color of links. | Any valid CSS color |
--ct-light-article-background / --ct-dark-article-background |
Sets the article background color. | Any valid CSS color |
--ct-light-background-image / --ct-dark-background-image |
Sets the background image. Tip: you can use a static Wikia image URL directly. | A URL string (e.g. https://static.wikia.nocookie.net/...)
|
--ct-light-image-display / --ct-dark-image-display |
Controls whether the background image covers the header area or the full screen. | header, fullscreen
|
--ct-light-image-style / --ct-dark-image-style |
Controls how the background image is displayed. | cover, tile-x, tile-y, tile-both, top-left, center, top-right
|
--ct-light-image-opacity / --ct-dark-image-opacity |
Sets the opacity of the background image. | A value between 0% and 100%
|
--ct-font |
Sets the heading font, shared across both light and dark themes. | Rubik, Work Sans, Lora, Roboto Slab, BioRhyme, Inknut Antiqua
|
Examples
The following example applies a blue theme to both light and dark modes.
.custom-theme {
--ct-light-background-color: #e8f0fe;
--ct-light-sticky-nav-color: #1a56db;
--ct-light-header-color: #ffffff;
--ct-light-accent-color: #1a56db;
--ct-light-link-color: #1a56db;
--ct-light-article-background: #ffffff;
--ct-dark-background-color: #0d1b2a;
--ct-dark-sticky-nav-color: #0a2563;
--ct-dark-header-color: #90b8f8;
--ct-dark-accent-color: #4d90fe;
--ct-dark-link-color: #4d90fe;
--ct-dark-article-background: #111c2d;
--ct-font: Rubik;
}
Changelog
| Date | Notes | Updated by |
|---|---|---|
| April 29, 2026 | First publication of the snippet. | DaBritishWaffle |
Text above can be found here (edit)