Installation

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.

Usage

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.

For example:

<div class="tbs-background-color tbs-border-color tbs-color" style="
  border-radius: 5px;
  border-style: solid;
  border-width: 3px;
  margin: auto;
  padding: 12px;
  width: 80%;
  --tbs-light-background-color: azure;
  --tbs-light-border-color: cornflowerblue;
  --tbs-light-color: blue;
  --tbs-dark-background-color: darkblue;
  --tbs-dark-border-color: darkviolet;
  --tbs-dark-color: cornflowerblue;">
<p style="margin: 0;">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.</p>
</div>

Will result in (switch to the other theme to check the difference):

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:

<div class="tbs-background-color tbs-border-color tbs-display" style="border-width: 2px; border-style: solid; padding: 12px;">You are now viewing this webpage with the <span class="light-only">light</span><span class="dark-only">dark</span> theme of FandomDesktop skin.</div>

Will result in (switch to the other theme to check the difference):

(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.

See also

• ThemeColorClasses - Add colors by assigning certain classes to HTML elements