Themes

Themes change the look and feel of the Overseer interface. A theme is a CSS file that sets :root custom properties, packaged in a plugin.

Creating a theme

You can create a theme by creating a definition in the plugin manifest.json file.

Example:

{
  // [...]
  "themes": [
    {
      "id": "my-theme",
      "label": "My theme",
      "src": { "$ref": "themes/my-theme/main.css" }
    }
  ]
}

You can refererence any valid .css file, it is not required to follow the conventional directory structure.

Theme definition

A theme is defined by a .css file.

Reference

You can override any of the variables below. Feel free to copy and paste the contents of the file below to create your own base theme.

:root {
  --color-base: #1a1a2e;
  --color-base-accent: #2d2d44;
  --color-base-highlight: #0f0f1a;
  --color-base-content: #e0e0e0;

  --color-primary: #16213e;
  --color-primary-accent: #1a3a5c;
  --color-primary-highlight: #0a1628;
  --color-primary-content: #ffffff;

  --color-secondary: #1a1a2e;
  --color-secondary-accent: #2d2d44;
  --color-secondary-highlight: #0f0f1a;
  --color-secondary-content: #c0c0c0;

  --color-background: #0f0f1a;
  --color-foreground: #1a1a2e;
  --color-content: #e0e0e0;

  --color-logo: #09090b;
  --color-logo-outline: #ffffff;
}

Logo tokens

--color-logo and --color-logo-outline are the two colors of the hooded figure and the outline around it. They default to black on white in every theme but you are encouraged to override the colors depending on your theme. When overriding the colors, please follow the rules of the Overseer figure.

--color-logo is the fill of the figure and should be dark. The space behind the eye of the figure is inside the hood and must resemble a dark color.
--color-logo-outline is the outline of the figure and should be light. It helps the dark color of the figure standout against any color.

Additional fields

You are not limited to overriding colors, there are many variables to override. See below for additional variables you can customize.

:root {
  --gap-xs: 0.1rem;
  --gap-sm: 0.35rem;
  --gap-md: 0.6rem;
  --gap-lg: 1rem;
  --gap-xl: 1.725rem;

  --text-xxs: 0.7rem;

  --padding-xs: 0.2rem;
  --padding-sm: 0.375rem;
  --padding-md: 0.6rem;
  --padding-lg: 1rem;
  --padding-xl: 1.725rem;

  --margin-xs: 0.2rem;
  --margin-sm: 0.375rem;
  --margin-md: 0.6rem;
  --margin-lg: 1rem;
  --margin-xl: 1.725rem;

  --color-error: var(--color-red-600);
  --color-danger: var(--color-red-600);
  --color-danger-content: var(--color-white);
  --color-warning: var(--color-yellow-200);
  --color-warning-content: var(--color-yellow-900);
  --color-success: var(--color-green-200);
  --color-success-content: var(--color-green-900);
}