chore: add theme switcher logic

deriv-com · Jul 29, 2024 · 5f70673 · 5f70673
1 parent 69f5081
commit 5f70673
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -7,41 +7,12 @@
         <title>Deriv Bot</title>
         <style>
             :root {
-                --logo-loading-color: rgba(0, 0, 0, 0.8);
-                --header-footer-bg-color: rgba(0, 0, 0, 0.04);
-                --content-bg-color: #fff;
-                --general-main-1: #ffffff;
-                --general-section-1: #f2f3f4;
-                --text-prominent: #333333;
                 font-size: 62.5%;
             }
-
-            #platform_name:after {
-                content: var(--app-shell-platform-name);
-                margin-left: 8px;
-            }
-
-            .deriv-app > .header__loading {
-                background-color: var(--general-main-1);
-                border-bottom: var(--general-main-1);
-            }
-
-            .deriv-app > .app-contents__loading {
-                background-color: var(--general-main-1);
-            }
-
-            .deriv-app > .footer__loading {
-                background-color: var(--general-main-1);
-                border-bottom: var(--general-main-1);
-            }
-
-            .initial-loader__loading {
-                background-color: var(--general-main-1);
-            }
         </style>
     </head>
 
-    <body class="body theme--light">
+    <body class="body theme theme--light">
         <div id="modal_root" class="modal-root"></div>
         <div id="root"></div>
     </body>

diff --git a/src/components/layout/footer/ChangeTheme.tsx b/src/components/layout/footer/ChangeTheme.tsx
@@ -1,15 +1,38 @@
-import { LegacyThemeLightIcon } from '@deriv/quill-icons';
+import { useState } from 'react';
+import { LegacyThemeDarkIcon, LegacyThemeLightIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
 import { Tooltip } from '@deriv-com/ui';
 
 const ChangeTheme = () => {
     const { localize } = useTranslations();
+    const [current_theme, setCurrentTheme] = useState(localStorage.getItem('theme') ?? 'light');
+
+    const toggleTheme = () => {
+        const body = document.querySelector('body');
+        if (!body) return;
+        if (body.classList.contains('theme--dark')) {
+            localStorage.setItem('theme', 'light');
+            body.classList.remove('theme--dark');
+            body.classList.add('theme--light');
+            setCurrentTheme('light');
+        } else {
+            localStorage.setItem('theme', 'dark');
+            body.classList.remove('theme--light');
+            body.classList.add('theme--dark');
+            setCurrentTheme('dark');
+        }
+    };
 
     return (
         // TODO need to add theme logic
         // TODO update the component's tests after adding the logic
-        <Tooltip as='button' className='app-footer__icon' tooltipContent={localize('Change theme')}>
-            <LegacyThemeLightIcon iconSize='xs' />
+        <Tooltip
+            as='button'
+            className='app-footer__icon'
+            tooltipContent={localize('Change theme')}
+            onClick={toggleTheme}
+        >
+            {current_theme === 'light' ? <LegacyThemeLightIcon iconSize='xs' /> : <LegacyThemeDarkIcon iconSize='xs' />}
         </Tooltip>
     );
 };

diff --git a/src/components/layout/main-body/index.tsx b/src/components/layout/main-body/index.tsx
@@ -5,7 +5,7 @@ type TMainBodyProps = {
 };
 
 const MainBody: React.FC<TMainBodyProps> = ({ children }) => {
-    return <div className='main-body theme theme--light'>{children}</div>;
+    return <div className='main-body'>{children}</div>;
 };
 
 export default MainBody;