Skip to main content

Themes and Style

The cella frontend project use Ant Design and Styled Components for themes and styling.

Styled Components will be used for quick and clean components likes wrappers, or to add some specificities to an Ant Design component or an html tag.

You can also create new css classes in style/global.css in order to customize some specific behavior

tip

Ant Design comes with pre-defined style variables settings, configure in less. Those variables let us all freedom for configuring dark and light modes.

In order to act on a global level, go to themes, there will be 2 files:

  • dark-themes.less
  • light-themes.less
themes/dark-theme.less
@primary-color: #00adb5; // the primary color of this app
@border-radius-base: 4px; // the basic border radius
@body-background: #303030; // Background color for `<body>`

For adding and modify the behavior of the app styling, variables , you can go here to find all Ant Design Variables

After every edit of those files you will need to run this command for less to be converted to css :

yarn ltc