diff options
author | Jon Bergli Heier <snakebite@jvnv.net> | 2020-11-16 20:32:50 +0100 |
---|---|---|
committer | Jon Bergli Heier <snakebite@jvnv.net> | 2020-11-16 20:32:50 +0100 |
commit | b03234567aa2069f777a7a5d38a2ae0bc0d7ebc5 (patch) | |
tree | c59c86f45eb63c1d8b6cb3fcdad4ce16fc483887 /frontend/src/theme.js | |
parent | f23c03a3375cce6c16ba9255abaddf03efca01eb (diff) |
Add frontend
Authentication is currently working but no other functionality is yet
implemented. Authentication is done using OAuth 2 via the backend,
currently we assume jab is being used.
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 }; |