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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
import { theme, Theme, ThemeType } from '@meetfranz/theme';
import { Classes } from 'jss';
import React from 'react';
import injectSheet, { ThemeProvider } from 'react-jss';
const defaultTheme = {
name: 'Default',
variables: theme(ThemeType.default),
};
const darkTheme = {
name: 'Dark Mode',
variables: theme(ThemeType.dark),
};
const themes = [defaultTheme, darkTheme];
const styles = (theme: Theme) => ({
title: {
fontSize: 14,
},
container: {
border: theme.inputBorder,
borderRadius: theme.borderRadiusSmall,
marginBottom: 20,
padding: 20,
background: theme.colorContentBackground,
},
});
const Container = injectSheet(styles)(({ name, classes, story }: { name: string, classes: Classes, story: React.ReactNode }) => (
<article>
<h1 className={classes.title}>{name}</h1>
<div className={classes.container}>
{story}
</div>
</article>
));
export const WithTheme = ({ children }: {children: React.ReactChild}) => {
return (
<>
{themes.map((theme, key) => (
<ThemeProvider key={key} theme={theme.variables}>
<Container story={children} name={theme.name} />
</ThemeProvider>
))}
</>
);
};
|
