diff options
Diffstat (limited to 'frontend/src/theme.js')
-rw-r--r-- | frontend/src/theme.js | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/frontend/src/theme.js b/frontend/src/theme.js new file mode 100644 index 0000000..649e4d6 --- /dev/null +++ b/frontend/src/theme.js @@ -0,0 +1,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 }; |