Template:If dark: Difference between revisions
Template page
More actions
Created page with "<templatestyles src="If dark/styles.css" /><{{{tag|{{{Tag|span}}}}}} class="ifdark"><{{{tag|{{{Tag|span}}}}}} class="nodark">{{{2|{{{light|Light mode}}}}}}</{{{tag|{{{Tag|span}}}}}}><{{{tag|{{{Tag|span}}}}}} class="dark">{{{1|{{{dark|Dark mode}}}}}}</{{{tag|{{{Tag|span}}}}}}></{{{tag|{{{Tag|span}}}}}}><noinclude> {{Documentation}} </noinclude>" |
No edit summary |
||
| Line 1: | Line 1: | ||
<templatestyles src="If dark/styles.css" /><{{{tag|{{{Tag|span}}}}}} class="ifdark"><{{{tag|{{{Tag|span}}}}}} class="nodark">{{{2|{{{light|Light mode}}}}}}</{{{tag|{{{Tag|span}}}}}}><{{{tag|{{{Tag|span}}}}}} class="dark">{{{1|{{{dark|Dark mode}}}}}}</{{{tag|{{{Tag|span}}}}}}></{{{tag|{{{Tag|span}}}}}}><noinclude> | <templatestyles src="Template:If dark/styles.css" /><{{{tag|{{{Tag|span}}}}}} class="ifdark"><{{{tag|{{{Tag|span}}}}}} class="nodark">{{{2|{{{light|Light mode}}}}}}</{{{tag|{{{Tag|span}}}}}}><{{{tag|{{{Tag|span}}}}}} class="dark">{{{1|{{{dark|Dark mode}}}}}}</{{{tag|{{{Tag|span}}}}}}></{{{tag|{{{Tag|span}}}}}}><noinclude> | ||
{{Documentation}} | {{Documentation}} | ||
</noinclude> | </noinclude> | ||
Latest revision as of 00:01, 16 March 2025
Light modeDark mode
 | This template uses TemplateStyles: |
This template detects whether it is being used with dark mode, and displays different content accordingly. This should however NOT be relied upon. For instance: It may not work with the dark mode gadget. You can use the background-image property with a URL inside TemplateStyles with different versions for dark mode and light mode instead.
Rationale
Some images and text need to be different depending on the mode selected by the user. This template provides an easy way to do that.
Usage
{{If dark|content for dark mode|content for light mode}}
By default, <span>...</span> tags are used to wrap the specified content. A different tag may be specified using |tag=
- E.g.
|tag=divcan be used if the content contains block-level elements.
Notes
- This template will only work with Wikipedia's official dark theme. It will not work with browser extensions such as Dark Reader or the dark mode gadget, due to relying on the
<html>tag having the.skin-theme-clientpref-nightclass.
- This template does not actually switch the content between the light and dark mode; it simply outputs both, and hides the content for the opposite theme using CSS.
Example
Normal usage
{{If dark|You are using dark mode!|You are using light mode!}} yields:
| Light mode | Dark mode |
|---|---|
| You are using light mode!You are using dark mode! | You are using light mode!You are using dark mode! |