From ff2a34f2494d8a84962053ec6e5787fc82b5e7c6 Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Thu, 29 Sep 2022 09:12:53 -0600
Subject: [PATCH] Adding 'inverted' key to theme context to add inverted to
 class names.

---
 app/src/components/Common.js |  3 +--
 app/src/components/Theme.js  | 14 +++++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/src/components/Common.js b/app/src/components/Common.js
index 5a93b7e2..0019eb18 100644
--- a/app/src/components/Common.js
+++ b/app/src/components/Common.js
@@ -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) {
diff --git a/app/src/components/Theme.js b/app/src/components/Theme.js
index ff3c6194..5aad2c45 100644
--- a/app/src/components/Theme.js
+++ b/app/src/components/Theme.js
@@ -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}/>
 }