Color Schemes

Add a Custom Color Scheme

You can define your own color palette by passing an array of custom schemes to the ThemeProvider using the customSchemes prop:

"use client";
import { ThemeProvider } from "boreal-ui";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider customSchemes={[{
      name: "Cyberpunk Pulse",
      primaryColor: "#792348ff",
      secondaryColor: "#8338ec",
      tertiaryColor: "#3a0ca3",
      quaternaryColor: "#fb5607",
      backgroundColor: "#000000ff",
    }]}>
      {children}
    </ThemeProvider>
  );
}

Then, set this scheme as the default using the setBorealStyleConfig API:

setBorealStyleConfig({
  defaultColorSchemeName: "Cyberpunk Pulse",
});