Customization

To customize the design system, you can follow the steps below.

If you need to see all the tokens values, you can follow the Tokens section guide.

Tokens values

In your globals.css file, you can modify the token values. For example:

globals.css


:root {
--color-background: #12161e;
--color-foreground: #ffffff;
--color-ring: #212631;
--color-input: #181d25;
--color-border: #181d25;
...
}

Partner colors

To change the main colors for partners in your application, create a ThemeColors.jsx file in your project and add the following code:

ThemeColors.jsx


 
export async function ThemeColors({ colors }: ThemeColorsProps) {
let styleContent: string | undefined;
 
if (colors) {
  styleContent = `
    :root {
      --color-primary: ${colors["--primary-100"]};
      --color-primary-darken-1: ${colors["--primary-black"]};
      --color-primary-darken-2: ${colors["--primary-black"]};
      --color-primary-80: ${colors["--primary-90"]};
      --color-primary-48: ${colors["--primary-70"]};
      --color-primary-24: ${colors["--primary-50"]};
      --color-primary-16: ${colors["--primary-30"]};
      --color-primary-8: ${colors["--primary-20"]};
      --color-primary-4: ${colors["--primary-10"]};
      --color-secondary: ${colors["--secondary-100"]};
      --color-secondary-darken-1: ${colors["--secondary-black"]};
      --color-secondary-darken-2: ${colors["--secondary-black"]};
      --color-secondary-80: ${colors["--secondary-90"]};
      --color-secondary-48: ${colors["--secondary-70"]};
      --color-secondary-24: ${colors["--secondary-50"]};
      --color-secondary-16: ${colors["--secondary-30"]};
      --color-secondary-8: ${colors["--secondary-20"]};
      --color-secondary-4: ${colors["--secondary-10"]};
    }
  `;
}
 
if (!styleContent) return null;
 
return <style dangerouslySetInnerHTML={{ __html: styleContent }} />;
}