Skip to content
On this page

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

KeyDescription
cardBgColorThe background color of the card
cardDetailsBackGroundThe background color of the card details
cardDetailsColorThe color of the text in the card details
cardMediaBgColorThe background color of the media in the card
cardSubtitleColorThe color of the card subtitle
cardTitleColorThe color of the card title
detailsColorThe color of the text in the details section
iconBackgroundColorThe background color of the icon
nestedCardBgColorThe background color of a nested card
nestedCardDetailsBackGroundThe background color of the details section of a nested card
nestedCardDetailsColorThe color of the text in the details section of a nested card
nestedCardSubtitleColorThe color of the subtitle in a nested card
nestedCardTitleColorThe color of the title in a nested card
primaryThe primary color used throughout the UI
secondaryThe secondary color used throughout the UI
titleColorActiveThe color of the title of the active card
titleColorThe color of the title of the card

Example Usage

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

jsx
<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.

Released under the MIT License.