Theming

Predefined styles is default, dark, modern, web.
Uncomment necessary filename.

Copy
// import theme from './default';
import theme from './dark';
// import theme from './modern';
// import theme from './web';

Theme variables

Change colors, fonts, hover, sizes ...

Copy
const theme = {
  colors: {
    primary: '#2d8fea',
    primaryHover: '#2880d2',
    error: '#ed4956',
    title: '#444444',
  },
  input: {
    textColor: '#333333',
    borderColor: '#cccccc',
    backgroundColor: '#fafafa',
    padding: '8px 12px',
    borderRadius: '4px',
    fontSize: '16px',
    borderWidth: '1px',
    label: {
      margin: '0 0 0.4rem 0',
      fontSize: '12px',
      color: 'rgba(0, 0, 0, 0.5)',
    },
    wrapper: {
      margin: '0 0 1.1rem 0',
    }
  },
  button: {
    borderColor: '#cccccc',
    padding: '8px 24px',
    borderRadius: '4px',
    fontSize: '16px',
  },
  messages: {
    position: 'absolute',
    align: 'left',
    margin: '2px 0',
  },
  logo: {
    textColor: 'rgba(255, 255, 255, 1)',
  },
  footer: {
    textColor: 'rgba(255, 255, 255, 0.6)'
  },
  content: {
    borderRadius: '4px',
    fontFamily: '"Segoe UI", Roboto, Helvetica, Arial, sans-serif',
    backgroundColor: '#ffffff',
  },
  loader: {
    overlay: {
      backgroundColor: '#ffffff',
    },
    borderColor: '#cccccc',
    opacity: 0.8,
  },
  overlay: {
    backgroundColor: 'rgba(0, 0, 0, 0.85)',
    opacity: 1,
  },
  layout: {
    backgroundImage: null,
    backgroundPosition: 'right center',
  },
}
export default theme;