Theme Squares

Link to article: Theme Squares.

td { vertical-align: top; }
td strong { white-space: nowrap; }
.options table.wiki-content-table td { border: none; padding: 0.7em 1em; }

.colors-container {
  width: 98%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  font-weight: 700;
  font-family: var(--title-font, Verdana), sans-serif;
  color: black;
}

.colors-container .colors, .colors-container .subcolors {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
}

.colors-container .color {
  flex-grow: 2;
  padding: 0.5rem;
  margin: 0.5rem;
  color: rgb(var(--swatch-text-dark, 0, 0, 0));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.colors-container .colors .color {
  height: 7rem;
  min-width: 4rem;
  flex-basis: calc((100% / 2) - 2rem);
}

.colors-container .subcolors .color {
  height: 4rem;
  min-width: 4rem;
  font-size: 75%;
  text-align: center;
  flex-basis: calc((100% / 6) - 2rem);
}

.colors-container .css-variable {
  font-size: 75%;
  letter-spacing: 0.1em;
  font-family: var(--body-font, Verdana), sans-serif;
}

/* Hide a colour that's not been provided by seeing if the variable starts with "{$" */
.colors-container [data-variable^=\{\$] {
  display: none;
}

.colors-container [data-has-light-text="1"] {
  color: white;
  color: rgb(var(--swatch-text-light, 255, 255, 255));
}

```
border: 1px solid #ddd; padding: 1em;
```

background-color: rgb(var({$color1-variable}));

background-color: rgb(var({$color2-variable}));

background-color: rgb(var({$color3-variable}));

background-color: rgb(var({$color4-variable}));

background-color: rgb(var({$color5-variable}));

background-color: rgb(var({$color6-variable}));

background-color: rgb(var({$subcolor1-variable}));

background-color: rgb(var({$subcolor2-variable}));

background-color: rgb(var({$subcolor3-variable}));

background-color: rgb(var({$subcolor4-variable}));

background-color: rgb(var({$subcolor5-variable}));

background-color: rgb(var({$subcolor6-variable}));

background-color: rgb(var({$subcolor7-variable}));

background-color: rgb(var({$subcolor8-variable}));

background-color: rgb(var({$subcolor9-variable}));

background-color: rgb(var({$subcolor10-variable}));

background-color: rgb(var({$subcolor11-variable}));

background-color: rgb(var({$subcolor12-variable}));

```
code
```
```
options
```
```
code
```
```
colors-container
```
```
colors
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
subcolors
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```
```
color
```
```
css-variable
```
```
css-variable
```

>[!-{$-}

[[module CSS]]
td { vertical-align: top; }
td strong { white-space: nowrap; }
.options table.wiki-content-table td { border: none; padding: 0.7em 1em; }
[[/module]]

[[div style="border: 1px solid #ddd; padding: 1em;"]]
+ What this is

A component that displays a bunch of colored squares to show off a CSS theme's flair.

Designed by [[*user Woedenaz]] and componentised by [[*user Croquembouche]].

This component is designed to be used for CSS themes, but it can be used on almost any page, if you really want.

+ Usage

On any wiki:

[[div class="code"]]
##blue|**[[include :scp-wiki:component:theme-squares -=-**##
##blue|**|**## ##green|color1-name####blue|**=**##My Favourite Colour
##blue|**|**## ##green|color1-variable####blue|**=**##@@--@@fav-color
##blue|**|**## ##green|color1-info####blue|**=**##(191, 144, 0)
##blue|**]]**##
[[/div]]

Note the "{{-=-}}" after the component name. You **//do//** need to include that -- otherwise all this text explaining how to use the component will appear on your page.

For this component, there are three parameters per color. Replace N with the number of the color.

[[div class="options"]]
|| **colorN-name** || The name of the color. Pick whatever you want! ||
|| **colorN-variable** || The name of the [https://developer.mozilla.org/en-US/docs/Web/CSS/--* CSS variable] that contains this color. _
The variable should hold three comma-separated numbers representing the RGB values of the color. This is consistent with BHL-style variables. _
If your variables hold something else (e.g. a full RGB/RGBA or hex color), you will need to override the background color of each theme square manually with CSS. ||
|| **colorN-info** || Some info about the colour. Displaying the RGB values is typical. Keep it short. _
If you don't want any text, add {{@<@@ @@>@}} instead.||
|| **//colorN-has-light-text//** _
//Optional. Default: 0// || Either 0 or 1. Determines the font color on the square. Useful to make sure there is enough contrast between the background color and the text color. _
If 1, the value of {{@@--swatch-text-light@@}} is used, or white (255, 255, 255) if it is not defined. Otherwise {{@@--swatch-text-dark@@}}, or black (0, 0, 0). Like all BHL-style CSS color variables, three numbers representing RGB values are expected. ||
[[/div]]

A color can only be used if it's exposed as a [https://developer.mozilla.org/en-US/docs/Web/CSS/--* CSS variable]. All colors in a Black Highlighter theme have a corresponding CSS variable by default, so for BHL themes, this component should work out of the box. However, sigma9 does not use CSS variables, so the only CSS variables that are available will be any that you have defined in your theme.

This component can hold a maximum of 6 primary colors and 12 secondary colors. I recommend two primary colors and no more than six secondary colors.

To add a primary color, just add the top three of the above parameters to the include, as shown in the example.

To add a secondary color, it's the same, but replace 'color' with 'subcolor'.

+ Example

Here's a longer example, taken from the Black Highlighter theme:

[[div class="code"]]
##blue|**[[include :scp-wiki:component:theme-squares -=-**##
##blue|**|**## ##green|color1-name####blue|**=**##Payne's Grey 
##blue|**|**## ##green|color1-variable####blue|**=**##@@--@@gray-monochrome
##blue|**|**## ##green|color1-info####blue|**=**##(66, 66, 72)
##blue|**|**## ##green|color1-has-light-text####blue|**=**##1
##blue|**|**## ##green|color2-name####blue|**=**##Rosewood 
##blue|**|**## ##green|color2-variable####blue|**=**##@@--@@bright-accent
##blue|**|**## ##green|color2-info####blue|**=**##(133, 0, 5)
##blue|**|**## ##green|color2-has-light-text####blue|**=**##1
##blue|**|**## ##green|subcolor1-name####blue|**=**##Alto 
##blue|**|**## ##green|subcolor1-variable####blue|**=**##@@--@@very-light-gray-monochrome
##blue|**|**## ##green|subcolor1-info####blue|**=**##(215, 215, 215)
##blue|**|**## ##green|subcolor2-name####blue|**=**##White Smoke 
##blue|**|**## ##green|subcolor2-variable####blue|**=**##@@--@@pale-gray-monochrome
##blue|**|**## ##green|subcolor2-info####blue|**=**##(244, 244, 244)
##blue|**|**## ##green|subcolor3-name####blue|**=**##Bastille 
##blue|**|**## ##green|subcolor3-variable####blue|**=**##@@--@@dark-gray-monochrome
##blue|**|**## ##green|subcolor3-info####blue|**=**##(48, 48, 52)
##blue|**|**## ##green|subcolor3-has-light-text####blue|**=**##1
##blue|**|**## ##green|subcolor4-name####blue|**=**##Buccaneer 
##blue|**|**## ##green|subcolor4-variable####blue|**=**##@@--@@medium-accent
##blue|**|**## ##green|subcolor4-info####blue|**=**##(100, 46, 44)
##blue|**|**## ##green|subcolor4-has-light-text####blue|**=**##1
##blue|**|**## ##green|subcolor5-name####blue|**=**##Maroon 
##blue|**|**## ##green|subcolor5-variable####blue|**=**##@@--@@dark-accent
##blue|**|**## ##green|subcolor5-info####blue|**=**##(100, 3, 15)
##blue|**|**## ##green|subcolor5-has-light-text####blue|**=**##1
##blue|**|**## ##green|subcolor6-name####blue|**=**##Mango Tango 
##blue|**|**## ##green|subcolor6-variable####blue|**=**##@@--@@newpage-color
##blue|**|**## ##green|subcolor6-info####blue|**=**##(221, 102, 17)
##blue|**]]**##
[[/div]]

This produces the following colored squares:

[[=]]
[[image bhl-squares.png]]
[[/=]]

+ Tweaking

You can adjust the appearance of the component with CSS.

The whole component has the {{.colors-container}} class, and any CSS that targets it should included that class to ensure that nothing else on the page is affected. Every colored square has class {{.color}}. The primary colors have a {{.colors}} parent and the secondary colors have a {{.subcolors}} parent.

You'll need to use {{!important}} to override a square's background.

For example, the [[[theme:laughter-and-knives-theme | Laughter and Knives theme]]] adds a gradient background to the 9th secondary color like so:

[[code type="css"]]
.colors-container .subcolors .color:nth-of-type(9) {
    background: var(--pastel-rainbow) !important;
}
[[/code]]

-----

[https://rossjrw.com/series-replace/?f=%5Cn&f=%5E&f=%24&f=%3C%3C%3E%3E&f=%28%3F%3C%3Dsubcolors.%2A%29%28%5B%5E%5C%5B%5C%5D%5D%2B%29%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5Ba-z-%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5B%5E%40%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D&f=%28%5B%5E%5C%5B%5C%5D%5D%2B%29%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5Ba-z-%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5B%5E%40%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D&f=%5C%7C&f=%5E%5C%5B%5C%5B%5B%5Ei%5D.%2A%7C%5E%5C%7C%5B%5E%20%5D.%2A&f=%5Cn%24&r=&r=%5B%5Binclude%20%3Ascp-wiki%3Acomponent%3Atheme-squares%20-%3D-%3C%3C%3E%3E%7C%20color%24-has-light-text%3D1%3C%3C%3E%3E%7C%20subcolor%24-has-light-text%3D1%3C%3C%3E%3E&r=%5Cn%5D%5D&r=%5Cn&r=%7C%20subcolor%24%24-name%3D%241%7C%20subcolor%24%24-variable%3D%242%7C%20subcolor%24%24-info%3D%243%7C&r=%7C%20color%24%24-name%3D%241%7C%20color%24%24-variable%3D%242%7C%20color%24%24-info%3D%243%7C&r=%5Cn%7C&r=&r= Tool to convert existing syntax to arguments for this component]

[[/div]]

[!-- --]

[[module CSS]]
.colors-container {
  width: 98%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  font-weight: 700;
  font-family: var(--title-font, Verdana), sans-serif;
  color: black;
}

.colors-container .colors, .colors-container .subcolors {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
}

.colors-container .color {
  flex-grow: 2;
  padding: 0.5rem;
  margin: 0.5rem;
  color: rgb(var(--swatch-text-dark, 0, 0, 0));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.colors-container .colors .color {
  height: 7rem;
  min-width: 4rem;
  flex-basis: calc((100% / 2) - 2rem);
}

.colors-container .subcolors .color {
  height: 4rem;
  min-width: 4rem;
  font-size: 75%;
  text-align: center;
  flex-basis: calc((100% / 6) - 2rem);
}

.colors-container .css-variable {
  font-size: 75%;
  letter-spacing: 0.1em;
  font-family: var(--body-font, Verdana), sans-serif;
}

/* Hide a colour that's not been provided by seeing if the variable starts with "{$" */
.colors-container [data-variable^=\{\$] {
  display: none;
}

.colors-container [data-has-light-text="1"] {
  color: white;
  color: rgb(var(--swatch-text-light, 255, 255, 255));
}
[[/module]]

[[div_ class="colors-container"]]

[!-- Unfortunately I can only support a limited number of colours, because each possible slot needs to be hardcoded --]
[!-- I can use the CSS variable name to reliably determine whether or not a colour has been provided, because it shouldn't contain any fancy formatting that would preclude it from being used in a CSS attribute --]
[!-- If a colour is not provided, it should not take up any space --]

[!-- Support up to six primary colours --]
[[div_ class="colors"]]

[[div_ class="color" style="background-color: rgb(var({$color1-variable}));" data-variable="{$color1-variable}" data-has-light-text="{$color1-has-light-text}"]]
{$color1-name}[[span class="css-variable"]]@@{$color1-variable}@@[[/span]][[span class="css-variable"]]{$color1-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$color2-variable}));" data-variable="{$color2-variable}" data-has-light-text="{$color2-has-light-text}"]]
{$color2-name}[[span class="css-variable"]]@@{$color2-variable}@@[[/span]][[span class="css-variable"]]{$color2-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$color3-variable}));" data-variable="{$color3-variable}" data-has-light-text="{$color3-has-light-text}"]]
{$color3-name}[[span class="css-variable"]]@@{$color3-variable}@@[[/span]][[span class="css-variable"]]{$color3-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$color4-variable}));" data-variable="{$color4-variable}" data-has-light-text="{$color4-has-light-text}"]]
{$color4-name}[[span class="css-variable"]]@@{$color4-variable}@@[[/span]][[span class="css-variable"]]{$color4-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$color5-variable}));" data-variable="{$color5-variable}" data-has-light-text="{$color5-has-light-text}"]]
{$color5-name}[[span class="css-variable"]]@@{$color5-variable}@@[[/span]][[span class="css-variable"]]{$color5-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$color6-variable}));" data-variable="{$color6-variable}" data-has-light-text="{$color6-has-light-text}"]]
{$color6-name}[[span class="css-variable"]]@@{$color6-variable}@@[[/span]][[span class="css-variable"]]{$color6-info}[[/span]]
[[/div]]

[[/div]]

[!-- Support up to twelve subcolours --]
[[div_ class="subcolors"]]

[[div_ class="color" style="background-color: rgb(var({$subcolor1-variable}));" data-variable="{$subcolor1-variable}" data-has-light-text="{$subcolor1-has-light-text}"]]
{$subcolor1-name}[[span class="css-variable"]]@@{$subcolor1-variable}@@[[/span]][[span class="css-variable"]]{$subcolor1-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor2-variable}));" data-variable="{$subcolor2-variable}" data-has-light-text="{$subcolor2-has-light-text}"]]
{$subcolor2-name}[[span class="css-variable"]]@@{$subcolor2-variable}@@[[/span]][[span class="css-variable"]]{$subcolor2-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor3-variable}));" data-variable="{$subcolor3-variable}" data-has-light-text="{$subcolor3-has-light-text}"]]
{$subcolor3-name}[[span class="css-variable"]]@@{$subcolor3-variable}@@[[/span]][[span class="css-variable"]]{$subcolor3-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor4-variable}));" data-variable="{$subcolor4-variable}" data-has-light-text="{$subcolor4-has-light-text}"]]
{$subcolor4-name}[[span class="css-variable"]]@@{$subcolor4-variable}@@[[/span]][[span class="css-variable"]]{$subcolor4-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor5-variable}));" data-variable="{$subcolor5-variable}" data-has-light-text="{$subcolor5-has-light-text}"]]
{$subcolor5-name}[[span class="css-variable"]]@@{$subcolor5-variable}@@[[/span]][[span class="css-variable"]]{$subcolor5-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor6-variable}));" data-variable="{$subcolor6-variable}" data-has-light-text="{$subcolor6-has-light-text}"]]
{$subcolor6-name}[[span class="css-variable"]]@@{$subcolor6-variable}@@[[/span]][[span class="css-variable"]]{$subcolor6-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor7-variable}));" data-variable="{$subcolor7-variable}" data-has-light-text="{$subcolor7-has-light-text}"]]
{$subcolor7-name}[[span class="css-variable"]]@@{$subcolor7-variable}@@[[/span]][[span class="css-variable"]]{$subcolor7-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor8-variable}));" data-variable="{$subcolor8-variable}" data-has-light-text="{$subcolor8-has-light-text}"]]
{$subcolor8-name}[[span class="css-variable"]]@@{$subcolor8-variable}@@[[/span]][[span class="css-variable"]]{$subcolor8-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor9-variable}));" data-variable="{$subcolor9-variable}" data-has-light-text="{$subcolor9-has-light-text}"]]
{$subcolor9-name}[[span class="css-variable"]]@@{$subcolor9-variable}@@[[/span]][[span class="css-variable"]]{$subcolor9-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor10-variable}));" data-variable="{$subcolor10-variable}" data-has-light-text="{$subcolor10-has-light-text}"]]
{$subcolor10-name}[[span class="css-variable"]]@@{$subcolor10-variable}@@[[/span]][[span class="css-variable"]]{$subcolor10-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor11-variable}));" data-variable="{$subcolor11-variable}" data-has-light-text="{$subcolor11-has-light-text}"]]
{$subcolor11-name}[[span class="css-variable"]]@@{$subcolor11-variable}@@[[/span]][[span class="css-variable"]]{$subcolor11-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor12-variable}));" data-variable="{$subcolor12-variable}" data-has-light-text="{$subcolor12-has-light-text}"]]
{$subcolor12-name}[[span class="css-variable"]]@@{$subcolor12-variable}@@[[/span]][[span class="css-variable"]]{$subcolor12-info}[[/span]]
[[/div]]

[[/div]]

[[/div]]

Theme Squares

Module Styles

Inline Styles

Includes

CSS Classes

Page Source