Theme ​

React-Chrono provides a simple way to customize the appearance of your timeline cards by using the theme object. This object allows you to modify the colors of various elements in the card, such as the title, subtitle, detailed text, and media.

To customize the card's appearance, you can pass the theme object as a prop to the React-Chrono component. The theme object consists of key-value pairs that map to specific styles. For example, if you want to change the color of the title text, you can use the titleColor key and assign it a new color value.

Theme Object ​

Example Usage ​

Note: library provides a default theme for both light as well as dark mode.

<Chrono
  items={items}
  theme={{
    primary: "red",
    secondary: "blue",
    cardBgColor: "yellow",
    cardForeColor: "violet",
    titleColor: "black",
    titleColorActive: "red",
  }}
/>

By using the theme object, you can easily tailor the look and feel of your timeline to match the style of your project or brand.