这是什么

一个通过显示一系列彩色方块来展现 CSS 版式风格的组件。

由 Woedenaz 设计，并由 Croquembouche 整合为组件。

此组件的设计目的是为了用于 CSS 版式，但如果你想要，也可以用于几乎任何页面。

使用方法

在任意维基添加：

[[include :scp-wiki:component:theme-squares -=-
| color1-name=我最喜欢的颜色
| color1-variable=--fav-color
| color1-info=(191, 144, 0)
]]

注意组件名称后的“-=-”。你必须添加这一部分——否则所有组件使用说明文字都会出现在你的页面上。

在此组件中，每种颜色都有三个参数。请将 N 修改为颜色的编号。

colorN-name	颜色名称。随便选什么都行！
colorN-variable	包括此颜色的 CSS 变量名。变量应包含由三个逗号分隔的数字，表示颜色的 RGB 值。这会始终与BHL样式的变量一致。若你的变量包含了别的东西（比如全RGB/RGBA或十六进制色），你需要用CSS手动覆盖每个版式方块的背景色。
colorN-info	颜色的一些信息。典型的例子是显示 RGB 值。请尽量简短些。如果你不想添加任何文字，使用`@@ @@`。
*colorN-has-light-text* 可选。默认：0	允许 0 或 1。决定方块上的字体颜色。有助于确保背景颜色和文本之间有足够的对比度。如果为 1，将使用 `--swatch-text-light` 的值，若未定义该值则为白色（255, 255, 255）。否则为 `--swatch-text-dark`，或黑色（0, 0, 0）。与所有黑标系列 CSS 颜色变量一样，需要三个代表 RGB 值的数字。

只能使用公开为 CSS 变量的颜色。默认情况下，黑色标记笔主题版式中的所有颜色都有一个对应的 CSS 变量，所以对于黑标版式，这个组件应该是开箱即用的。但是，sigma9 不使用 CSS 变量，因此你必须在你的版式中先定义 CSS 变量才能使用。

此组件最多可容纳 6 个主要颜色和 12 个次要颜色。我推荐两个主要颜色和至多六个次要颜色。

要添加主要颜色，只需将上述参数中的前三个添加到 include 中，如示例所示。

要添加次要颜色，方法相同，但要将“color”替换为“subcolor”。

这里有一个很长的示例，摘自黑色标记笔主题版式：

生成的彩色方块如下所示：

你可以使用 CSS 调整组件的外观。

整个组件有 .colors-container 类（class），任何指向它的 CSS 都应该包含这个类，以确保页面上的其它内容不会受到影响。每个彩色方块都有 .color 类。主要颜色有一个 .colors 父元素，而次要颜色有一个 .subcolors 父元素。

你需要使用 !important 来覆盖方块的背景。

例如，欢笑与尖刀主题版式的第 9 个次要颜色有渐变色背景，如下所示：

.colors-container .subcolors .color:nth-of-type(9) {
    background: var(--pastel-rainbow) !important;
}

样版

页面版本: 2, 最后编辑于: 29 Nov 2020 03:10