Color Management

The Material Design colour system helps you apply colour to your UI in a meaningful way. In this system, you select a primary and a secondary colour to represent your brand. Dark and light variants of each colour can then be applied to your UI in different ways.

You can edit this file at [src/themes/pallete]

// light mode

common: { black: '#232b38' }

primary: {
    lighter: '#cbe2ff',
    light: '#4f8ef5',
    main: '#3366ff',
    dark: '#0043a9',
    darker: '#002d75',
    100: '#4c6fff'
},

secondary: {
    lighter: '#d3d8db',
    light: '#727b80',
    main: '#5d646e',
    dark: '#272f33',
    darker: '#161a1c'
},

error: {
    lighter: '#fde4e2',
    light: '#ff625b',
    main: '#ec4333',
    dark: '#a20e00',
    darker: '#750800'
},

warning: {
    lighter: '#fef3d4',
    light: '#f8c256',
    main: '#f4a100',
    dark: '#aa7000',
    darker: '#754c00'
},

info: {
    lighter: '#d4f7f8',
    light: '#4de3e8',
    main: '#00cfd5',
    dark: '#009095',
    darker: '#005f63'
},

success: {
    lighter: '#d4f2e4',
    light: '#4fd29e',
    main: '#00ac69',
    dark: '#007849',
    darker: '#004e2e'
},

grey: { 300: '#425466' },

bg: { 100: '#f8f8f9' },

text: {
    primary: '#242c3a',
    secondary: '#a1a1a1',
    dark: '#12171e'
},

divider: '#dcdcdc',

background: {
    paper: '#ffffff',
    default: '#f0f2f8'
},

menu: {
    hover: '#cbe2ff',
    selected: '#3366ff'
}

// dark mode

common: { black: '#232b38' },

primary: {
  lighter: '#002d75',
  light: '#0043a9',
  main: '#3366ff',
  dark: '#4f8ef5',
  darker: '#cbe2ff',
  100: '#4c6fff'
},

secondary: {
  lighter: '#161a1c',
  light: '#272f33',
  main: '#5d646e',
  dark: '#727b80',
  darker: '#d3d8db'
},

error: {
  lighter: '#750800',
  light: '#a20e00',
  main: '#ec4333',
  dark: '#ff625b',
  darker: '#fde4e2'
},

warning: {
  lighter: '#754c00',
  light: '#aa7000',
  main: '#f4a100',
  dark: '#f8c256',
  darker: '#fef3d4'
},

info: {
  lighter: '#005f63',
  light: '#009095',
  main: '#00cfd5',
  dark: '#4de3e8',
  darker: '#d4f7f8'
},

success: {
  lighter: '#004e2e',
  light: '#007849',
  main: '#00ac69',
  dark: '#4fd29e',
  darker: '#d4f2e4'
},

grey: { 300: '#425466' },

bg: { 100: '#f8f8f9' },

text: {
  primary: '#bbc0c7',
  secondary: '#a1a1a1',
  dark: '#fff'
},

divider: '#3e4550',

background: {
  paper: '#232b38',
  default: '#181e2b'
},

menu: {
  hover: '#0043a9',
  selected: '#e3f2fd'
}