Theme

The theme property defines a set of overrides of the Workspaces portal's default look and feel.

note

The Workspaces theme has been optimized to work well with different color tones and shades. It is strongly recommended to modify only the primary color. Only use other overrides if there are contrast issues.

Attributes

For a list of supported attributes, see Reference > GlobalTheme.

Example

Theme config (src/configs/custom/index.ts)

import { ConfigGlobal } from '@transact-open-ux/workspaces/dist/types';

export const globalConfig = ({ date }: any): ConfigGlobal => ({
  ...
  theme: {
    text: {
      main: '#4A4A4A',
      light: '#6B6E71',
    },
    primary: {
      main: '#025197',
    },
    grey: {
      darkest: '#000000',
      dark: '#3B3B3B',
      primary: '#757575',
      light: '#E5E5E5',
      lightest: '#F2F2F2',
    },
    white: '#ffffff',
    black: '#000000',
    green: {
      main: '#5A9B12',
      light: '#7ED321',
    },
    red: {
      main: '#D0021B',
      light: '#FBF3F4',
    },
    blue: {
      main: '#4A90E2',
      light: '#eef3f8',
    },
    orange: '#F5A623',
  },
  ...
});

export default globalConfig;