Fandom Developers Wiki
Advertisement

ThemeBasedStyling允许HTML元素使用行内样式针对FandomDesktop的两种主题进行适配。此外,还可以针对当前使用的主题选择性显示页面内容。

安装[]

由于此增强功能专门针对有明暗两种主题的FandomDesktop皮肤,你可以考虑往MediaWiki:FandomDesktop.css安装样式。

使用方法[]

行内样式[]

要使一个HTML元素在不同的FandomDesktop主题下使用不同的样式,你需要为元素添加tbs-*类(其中*是一个CSS属性的名字),然后向行内样式添加--tbs-light-*--tbs-dark-*。不指定这些CSS变量时,会使用默认值。

支持的样式及其默认值
支持的属性 对应类名 对应CSS变量名[ref 1] 默认值
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)
  1. Here * should be replaced with either light or dark.

例如:

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

会产生:(切换主题以查看变化)

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.

主题特定内容[]

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.

例如:

<div class="tbs-background-color tbs-border-color tbs-display" style="border-width: 2px; border-style: solid; padding: 12px;">你现在正在以FandomDesktop皮肤的<span class="light-only"></span><span class="dark-only"></span>色主题浏览此网页。</div>

会产生:(切换主题以查看变化)

你现在正在以FandomDesktop皮肤的色主题浏览此网页。

(此示例也展示了当CSS变量未指定时网页如何使用默认值)

题外话[]

这里的CSS代码可以用以下的Python脚本生成:

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}"
    )

如果你需要用其它许多的CSS属性,你可以修改这个脚本,自己生成一套新的CSS。

参阅[]

Advertisement