Theme Toggle is an extension that allows for themes with minimal flash of wrongly styled content. This is achieved by delivering the script responsible for theme loading earlier and separately from other scripts (bypassing the requirement on MediaWiki's ResourceLoader client and having to wait for other modules such as TabberNeue, skin scripts, and so on).
As of March 31st, 2023, this extension is enabled by default.
- Controls which theme switcher module is used. If
simplewhen there's two or less themes, and
- Accepted values:
- Controls whether the extension will be enabled for anonymous visitors.
- Changing this requires the HTML cache (Cloudflare level) to be purged for your wiki, as the
- Overrides the suffix used for server-side user's theme preference ID. The suffix exists because wiki.gg shares user preferences between all the wikis in the whole network, and so it is used to avoid poisoning the preference values for other wikis, and causing issues.
null, the wiki ID is used - on wiki.gg it consists of the wiki and the language, for example
- Changing this setting to a single, unique value allows for sharing the preference between your English wiki and its translations. It's recommended that you simply chop off the language code from the wiki ID: for ARK: Survival Evolved Wiki this would be
ark. However, all of those wikis should have their theme definitions and styles kept in sync (while there is currently no definition sharing implemented, the
$wgThemeToggleLoadScriptOverridevariable can be used to share the CSS).
- Warning: Previous theme preferences are not migrated when the value is changed, and registered users will lose their theme choices. Old entries are also not removed from the database.
- Overrides the ResourceLoader endpoint that will be used to load theme styles from. This may be used to share theme styles between multiple wikis by choosing a single one as the "authority" - which will act as the sole style provider.
null, defaults to the wiki's own
- Example: to have the theme CSS loaded from your English wiki, set to
/load.phpon all translations.
Themes can be defined at MediaWiki:Theme-definitions, with format resembling the Gadgets extension. Each line is a new theme definition, and must begin with an asterisk (
*), followed by an internal theme ID (which are case sensitive and must not contain any other characters than letters, numbers, hyphens or underscores), and optionally options surrounded by square brackets (empty brackets can be omitted).
Because of case sensitivity, the
dark themes are considered separate from
Dark. Only those two lower-case IDs have bundled icons and are eligible for system preference detection (if enabled).
* light[bundled] * dark
* blue[bundled|default] * red[bundled] * purple
Names to be displayed in the theme switcher, or Special:Preferences, can be set by creating a system message titled MediaWiki:Theme-ID.
||Indicates the theme CSS is already included within MediaWiki:Vector.css (or another skin's) or MediaWiki:Common.css, and no extra needs to be loaded.|
The default theme of choice should have this option set.
||Indicates this theme should be enabled by default for new users. If multiple themes have this flag set, only the first one matters. If no theme has this flag set, the first defined is assumed.|
If there is a
||Controls which user rights are needed for the theme to be shown in the switcher and user preferences.|
Styling (theme CSS)
Themes without the
bundled flag have their CSS loaded from a system message titled MediaWiki:Theme-ID.css (for example MediaWiki:Theme-dark.css). This CSS will have precedence in selectors over site CSS (Vector/Common.css).
For bundled themes, TemplateStyles, Widgets, or times when more specificity is needed in the selectors, you can leverage the
theme-ID class that is added to the
Providing icons for the double-tap switcher
There are two CSS variables that control the simple switcher's icon -
--theme-icon (a background-image value) and
--theme-icon-size (a background-size value). You can override them depending on the theme class.
auto icons are respectively OOUI's moon, sun and halfBright icons.
Monitoring theme usage
Special:ThemeUsage shows the number of registered users with each theme set as their preferred.
Users with preferences that are no longer valid (because the theme was removed from the definitions list) are shown in a separate row.
TemplateStyles permits the selector to be narrowed down by any classes on
<html> elements; therefore to target a specific theme, you have to specify the element (and the theme class) at the beginning of your selector:
Implementing a custom switcher
The extension provides a ResourceLoader module named
ext.themes.jsapi, which can be used to implement custom switchers over skin or Common.js. You can ensure it is loaded before your code is executed through
mw.loader.using (or using a gadget with a dependency), and obtain the interface with
mw.loader.require. To turn off the built-in switcher, request
$wgThemeToggleSwitcherStyle to be set to
Module exports include:
const CONFIG: SwitcherConfig
- Generated configuration object supplied by the server.
const LOCAL_PREF_NAME: string
- Name of client-side local storage key that stores current theme for anonymous users.
const REMOTE_PREF_NAME: string
- Name of the server-side user preference that stores current theme for logged-in users.
runSwitcherInitialiser( fn: () => void ): void
- Executes the function (supposed to set the switcher up) when core module loads and there is at least two themes.
whenCoreLoaded( callback: () => void, context?: any ): void
- Safe-guard function that executes the callback (bound to the context) once the
MwSkinThemeglobal becomes available.
- Call this function when your switcher initialises. It invokes
trySyncNewAccount, and may be expanded in future.
- For anonymous users only, clears local theme preferences if they point at an undefined theme.
- Synchronises local and remote preferences (local will override remote if different). This is for users who have just logged in after changing their theme when logged out.
setUserPreference( string value ): void
- Stores the preference for next visits (local for anons, remote for accounts).
[still WIP; document MwSkinTheme interface] [still WIP; need to set up JSDoc and document features milestone when implemented]
Please submit translations via the project's Weblate panel (log in with Discord).