Customizing Themes

Front-end Framework provides a design-system with simplistic theming support, which should handle the majority of use-cases for customizing the look and feel of your application.

Overview

Front-end Framework implements its style system using CSS modules, which generates unique class names for each component that handles its own style. This means that it is not possible to override the styles of a component by targeting its class name directly.

For global styles, Front-end Framework uses CSS variables shared among all design system components. In addition, it is also possible to specify custom class names for each design system component, where you can specify your own styles.

Global CSS

For style rules that affect the whole page, please use the appropriate method for your React environment.

For Papplica applications that we provide such as Geekle, this is a Vite application, and so global CSS can be added to the core-styles.css file in the src directory.

Changing Theme Variables

Front-end Framework uses runtime CSS variables that are shared by all design system components. The application template provides a theme.variables property where overrides for these variables can be specified:

{
  ...
  theme: {
    variables: {
      ...
      '--color-primary-100': 'red',
      ...
    }
  }
}

The full list of variables that can be overridden can be found in the TSDoc for the Theme interface in the Front-end Framework package.

The theme.variables property will override these properties at app startup, but it is also possible to change these variables at runtime by manually using javascript's document.documentElement.style.setProperty method.

document.documentElement.style.setProperty('--color-primary-100', 'red');

Changing Design System component classes

For each design system component, it is possible to specify a custom class name that will be used in addition to the default class name. This can be done by specifying the theme.classes property:

{
  ...
  theme: {
    classes: {
      ...
      button: 'my-custom-button-class',
      ...
    }
  }
}

Use this when you want to apply custom styles to a design system component universally throughout the application.

Other theme configurations

theme also supports a configs property, which can be used to specify other configurations as needed for the design system. At the moment, the only supported configuration is timezone, which will configure what timezone relevant dates are displayed as in the UI.

{
  ...
  theme: {
    configs: {
      timezone: 'Asia/Tokyo'
    }
  }
}