Custom styling

Introduction

You can customize the design of ROQ’s UI components to improve the fit to the look&feel of your application. There are two approaches: You can overwrite the CSS directly or inject an entirely new theme.

Custom CSS

You can overwrite the component styles by creating a CSS file and importing it after the default CSS file of ROQ ( import "@roq/ui-react/dist/index.css";)

Example file “my.css”:

:root {
  --roq-color-primary: red;
  --roq-color-secondary: blue;
}
 
.roq-notification-card {
  background: red;
}

In case you want to adjust the dark mode colors, then you can use the rc-dark class prefix like this:

:root {
  --roq-color-text: black;
}
 
:root.rc-dark {
  --roq-color-text: white;
}

Theming

ROQ’s UI components ship with a “light” and a “dark” theme. You can implement your theme and inject it into <RoqProvider/> like this:

  import { createCustomTheme } from "@roq/ui-react";
 
  const myCustomTheme = createCustomTheme({
    name: "MyTheme",
    base: {
      white: "#ffffff",
      black: "#000000",
      primary: "#264653",
      secondary: "#E9C46A",
      green: "#68E879",
      red: "#E86868",
      background: "#FAEDCD",
      card: "#1f2b48",
      border: "#F4A261",
      text: "#274254",
      separator: "#E76F51",
    },
  });
 
  <RoqProvider customTheme={myCustomTheme}>
    <Component />
  </RoqProvider>