Theme Color Editor

From Support Wiki
Jump to navigation Jump to search

The Theme Color Editor (TCE) is a tool for customizing wiki color themes. Whether tweaking an existing theme or designing a new look, this tool allows to do this interactively while also providing some support to streamline the process. The tool needs a specific color variable list, which is available on most newer wikis or any wiki based on the default loadout wiki.

Features

  • Live preview for real-time color adjustments
  • Indirect color definitions for efficient modifications
  • Import and export color themes

Quick guide

Getting started

  1. Navigate to the page with the color variable list, usually located at MediaWiki:Common.css .
  2. The TCE toolbar should be visible at the bottom right.
    • If not make sure you're on the correct page with the color variable table and also have the needed privileges interface administrator

Using TCE

Toolbar
Toolbar
  1. Set the base theme
    • In the themes toolbar section, choose view-light or view-dark, depending on your starting point.
  2. Load or rebase a theme
    • If modifying an existing theme, select it from the dropdown and click load theme variables.
    • If creating a new theme, click rebase variables to set the base of the new theme (view-light or view-dark).
  3. Adjust the colors
    • Click on a variable name or its color box to open the color picker.
  4. Preview changes
    • Use the contrast checkers on the right column.
    • Use the Live Preview at the bottom right to see how the theme looks on wiki pages.
  5. Save and apply
    • Export the CSS using the import/export css section and copy it to e.g. MediaWiki:Common.css .
    • Remember to give the theme its proper definition name and add it to the wiki, see theming manual for details.

Detailed Manual

Explicit Color Editing

Color picker
Color picker
  • Click a variable name or color box in the table to open the color picker.
  • Adjust colors using color channel sliders or enter a hex code directly.
  • The visibility of the HSV, HSL, and RGB sliders can be toggled with the according buttons (the hue slider will always be visible).
  • Changes apply instantly to the TCE preview and any open Live Preview popups of other wiki pages.

Indirect Color Definitions

Simple link

Colors can be defined indirectly by other variables so they adjust dependent on other colors. A simple example would be to link the variable --wiki-content-link-color--visited to --wiki-content-link-color to have the color of visited links always like the color of default links.

Enable the use indirect defition checkbox and enter the variable name in the text box, wrapped in var(…), in this example var(--wiki-content-link-color).

Complex definitions

In general, the text box for the indirect definition works with any valid css definitions, e.g. to get a mix of variables use something like color-mix(in srgb,var(--wiki-content-background-color),var(--wiki-content-text-color) 62%).

Explicit color output

indirect variable definition
Indirect variable definition: the lower variable will always adjust to the same color as the upper color but with an increased lightness

An indirectly defined variable can be saved as explicit color in the final css style (i.e. the css code will contain the explicit hex color definition, e.g. something like #f9a). This allows further color adjustments while still have the advantage of an indirect definition. A variable can be set to the color of another variable, and then inverted, hue-rotated or the saturation or lightness changed. For example this can be used to have the hover color of a button to be automatically slightly lighter than the base button color. When adjusting the base color of the button, the hover color automatically adjusts accordingly.

Copy & paste

Colors can be copied and pasted.

  • In its simplest way click the copy button in one variable then the paste value on another variable to set the explicit color to the color of the first variable.
  • To create a simple reference (i.e. a live copy) the paste ref (paste reference) button can be used. Once the initial color is changed, the other variable will be updated to the same color.
  • The paste ref rel (paste reference relative) button will link the variable to the first one while preserving the initial color (using relative hue-rotate, saturation-factor and lightness-factor). Once the first variable is adjusted, the second variable will follow accordingly. E.g. if the first color is dark red and the second color is light orange (i.e. lighter and the hue shifted a bit) and the first color is changed to dark blue, the second color will become light violett (i.e. the relative lightness and hue shift will be preserved).

Contrast fix, reset, suggestion

Contrast auto fix

If a color fails contrast checks, click the fix-contrast button (icon of a circle with half white, half black) to set the lightness of that color so all contrasts checks are valid. This is not always possible, the best possible value will be set.

Reset

If the color has been changed from the base style (i.e. view-light or view-dark), a reset button (icon of a counter-clock-wise circle arrow) is shown, pressing it will reset the color to the base value (this can be an explicit color or an indirect definition).

Suggestion

Some variables have suggestions, e.g. the variable --wiki-body-dynamic-color is recommended to be black on light themes. If a suggestion is available, a button with a diamond icon is shown to set the suggestion.

Contrast checker

contrast checker
The contrast of the --wiki-content-text-color is slightly too low, the redlink-color has worse contrast.

On the right column of the variable table other variables are listed that need a specific contrast to the row variable. The according contrast is displayed as ratio, by default the contrast ratio should be at least 4.5 : 1[1]. Each listed contrast variable can also be checked visually for a sufficient contrast. The color of the contrast variables can be edited directly by clicking on it, there's also a reset button for each contrast variable.

Toolbar Features

Global Color Adjustments

In global color tools options to adjust all explicitly defined color variables are available. E.g. the lightness can be inverted, useful for converting light themes to dark and vice versa.

Themes

The themes box contains the light/dark toggle option for the current theme. It also allows to load the variable values of an existing theme. The rebase button allows changing the base of the current theme (i.e. light or dark). This has an effect of the amount of exported variables, since only variables that differ from the base definition are exported.

Import/export css

This box is used to import or export the theme style in css code. Once a theme is finished, the code can be exported with the input output view or directly copied to the clipboard. A theme should be exported before closing the page, the TCE cannot save themes on its own. To import a theme, open the input output view, paste the css code, then import the theme based on a light or dark view.

To export a theme for further editing or as a base for other themes, enable the checkbox include explicit adjustments. This will include the advanced color adjustments, useful for faster theme creation.

Live preview

The live preview allows a preview of the color adjustments on other wiki pages. Enter the name of a page and hit enter or the preview popup button. The wiki page name can be a direct page like Wood or something like a diffpage like Wood?diff=prev&oldid=123.

  1. ↑ Web Content Accessibility Guidelines for contrast
Retrieved from "https://support.wiki.gg/wiki/Theme_Color_Editor?oldid=8976"