Skip to main content

React Themes

User Interface theme composition with CSS Modules and React

Inspired by ‌react-css-themr this library allows to easily reuse the same core component in different applications and contexts, modifying its appearancevia default, context, and ad hoc themes. Powered by CSS modules and core HTML/CSS mechanics it does not require any unstable dependencies, and does not restrict you from using any other (S)CSS tools of your choice.

npm install --save @dr.pogodin/react-themes

Here is a simple example of React Themes library in action (see explanations below).
13 Sep 2021
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
13 Sep 2021
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
13 Sep 2021
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
13 Sep 2021
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
13 Sep 2021
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
13 Sep 2021
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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