Theming

All colors used in pixie interface can be overwritten either fully or partially via configuration.

Use isDark option to specify whether your theme is dark or light.

Partial Override

You can override only specific colors, primary one for example. Any colors you did not override manually will fallback to default values.

var pixie = new Pixie({
  ui: {
    activeTheme: "My Custom Theme",
    themes: [
      {
        name: "My Custom Theme",
        colors: {
          "--be-primary": "#3b82f6",
          "--be-primary-light": "#bfdbfe",
          "--be-primary-dark": "#2563eb",
        },
      },
    ],
  },
});

Full override

This is a list of all available colors and their default values for full override:

var pixie = new Pixie({
  ui: {
    themes: [
      {
        name: "My Custom Theme",
        isDark: false,
        colors: {
          "--be-foreground-base": "0 0 0",
          "--be-primary-light": "191 219 254",
          "--be-primary": "59 130 246",
          "--be-primary-dark": "37 99 235",
          "--be-on-primary": "255 255 255",
          "--be-error": "179 38 30",
          "--be-on-error": "255 255 255",
          "--be-background": "255 255 255",
          "--be-background-alt": "250 250 250",
          "--be-paper": "255 255 255",
        },
      },
    ],
  },
});

Color values can be specified either as 3 rgb digits separated by space, hex (#2563eb), rgb(37, 99, 235) or HSL(221, 83%, 53%)

Multiple Themes

You can add multiple themes and select active one using: pixie.setConfig({ui: {activeTheme: 'My Custom Theme #2'}})

var pixie = new Pixie({
  ui: {
    themes: [
      { name: "My Custom Theme #1", colors: { "--be-primary": "#3F51B5" } },
      {
        name: "My Custom Theme #2",
        is_dark: true,
        colors: { "--be-primary": "#262626" },
      },
    ],
  },
});