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

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