UI Themes

Learn how to configure the default theme of your application.

By default, the Devias Kit Pro come with a light and a dark theme, and we provide a toggle to let users switch between them.

Devias Kit Pro uses Material UI for styling and basic UI components. Material UI is an open-source React component library that implements MUI's own in-house design principles.

It includes foundational pre-built components that look beautiful by default, and give you plenty of room to customize their look and feel.

Advantages of Material UI

  • Ship faster: has pre-built components with a sleek and carefully designed look and feel.
  • Extensive customization options: you can customize each and every tiny piece of Material UI's components to match your own unique design.
  • Accessibility in mind: supports many accessibility features out of the box, making components screen reader-friendly.

Changing the default theme

To change the default theme, you need to update the theme in your src/styles/theme.ts file.

This file consists of palette colors, components overrides, typography, shadows and other theme specific utilities, such as spacing, radius, etc.

Follow the official guidelines of Material UI.