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

Latest NPM ReleaseNPM monthly downloadsCircleCIGitHub Repo stars

Note: Since its release v1.5.0‌ the library has been migrated to TypeScript. It is still compatible with plain JavaScript — the original interfaces have not been changed (with exception of removed «compatibility mode» for emulation of ‌react-css-themr‌ and ‌react-css-super-themr‌ libraries), and the packaged library now includes JavaScript build, alongside TypeScript sources, and type declarations.

The TypeScript-specific usage and APIs have not been documented yet, and are likely to evolve in the follow-up releases.

Here is a simple example of React Themes library in action (see explanations below).
10 Jan 2024
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
31
10 Jan 2024
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
31
10 Jan 2024
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
31
10 Jan 2024
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
31
10 Jan 2024
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
31
10 Jan 2024
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
31

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