Make a theme

A theme is a .sgtheme file: JSON with an id, a name and 29 colors. SpriteGrid's own 12 are files like that too, so the quickest start is a copy of one.

1. Start from a theme you like#

In SpriteGrid, open Edit ▸ Theme and click Open Themes Folder. Every built-in theme is there. Copy the one closest to what you want and rename the copy, say to ember-night.sgtheme.

(Or download one from Every color.)

2. Name it#

Give it an id no other theme has, and the displayName Edit ▸ Theme should list it by:

{
  "id": "ember-night",
  "displayName": "Ember Night",
  ...
}

3. Change its colors#

Colors are "#RRGGBB". Keep Edit ▸ Theme open with your theme chosen: every time you save the file, SpriteGrid reloads it, so you see each change at once.

The colors that change the most:

• bgMedium: the window, behind the panels.
• bgSoft: the panels themselves.
• bgHard: sunken areas, and the canvas's surround.
• fg1 and fg4: text, and dim text.
• accent: highlights, selections, the active tool.

Every color says what each one paints. A theme is light when bgMedium is brighter than fg1, and the art's shading follows.

A color that's missing or can't be read shows as magenta, so it's easy to find.

The whole file#

This is Dracula with an orange accent:

{
  "$schema": "https://spritegrid.com/schemas/sgtheme.schema.json",
  "id": "ember-night",
  "displayName": "Ember Night",
  "bgHard": "#21222c",
  "bgMedium": "#282a36",
  "bgSoft": "#2d2f3d",
  "bg1": "#343746",
  "bg2": "#44475a",
  "bg3": "#565976",
  "bg4": "#6272a4",
  "fg0": "#f8f8f2",
  "fg1": "#f8f8f2",
  "fg2": "#e0dfd5",
  "fg3": "#bfbeb5",
  "fg4": "#969590",
  "gray": "#6272a4",
  "accent": "#ff9e64",
  "accentDark": "#e0823f",
  "red": "#ff5555",
  "green": "#50fa7b",
  "yellow": "#f1fa8c",
  "blue": "#8be9fd",
  "purple": "#bd93f9",
  "aqua": "#8be9fd",
  "orange": "#ffb86c",
  "redDark": "#cc3333",
  "greenDark": "#30d85b",
  "yellowDark": "#cfd86c",
  "blueDark": "#69c7db",
  "purpleDark": "#9d73d9",
  "aquaDark": "#69c7db",
  "orangeDark": "#dd964a"
}

The "$schema" line is for your editor: VS Code completes the color names and flags a color that isn't one. SpriteGrid ignores it.