Theming

Robindoc also provides color customization options. Themes are based on CSS variables.

The main and highly recommended way to change theme colors is to pass them to RobinProvider.

TypeScript

JavaScript

import { RobinProvider } from "robindoc";

const RootLayout: React.FC<React.PropsWithChildren> = ({ children }) => (
  <html lang="en" suppressHydrationWarning>
    <body>
      <RobinProvider
        theme={{
          colors: {
            primary: {
              50: "#f0f9ff",
              100: "#cffafe",
              200: "#a5f3fc",
              300: "#67e8f9",
              400: "#22d3ee",
              500: "#06b6d4",
              600: "#0891b2",
              700: "#0e7490",
              800: "#155e75",
              900: "#164e63",
              950: "#083344",
            },
          },
        }}
      >
        {/* ... */}
      </RobinProvider>
    </body>
  </html>
);

export default RootLayout;

import { RobinProvider } from "robindoc";

const RootLayout = ({ children }) => (
  <html lang="en" suppressHydrationWarning>
    <body>
      <RobinProvider
        theme={{
          colors: {
            primary: {
              50: "#f0f9ff",
              100: "#cffafe",
              200: "#a5f3fc",
              300: "#67e8f9",
              400: "#22d3ee",
              500: "#06b6d4",
              600: "#0891b2",
              700: "#0e7490",
              800: "#155e75",
              900: "#164e63",
              950: "#083344",
            },
          },
        }}
      >
        {/* ... */}
      </RobinProvider>
    </body>
  </html>
);

export default RootLayout;

The provider will create a style tag with all the overwritten variables.

Tip
If you change the CSS variables manually - Robindoc does not guarantee that they will work in future releases, although those passed to the RobinProvider will be supported for a while!

You can pass hex, rgb, css variables or any other color format.

TypeScript

JavaScript

import { type Theme } from "robindoc/lib/core/types/theme";

export const robinTheme: Theme = {
  colors: {
    primary: {
      50: "var(--cl-cyan-50)",
      100: "var(--cl-cyan-100)",
      200: "var(--cl-cyan-200)",
      300: "var(--cl-cyan-300)",
      400: "var(--cl-cyan-400)",
      500: "var(--cl-cyan-500)",
      600: "var(--cl-cyan-600)",
      700: "var(--cl-cyan-700)",
      800: "var(--cl-cyan-800)",
      900: "var(--cl-cyan-900)",
      950: "var(--cl-cyan-950)",
    },
  },
};

/** @type {import('robindoc/lib/core/types/theme').Theme} */
export const robinTheme = {
  colors: {
    primary: {
      50: "var(--cl-cyan-50)",
      100: "var(--cl-cyan-100)",
      200: "var(--cl-cyan-200)",
      300: "var(--cl-cyan-300)",
      400: "var(--cl-cyan-400)",
      500: "var(--cl-cyan-500)",
      600: "var(--cl-cyan-600)",
      700: "var(--cl-cyan-700)",
      800: "var(--cl-cyan-800)",
      900: "var(--cl-cyan-900)",
      950: "var(--cl-cyan-950)",
    },
  },
};

Tip
Don't forget to check accessibility after changing the theme (for example, through the LightHouse accessibility check).

Previous
Search Next
Build-in blocks