Theme

Journey Applicants v24.10 is redeveloped to provide customizable theming options based on Material UI's Joy UI interface. Joy UI allows CSS based UI editing options that allows modifying many of the UI elements as per the needs.

How to theme Applicants portal

In order to theme your Applicant portal, create a theme file under the config/theme folder and import the file to your global configuration.

src/configs/default/themes/default.ts

export const defaultTheme = {
  colorSchemes: {
    light: {
      palette: {
        primary: {
          50: '#E3E7F1',
          100: '#BCC9E1',
          200: '#91AAD0',
          300: '#618BBE',
          400: '#3A6DAC',
          500: '#174F9A',
          600: '#154489',
          700: '#113671',
          800: '#0C2A5A',
          900: '#081D42',
        },
        background: {
          body: `linear-gradient(to bottom, var(--joy-palette-primary-600), var(--joy-palette-primary-900) 300px, var(--joy-palette-background-level1) 300px)`,
          surface: '#FFFFFF',
          level1: '#F0F3FA',
          level2: '#E3E7F1',
          backdrop: `linear-gradient(to bottom, var(--joy-palette-primary-600), var(--joy-palette-primary-900) 300px, var(--joy-palette-background-level1) 300px)`,
        },
        text: {
          primary: '#1C2234',
          secondary: '#4D576C',
          tertiary: '#7A869B',
        },
        success: {
          mainChannel: '#4CAF50',
        },
        warning: {
          mainChannel: '#F0AD4E',
        },
        common: {
          white: '#ffffff',
        },
      },
    },
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 650,
      md: 900,
      lg: 1200,
      xl: 1536,
    },
  },
  fontFamily: {
    body: '"Roboto", "Helvetica", "Arial", sans-serif',
    display: '"Roboto", "Helvetica", "Arial", sans-serif',
  },
  fontSize: {
    xl: '1.00rem',
    xl2: '1.10rem',
    xl3: '1.50rem',
    xl4: '1.75rem',
    lg: '1.00rem',
    md: '0.95rem',
    sm: '0.85rem',
    xs: '0.75rem',
  },

  fontWeight: {
    lg: 600,
    md: 500,
    sm: 300,
  },
  typography: {
    h1: {
      fontWeight: 'normal',
      color: 'var(--joy-palette-primary-600)',
      fontSize: 'var(--joy-fontSize-xl4, 2.25rem)',
    },
    h2: {
      fontWeight: 'normal',
      color: 'var(--joy-palette-primary-600)',
      fontSize: 'var(--joy-fontSize-xl3, 1.875rem)',
    },
    h3: {
      fontWeight: 'normal',
      color: 'var(--joy-palette-primary-600)',
      fontSize: 'var(--joy-fontSize-xl2, 1.5rem)',
    },
    h4: {
      fontWeight: 'normal',
      color: 'var(--joy-palette-neutral-600)',
      fontSize: 'var(--joy-fontSize-xl, 1.25rem)',
    },
    'title-md': {
      fontWeight: '500',
      color: 'var(--joy-palette-neutral-600)',
      fontSize: 'var(--joy-fontSize-sm, 1rem)',
    },
    'body-md': {
      fontWeight: '300',
      color: 'var(--joy-palette-neutral-600)',
      fontSize: 'var(--joy-fontSize-sm, 1rem)',
    },
  },
  components: {
    JoyButton: {
      styleOverrides: {
        root: {
          borderRadius: '6px',
          textTransform: 'none',
          fontWeight: 500,
          backgroundColor: 'transparent',
        },
        solid: {
          color: '#FFFFFF',
          '&:hover': {
            backgroundColor: 'color-mix(in srgb, var(--joy-palette-warning-main) 85%, black)',
          },
        },
      },
    },
    JoyTooltip: {
      styleOverrides: {
        root: {
          borderRadius: '0.375rem',
          boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
          color: '#fff',
          backgroundColor: 'var(--joy-palette-primary-600)',
        },
      },
    },
    JoyStepper: {
      styleOverrides: {
        root: {
          '--Stepper-verticalGap': '4rem',
          '--StepIndicator-size': '1.75rem',
        },
      },
    },
    JoyStepIndicator: {
      styleOverrides: {
        root: {
          'background-color': 'var(--joy-palette-success-300)',
          '--StepIndicator-size': '1.75rem',
        },
      },
    },
    JoyGrid: {
      styleOverrides: {
        root: {
          '--Grid-rowSpacingLevel2': '42px',
        },
      },
    },
    JoyTable: {
      styleOverrides: {
        root: {
          '--Table-headerUnderlineThickness': '0px',
          '--TableCell-paddingX': '0rem',
          'table-layout': 'auto',
        },
      },
    },
    // ... other component styles remain unchanged
  },
};

export default defaultTheme;

src/configs/default/global.ts

import { Config } from '@journey-ui/workspaces/build/ap/types';
import theme from './themes/default';

export const globalConfig = ({ date }: any): Config => ({
  theme,

...

});

export default globalConfig;

How to edit the theme colours

Editing the theme colours is simple using the Joy UI's theme builder interface. Once you create the theme variables using the theme builder, you can set them in your newly created theme file under the colourSchemes.

How to edit the look and feel of the UI components

It is possible to edit the look and feel of the UI components by referring to the Joy UI's themed components documentation and overriding them under the theme file.

Attributes

To review the list of supported attributes, see API Reference.