Theming

Configure the appearance of Pluto components.

Pluto comes with a theming system that allows you to change the appearance of components.

Overriding the Default Theme

We’ve put together a default dark and light theme that we think looks pretty good, and you can override certain properties to suit your needs.

To customize the default themes, pass arguments to the theming prop of the Pluto.Provider component.

import { Pluto } from "@synnaxlabs/pluto";

const App = () => (
  // Set the primary color to a nice lavender
  <Pluto.Provider theming={{ theme: { colors: { primary: "#b57edc" } } }}>
    <Pluto.Button>Click me</Pluto.Button>
  </Pluto.Provider>
);

Theme Specification

Here is the structure of the theming.theme prop:

// Colors can be hexadecimal strings, RGB arrays, or RGBA arrays
type Color = string | [number, number, number] | [number, number, number, number];

// Specification for a particular typography element e.g. h1, h2, etc.
type TypographySpec = {
  // Size in rem
  size?: number;
  // Font weight
  weight?: number;
  // Line height in rem
  lineHeight?: number;
  // Optional text transforms to apply
  textTransform?: string;
};

// A color scale where m2 has the lowest contrast with the background
// and p2 has the highest contrast.
type Scale = {
  // Lowest contrast
  m2: Color;
  // Low contrast
  m1: Color;
  // Base
  z: Color;
  // High contrast
  p1: Color;
  // Highest contrast
  p2: Color;
};

interface Theme {
  // Sets the color palette.
  colors?: {
    // Border color to use on tabs, buttons, etc.
    border?: Color;
    // Primary accent color. If one color is provided,
    // the scale will get generated automatically.
    primary?: Color | Scale;
    // Secondary accent color. If one color is provided,
    // the scale will get generated automatically.
    secondary?: Color | Scale;
    // Error color. If one color is provided, the scale
    // will get generated automatically.
    error?: Color | Scale;
    // White color, regardless of theme
    white?: Color;
    // Black color, regardless of theme
    black?: Color;
    // Text color
    text?: Color;
    // Inverted text color to use on dark elements.
    textInverted?: Color;
    // Text color to use on top of primary elements. If not provided,
    // it will be automatically chosen from the highest contrast of text and
    // textInverted.
    textOnPrimary?: Color;
  };
  // Sets sizing parameters
  sizes: {
    // Defines the rem base size. Defaults to 6px. Increase this value to
    // increase the size of all components.
    base?: number;
    border: {
      // Border radius in px for (almost) all components
      radius?: number;
      // Border width in px for (almost) all components
      width?: number;
    };
  };
  // Sets typography parameters
  typography: {
    // The font family to use.
    family?: string;
    // H1 typography
    h1: TypographySpec;
    // H2 typography
    h2: TypographySpec;
    // H3 typography
    h3: TypographySpec;
    // H4 typography
    h4: TypographySpec;
    // H5 typography
    h5: TypographySpec;
  };
}

Provider and Canvas

Line Plot