This script/stylesheet is for PERSONAL use only!
You are free to install this script/stylesheet for yourself, but it is not allowed to be used wiki-wide (e.g., in MediaWiki:ImportJS, MediaWiki:Common.js, MediaWiki:Common.css, MediaWiki:Fandomdesktop.js, MediaWiki:Fandomdesktop.css, or MediaWiki:FandomMobile.css), as it would violate Fandom's Terms of Use.
(See the customization policy)
ThemeSelector allows users to switch between FandomDesktop's light and dark themes without reloading the page and setting their preferred theme. An alternative to ThemeToggler, this script offers a different interface as well as some additional features. Rather than simply toggling between themes, users may apply their preferred theme or the wiki's preset theme. Saving a new preference saves the current theme without switching themes and can be set to "wiki preset". This script also offers use of the URL query parameter usetheme for selecting which theme is applied.
Installation
Configuration
The configuration options for this script allow individuals to choose which interface to use. The options are properties of the script's configuration object which can be created in a user's personal JS with the following lines of code above the script import.
window.ThemeSelector = window.ThemeSelector || {};
To set a particular option, place a line of code between the script's configuration object and the script import. It should follow the following format where property is replaced by the option name as listed in the table below and value is replaced by the desired value.
window.ThemeSelector.property = value;
This example sets hideBuiltIn to true. This will cause the script to hide Fandom's built-in theme toggle button.
window.ThemeSelector.hideBuiltIn = true;
| Option Name | Data Type | Default Value |
|---|---|---|
| Description | ||
useDropdown |
boolean | false
|
This option controls which interface the user sees. If set to true, the user will see a dropdown menu with the theme options. Otherwise, the user will see a row of 4 buttons; one for each theme option. In either case, there will be a button to save the current theme as the user's new preference.
| ||
addSticky |
boolean | false
|
This option controls whether or not the interface is also added to the sticky local navigation that users see when the page is scrolled. If set to true, the interface will be added to the sticky local navigation in addition to the fixed navigation above the page header. Otherwise, the interface will be added to only the fixed navigation above the page header.
| ||
insertAfter |
boolean | false
|
This option controls whether or not the interface is inserted before or after the built-in buttons. If set to true, the interface will be inserted after the built-in buttons and thus shift the position of the built-in buttons. Otherwise, the interface will be inserted before the built-in buttons and thus maintain the position of the built-in buttons.
| ||
siteWide |
boolean | false
|
This option controls whether or not the graphical interface is inserted. If set to true, neither the buttons nor the dropdown will be inserted. Users can still select which theme to use by using the URL query parameter. This is a good option for users who do not want to add things to the standard page layout but still desire a way to change themes without changing their preference.
| ||
hideBuiltIn |
boolean | false
|
This option controls whether or not Fandom's theme toggle button is displayed. If set to true, Fandom's button will be hidden.
| ||
defaultTheme |
string | 'user'
|
This option allows users to set a theme that the script will automatically change to as soon as it runs. This effectively allows users to set separate preferred themes for each wiki if desired. Valid values are 'light', 'dark', 'wiki' (for using the wiki's preset theme), and 'user' (for using the user's global preferred theme). If the value is not one of these four, it is treated as 'user'. There is no real point in explicitly setting the value to 'user' since that is what the wiki initially loads anyways. Please note that this script does not change the initially loaded theme. As such, users may temporarily see the other theme until this script completes execution.
| ||
Usage
In addition to the graphical interface, this script offers the URL query parameter usetheme. This parameter behaves similar to the defaultTheme configuration option but is separate for each page load. Users who choose to avoid inserting either graphical interface can still use this to change the theme.
Dependencies
This script handles the import of dependencies on its own. Users should not need to import any other scripts in order for this script to function properly.