rt/wrolpi
1
0
Fork 0
mirror of https://github.com/lrnselfreliance/wrolpi.git synced 2026-10-26 19:01:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding 'inverted' key to theme context to add inverted to class names.

Browse source
This commit is contained in:
Roland 2022-09-29 09:12:53 -06:00
parent 6362a12345
commit ff2a34f249
No known key found for this signature in database
GPG key ID: 9D6DBD3ACF11AB93
2 changed files with 12 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/src/components/Common.js
View file

@ -719,8 +719,7 @@ export function ThrottleToggle() {
export function Toggle({label, checked, disabled, onChange, icon}) {
// Custom toggle because Semantic UI does not handle inverted labels correctly.
const {i, t} = useContext(ThemeContext);
const inverted = i && i['inverted'] === true ? 'inverted' : '';
const {t, inverted} = useContext(ThemeContext);
let style = {marginLeft: '1em'};
if (t && t.style) {

14
app/src/components/Theme.js
View file

@ -32,6 +32,7 @@ export function ThemeWrapper({children, ...props}) {
const [i, setI] = useState({});
const [s, setS] = useState({});
const [t, setT] = useState({});
const [inverted, setInverted] = useState('');
const [theme, setTheme] = useState();
const setDarkTheme = (save = false) => {
@ -39,6 +40,7 @@ export function ThemeWrapper({children, ...props}) {
setI({inverted: true});
setS({style: {backgroundColor: '#1B1C1D', color: '#dddddd'}});
setT({style: {color: '#dddddd'}});
setInverted('inverted');
setTheme(darkTheme);
document.body.style.background = '#1B1C1D';
if (save) {
@ -51,6 +53,7 @@ export function ThemeWrapper({children, ...props}) {
setI({inverted: undefined});
setS({});
setT({});
setInverted('');
setTheme(lightTheme);
document.body.style.background = '#FFFFFF';
if (save) {
@ -80,7 +83,13 @@ export function ThemeWrapper({children, ...props}) {
'change', (e) => e.matches ? setDarkTheme() : setLightTheme());
}, []);
const themeValue = {i, s, t, theme, setDarkTheme, setLightTheme};
const themeValue = {
i, // Used for Semantic elements which support "inverted".
t, // Used to invert text.
s, // Used to invert the style some elements.
inverted, // Used to add "invert" to className.
theme, setDarkTheme, setLightTheme
};
return <ThemeContext.Provider value={themeValue}>
{children}
@ -218,7 +227,6 @@ export function TextArea(props) {
}
export function CardIcon(props) {
const {i} = useContext(ThemeContext);
const inverted = i['inverted'] === true ? 'inverted' : null;
const {inverted} = useContext(ThemeContext);
return <center className={`card-icon ${inverted}`} {...props}/>
}