blob: 649e4d694e1ad028ac545b4b03c99bef4d78124c (
plain)
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
51
52
53
54
55
|
import React from 'react';
import { Button } from 'react-bootstrap';
const ThemeContext = React.createContext();
const themes = {
'flatly': {
css: '/bootstrap.flatly.min.css',
bg: 'light',
},
'darkly': {
css: '/bootstrap.darkly.min.css',
bg: 'dark',
},
};
class ThemeProvider extends React.Component {
constructor(props) {
super(props);
this.state = {
theme: localStorage.getItem('theme') || 'flatly',
};
this.switch_theme = this.switch_theme.bind(this);
}
componentDidMount() {
this.set_theme();
}
componentDidUpdate() {
this.set_theme();
}
render() {
return <ThemeContext.Provider value={{...themes[this.state.theme], switch_theme: this.switch_theme}}>
{this.props.children}
</ThemeContext.Provider>;
}
set_theme() {
let e = document.getElementById('theme-stylesheet');
const theme = themes[this.state.theme];
e.href = theme.css;
localStorage.setItem('theme', this.state.theme);
}
switch_theme() {
const new_theme = (this.state.theme === 'flatly') ? 'darkly' : 'flatly';
this.setState({theme: new_theme});
}
}
class ThemeSwitcher extends React.Component {
static contextType = ThemeContext;
render() {
return <Button size='sm' variant={this.context.bg} onClick={this.context.switch_theme}>Switch theme</Button>;
}
}
export { ThemeContext, ThemeProvider, ThemeSwitcher };
|
