React Themes

The base ‌Calendar‌ component renders a generic HTML representation of the current month, and accepts the classnames for its elements via ‌theme prop. It is wrapped with React Themes library to compose the actual theme it gets. The ‌default theme‌ implements necessary layout styling, and it looks good against a bright background. As the default style does not shine against dark and red backgrounds, ‌ThemeProvider‌ is used to to instruct React Themes to apply additional ‌“black context theme” and ‌“red context theme”‌ to all<Calendar> instances within corresponding contexts. These additional “context themes” are very simple, as they only override necessary colors, while all layout styling is automatically inherited from the default theme. Finally, a simple ‌“with-grid theme” ‌ is applied as an ad hoc theme to the last three Calendar instances in this example to add visible grid lines to these particular component instances.

The main point is — while Calendar, its default theme, and light additional themes are reusable components, not much complicated by the use of React Themes library, their actual use in this example becomes extremely simple, with most of styling nuances hidden from the high-level code of this example (but easily accessible and adjustable if necessary):

// "calendarWithGrid" and "darkContextCalendarTheme" are just
// imported SCSS theme modules.

<div className={styles.columns}>
  <div>
    <Calendar />
    <Calendar theme={calendarWithGrid} />
  </div>
  <ThemeProvider themes={{Calendar: darkContextCalendarTheme}}>
    <div className={styles.darkBackground}>
      <Calendar />
      <Calendar theme={calendarWithGrid} />
    </div>
  </ThemeProvider>
  <ThemeProvider themes={{Calendar: redContextCalendarTheme}}>
    <div className={styles.redBackground}>
      <Calendar />
      <Calendar theme={calendarWithGrid} />
    </div>
  </ThemeProvider>
</div>

Note, most of this example snipplet is conserned to nicely layout the example, while the actual Calendar ‌ instances are created either without parameters at all (as they pick up the default and context theme via React Themes mechanics), or with the necessary ad hoc theme passed in via theme prop.

Read next: ‌Getting Started