Color Scheme

Color Scheme Card

Represents different color schemes and is specially tailored for light and dark themes.

Usage
Props

import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};

Props	Type	Description	Default
variant	string	The color scheme variant. Options include `Dark`, `Light`, and `System`	light
selected	boolean	If `true`, displays a checkmark to indicate the selected color scheme
additional props	`React.ComponentPropsWithoutRef<'div'>`	Standard HTML `div` element props

Color Scheme Picker

Allows users to choose between different color schemes.

Usage
Props

import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};

Props	Type	Description
value	`Color Scheme`	The currently selected color scheme
onChange	function	The callback function you want to trigger when a user selects a color scheme

Welcome

Core Concepts

Color Scheme Card

Color Scheme Picker

​Color Scheme Card

​Color Scheme Picker

Color Scheme Card

Color Scheme Picker