A page displayed using light theme (above) and dark theme (below).
The choice between light and dark themes is a feature introduced with FandomDesktop, making both themes available as options for anyone browsing and participating on Fandom wikis. Admins can choose a different set of colors and images for either theme on a wiki, while users can opt to use a preferred theme across Fandom or defer to the preset theme chosen by each wiki.
In October 2022, the option to switch between light and dark themes on mobile was made available for all Fandom wikis.
How to switch themes[]
The quickest way of changing themes is by clicking the "switch theme" button located in the header shortcuts near the top-right of a wiki. The button has a moon icon if you're switching to the dark theme, or a sun icon if you're switching to the light one.
On mobile, the light/dark switch is the last level 1 item on the navigation menu. In order to see it, tap the "hamburger" button (☰), on the top right corner of the page.
If you want to make sure your experience is consistent across all Fandom wikis, it's possible to do that via your preferences. In the Appearance section of the preferences, you can select whatever you consider the most ideal experience: light, dark, or defer to a wiki's preset theme.
Choosing to defer to wiki's preset theme allows you to always see the theme intended as the main one by wiki admins without needing to switch back and forth between themes. For instance, if using this option, you should see a light theme on Wookieepedia and a dark theme on Wowpedia without having to change anything. This option is selected by default to non-logged in users, as well as users who never switched themes or changed their preferences.
Bear in mind that if you use the "switch theme" button, this will automatically change your user preferences. You will need to set them again if you had already chosen to defer to a wiki's preset.
Customization options[]
Using ThemeDesigner[]
The light and dark theme tabs, as seen in ThemeDesigner.
(Note the checkbox just under the tabs—in this example, the light theme is selected as the default one.)
Admins can customize both themes for a wiki by using the ThemeDesigner, which provides separate tabs with color and image settings specific to each theme. When switching tabs, the preview also changes to display whichever theme is being customized.
The "Header & Background" section presents the option to upload background images and switch the color of some areas. These can be separate images for each theme (useful in case the image for one theme doesn't work well with the design of another) or the same image, in which case the same image needs to be uploaded in both tabs.
The "Article Styles" section allows admins to select colors for the article background, wiki accent, and links. The article background is key in defining what the reading experience is like for the themes, with the page's text color adapting automatically to ensure are no readability issues.
Admins can mark one of the themes as the wiki's default by ticking the checkbox located immediately under the tabs. The default theme is seen by any anon users entering the page, as well as users who opt to defer to wiki preset in their preferences.
Also, note that when using the tabs, saving the changes for one theme do not apply for the other. You'll need to click "save" for each tab before exiting the ThemeDesigner.
Disparities between themes[]
A common issue admins find when switching themes to check how their wiki looks in the theme they don't commonly use is that certain areas of the wiki become unreadable.
For instance, if a template is customized for the text to appear inside of a white box, this may look good on the light theme, where the font is dark by default and contrasts with the white. On the dark theme, however, the font becomes lighter, which may cause it to either disappear or become barely readable against the white box.
To fix these and prevent similar problems, admins can use the wiki's CSS to define styles that are specific to each theme where needed, using the classes .theme-fandomdesktop-light and .theme-fandomdesktop-dark to tailor the customization to each specific theme. It's also a good practice to avoid using in-line styles where possible; that is, using style coding directly on content pages or templates instead of customizing via the wiki's CSS.
Why care about two themes?[]
Maintaining two themes and ensuring everything is readable may sound daunting, and given that one of the themes can be marked as the default one, worrying about a second one could be seen as a trivial task. However, this feature accounts for the many reasons for choosing one display over the other, such as visual impairment, being in a clear/dark environment, or just as a personal preference.
The light and dark themes are present across Fandom, which means that even in a wiki where one of the themes is never customized, it's still possible for users to visualize both themes. By paying attention to readability and adapting things so that at the very least nothing looks broken, admins make their wiki more accessible for fellow editors and readers who love the wiki. In addition to this, admins can consider thinking of clever, thematic ways of using both themes to represent the topic of the wiki (such as displaying day/night images, for instance).
If you're struggling to cater to both themes, feel free to contact Fandom and make a request for assistance.
See also[]
- An overview of Fandom's ThemeDesigner
- Details on contrast, as well as more advanced information
- Tips on how to include the color-blind at your wiki
- More details on FandomDesktop and a conversion guide
Further help and feedback[]
- Browse and search other help pages at Help:Contents
- Check Fandom Community Central for sources of further help and support
- Check Contacting Fandom for how to report any errors or unclear steps in this article