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

Note:
Use is_dark option to specify whether your theme is dark or light.

Partial Override

To override only main colors simply specify the colors you want to override:

var pixie = new Pixie({
    ui: {
     themes: [
         {
             name: 'My Custom Theme',
             colors: {
                 '--be-primary-default': '#3F51B5',
                 '--be-accent-default': '#8BC34A',
                 '--be-accent-lighter': '#AED581',
             }
          }
     ],
    }
});

Full override

This is a list of all available colors for full customization:

var pixie = new Pixie({
    ui: {
     themes: [
         {
             name: 'My Custom Theme',
             is_dark: true,
             colors: {
                 '--be-primary-lighter': '#2a2a2a',
                 '--be-primary-default': '#262626',
                 '--be-primary-darker': '#181c26',
                 '--be-accent-default': '#8AB2E0',
                 '--be-accent-lighter': '#B9D1EC',
                 '--be-accent-contrast': 'rgba(255, 255, 255, 1)',
                 '--be-accent-emphasis': 'rgba(185, 209, 236, 0.1)',
                 '--be-foreground-base': '#fff',
                 '--be-text': '#fff',
                 '--be-hint-text': 'rgba(255, 255, 255, 0.5)',
                 '--be-secondary-text': 'rgba(255, 255, 255, 0.7)',
                 '--be-label': 'rgba(255, 255, 255, 0.7)',
                 '--be-background': '#1D1D1D',
                 '--be-background-alternative': '#121212',
                 '--be-divider-lighter': 'rgba(255, 255, 255, 0.07)',
                 '--be-divider-default': 'rgba(255, 255, 255, 0.12)',
                 '--be-disabled-button-text': 'rgba(255, 255, 255, 0.3)',
                 '--be-disabled-toggle': '#000',
                 '--be-chip': '#616161',
                 '--be-hover': 'rgba(255, 255, 255, 0.04)',
                 '--be-selected-button': '#212121',
                 '--be-disabled-button': 'rgba(255, 255, 255, 0.12)',
                 '--be-raised-button': '#424242',
                 '--be-backdrop': '#BDBDBD',
                 '--be-link': '#c5cae9',
             }
          }
     ],
    }
});

Multiple Themes

You can register multiple themes and select active one using: pixie.getTool('themes').select('dark');

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