-
Notifications
You must be signed in to change notification settings - Fork 66
/
theme-toggle.js
78 lines (67 loc) · 1.89 KB
/
theme-toggle.js
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import PropTypes from 'prop-types'
import React from 'react'
import Theme from '@pluralsight/ps-design-system-theme'
import * as core from '@pluralsight/ps-design-system-core'
import ViewToggle from '@pluralsight/ps-design-system-viewtoggle'
import { capitalize } from '@pluralsight/ps-design-system-util'
function ThemeToggle(props) {
return (
<>
<style jsx>{`
.toggle {
position: absolute;
top: ${core.layout.spacingXSmall};
right: ${core.layout.spacingXSmall};
z-index: 1;
}
`}</style>
<div className="toggle">
<ViewToggle onSelect={props.onSelect}>
{Object.keys(Theme.names).map(themeName => (
<ViewToggle.Option
key={themeName}
active={themeName === props.activeThemeName}
>
{capitalize(themeName)}
</ViewToggle.Option>
))}
</ViewToggle>
</div>
</>
)
}
ThemeToggle.propTypes = {
activeThemeName: PropTypes.string.isRequired,
onSelect: PropTypes.func.isRequired
}
function Themeable(props) {
const [themeName, setThemeName] = React.useState(Theme.defaultName)
const handleSelect = (evt, index) => {
const nextTheme = Theme.names[Object.keys(Theme.names)[index]]
setThemeName(nextTheme)
}
return (
<>
<style jsx>{`
.themeable {
position: relative;
}
.themeable-dark {
background: ${core.colors.gray06};
}
.themeable-light {
background: ${core.colors.bone};
}
`}</style>
<div className={`themeable themeable-${themeName}`}>
<ThemeToggle activeThemeName={themeName} onSelect={handleSelect} />
<Theme name={themeName}>{props.children}</Theme>
</div>
</>
)
}
Themeable.propTypes = {
children: PropTypes.node
}
ThemeToggle.Container = Themeable
export default ThemeToggle