ThemeBasedStyling

ThemeBasedStyling allows inline styles of an HTML element to adapt to both FandomDesktop variations. Additionally, you can make different contents appear based on which variation is being used.
== ==
Based on the fact that this enhancement is specialized for FandomDesktop skin, which has two versions (light and dark), you can install this stylesheet in MediaWiki:FandomDesktop.css instead.
== ==
=== Inline styling ===
To make an element to use different styles according to the current FandomDesktop variation, you need to add tbs-* to its class (where * is exactly the name of the CSS attribute), then --tbs-light-* and --tbs-dark-* CSS variables to its inline style. If you don't specify the variables, their default values will be used.
Supported styles and default values	Supported styles and default values	Supported styles and default values 	Supported styles and default values
Supported Attributes 	Respective Class Name 	Respective VariablesHere * should be replaced with either light or dark.	Default Value
background-color 	tbs-background-color 	--tbs-*-background-color 	var(--theme-page-background-color--secondary)
border-bottom-color 	tbs-border-bottom-color 	--tbs-*-border-bottom-color 	var(--theme-border-color)
border-color 	tbs-border-color 	--tbs-*-border-color 	var(--theme-border-color)
border-left-color 	tbs-border-left-color 	--tbs-*-border-left-color 	var(--theme-border-color)
border-right-color 	tbs-border-right-color 	--tbs-*-border-right-color 	var(--theme-border-color)
border-top-color 	tbs-border-top-color 	--tbs-*-border-top-color 	var(--theme-border-color)
box-shadow 	tbs-box-shadow 	--tbs-*-box-shadow 	none
caret-color 	tbs-caret-color 	--tbs-*-caret-color 	var(--theme-page-text-color)
color 	tbs-color 	--tbs-*-color 	var(--theme-page-text-color)
column-rule-color 	tbs-column-rule-color 	--tbs-*-column-rule-color 	var(--theme-border-color)
outline-color 	tbs-outline-color 	--tbs-*-outline-color 	var(--theme-border-color)
text-decoration-color 	tbs-text-decoration-color 	--tbs-*-text-decoration-color 	var(--theme-page-text-color)
 	 	 	
For example:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Will result in (switch to the other theme to check the difference):
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
=== Theme-based content ===
In elements with tbs-display class, you can decide which contents can be displayed based on the current theme using classes light-only and dark-only.
For example:
Will result in (switch to the other theme to check the difference):
You are now viewing this webpage with the lightdark theme of FandomDesktop skin.
(The example above also demonstrates how default CSS values are used when the variables are unassigned)
== Digression ==
The CSS codes can be generated by running the following Python script:
attributes = (
 ( "background-color", "page-background-color--secondary"),
 ( "border-bottom-color", "border-color"),
 ( "border-color", "border-color"),
 ( "border-left-color", "border-color"),
 ( "border-right-color", "border-color"),
 ( "border-top-color", "border-color"),
 ( "box-shadow", None),
 ( "caret-color", "page-text-color"),
 ( "color", "page-text-color"),
 ( "column-rule-color", "border-color"),
 ( "outline-color", "border-color"),
 ( "text-decoration-color", "page-text-color")
)
with open("ThemeBasedStyling.css", "w") as fout:
 for attr in attributes:
 for theme in ("light", "dark"):
 fout.write(
 ".theme-fandomdesktop-{0} .tbs-{1} {2}\n"
 "\t--tbs-{0}-{1}: {4};\n"
 "\t{1}: var(--tbs-{0}-{1});\n{3}\n".format(
 theme, attr[0], "{", "}",
 f"var(--theme-{attr[1]})" if attr[1] else "none"
 )
 )
 fout.write(
 ".theme-fandomdesktop-dark .tbs-display .light-only,\n"
 ".theme-fandomdesktop-light .tbs-display .dark-only {\n"
 "\tdisplay: none;\n}"
 )
If you want much more attributes allowed to adapt to different themes, you can edit this Python script and generate a new set of CSS.
== ==
* ThemeColorClasses - Add colors by assigning certain classes to HTML elements