Themes

You can create custom themes for Zipline by adding JSON files within the themes/ directory (relative to the root of Zipline).

Zipline uses Mantine for the UI components, so the theme_name.theme.json can have any properties that Mantine supports (see this for available properties and documentation). This is recommended for advanced users.

However, for most users just changing the colors are the most common use case. Below is a example of a theme file.

{
  "name": "Dark Blue",
  "colorScheme": "dark",
  "colors": {
    "blue": [
      "#FFFFFF",
      "#7C7DC2",
      "#7778C0",
      "#6C6FBC",
      "#575DB5",
      "#4D54B2",
      "#424BAE",
      "#3742AA",
      "#323EA8",
      "#2C39A6"
    ],
    "dark": [
      "#FFFFFF",
      "#293747",
      "#6C7A8D",
      "#2d3e5a",
      "#222c47",
      "#171F35",
      "#181c28",
      "#0c101c",
      "#060824",
      "#00001E"
    ]
  },
  "primaryColor": "blue",
  "mainBackgroundColor": "color-mix(in srgb, var(--mantine-color-dark-9), black 45%)"
}

Colors must be an array of 10 elements. The first element should be the lightest color, and the last element should be the darkest color. The colors are used for various parts of the dashboard.

For example the for the example theme above, the blue colors look like these:

This is the primary color of the theme. This is used for buttons and such. The value should be the key of the color in the colors object.

This is the background color behind the content.

The default themes use a css function called color-mix to make the darkest color (9th index) 45% darker. For example the below:

color-mix(in srgb, var(--mantine-color-dark-9), black 45%)

makes the dark[9] color 45% darker.

In theory any value can be used here, any valid CSS function or variables will work here.

When creating themes, you can test them out instantly by just reloading the page. The theme will be reloaded and applied so you may see the changes instantly after changing the .theme.json file.

To avoid having no theme, Zipline will always have 2 built in themes. The default theme is system which will choose either dark_gray or light_gray based on the system preference.

This is the default dark theme.

{
  "name": "Dark Gray",
  "id": "builtin:dark_gray",
  "colorScheme": "dark",
  "primaryColor": "gray",
  "mainBackgroundColor": "color-mix(in srgb, var(--mantine-color-gray-9), black 45%)"
}

This is the default light theme.

{
  "name": "Light Gray",
  "id": "builtin:light_gray",
  "colorScheme": "light",
  "primaryColor": "gray",
  "mainBackgroundColor": "color-mix(in srgb, var(--mantine-color-white), black 3%)"
}

Head to the Manage Account page, then scroll down to Dashboard Settings.

If you select "System", two more options will appear. You can select the light or dark theme to use that will be used depending on the system preference.

If you select anything other than "System", it will use the selected theme regardless of the system preference.

If using Docker, you can mount the themes/ directory to /zipline/themes/ to add custom themes.

volumes:
  - ./themes:/zipline/themes

• Zipline Discord: Feel free to ask for help regarding anything!
• Mantine Theme Object: The Mantine documentation for the theme object.
  • Mantine Colors for more information on colors.
  • Color Generator generate an array of 10 colors based on a single color.
• <color value> for more information on CSS color values.