Feat: Add theme chooser

README.md

@@ -12,7 +12,6 @@
 npm i && npm start
 ```
 
-
 ## Contribution
 
 If you're new to contributing to Open Source on Github, [this guide](https://guides.github.com/activities/contributing-to-open-source/) can help you get started. Please check out the [contribution guide](CONTRIBUTING.md) for more details on how issues and pull requests work.

package.json

@@ -34,6 +34,8 @@
     "react-content-loader": "^5.1.0",
     "react-dom": "^16.13.1",
     "react-feather": "^2.0.8",
+    "react-is-visible": "^1.1.0",
+    "react-modal": "^3.11.2",
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.7.0",
     "react-router-dom": "^5.2.0",
@@ -46,7 +48,6 @@
     "source-map-explorer": "^2.4.2",
     "swr": "^0.2.3",
     "topojson": "^3.0.2",
-    "use-dark-mode": "^2.3.1",
     "workerize-loader": "^1.3.0"
   },
   "scripts": {

src/App.js

@@ -1,21 +1,84 @@
 import './App.scss';
+import './dark-theme.scss';
+
 import Blog from './components/Blog';
 import Navbar from './components/Navbar';
+import ThemeChooser from './components/themechooser';
+import {PRIMARY_COLORS, BACKGROUND_COLORS} from './constants';
 
-import React, {lazy, useState, Suspense} from 'react';
+import React, {lazy, useState, Suspense, useEffect, useCallback} from 'react';
 import {Route, Redirect, Switch, useLocation} from 'react-router-dom';
-import useDarkMode from 'use-dark-mode';
 
 const Home = lazy(() => import('./components/Home'));
 const About = lazy(() => import('./components/About'));
 const State = lazy(() => import('./components/State'));
 const LanguageSwitcher = lazy(() => import('./components/LanguageSwitcher'));
 
+const colorKeys = Object.freeze({
+  P_COLOR: 'p-color',
+  BG_COLOR: 'bg-color',
+});
+
 const App = () => {
-  const darkMode = useDarkMode(false);
   const [showLanguageSwitcher, setShowLanguageSwitcher] = useState(false);
   const location = useLocation();
 
+  const [showThemeChooser, setShowThemeChooser] = useState(false);
+  const [pColor, setPColor] = useState('');
+  const [bgColor, setBgColor] = useState('');
+
+  useEffect(() => {
+    const cachedPColor =
+      localStorage?.getItem(colorKeys.P_COLOR) ?? PRIMARY_COLORS[0];
+    const cachedBgColor =
+      localStorage?.getItem(colorKeys.BG_COLOR) ??
+      BACKGROUND_COLORS.DEFAULT.color;
+
+    setPColor(cachedPColor);
+    setBgColor(cachedBgColor);
+  }, []);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty('--primary-color', pColor);
+  }, [pColor]);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty('--background-color', bgColor);
+    let className;
+
+    if (bgColor === BACKGROUND_COLORS.LIGHTS_OUT.color) {
+      className = 'dark-mode dim';
+    } else if (bgColor === BACKGROUND_COLORS.DIM.color) {
+      className = 'dark-mode lights-out';
+    } else {
+      className = 'light-theme';
+    }
+
+    document.getElementsByTagName('body')[0].className = className;
+  }, [bgColor]);
+
+  const cacheColor = (key, color) => {
+    localStorage.setItem(key, color);
+  };
+
+  const handleOnPColorChange = useCallback(
+    (newColor) => {
+      setPColor(newColor);
+      cacheColor(colorKeys.P_COLOR, newColor);
+    },
+    [setPColor]
+  );
+
+  const handleOnBgColorChange = useCallback(
+    (newColor) => {
+      setBgColor(newColor);
+      cacheColor(colorKeys.BG_COLOR, newColor);
+    },
+    [setBgColor]
+  );
+
   const pages = [
     {
       pageLink: '/',
@@ -44,35 +107,46 @@ const App = () => {
   ];
 
   return (
-    <div className="App">
-      <Suspense fallback={<div />}>
-        <LanguageSwitcher
+    <>
+      {showThemeChooser && (
+        <ThemeChooser
+          isOpen={showThemeChooser}
+          onClose={() => setShowThemeChooser(false)}
+          onPColorChange={handleOnPColorChange}
+          onBgColorChange={handleOnBgColorChange}
+          {...{pColor, bgColor}}
+        />
+      )}
+      <div className="App" id="root-app">
+        <Suspense fallback={<div />}>
+          <LanguageSwitcher
+            {...{showLanguageSwitcher, setShowLanguageSwitcher}}
+          />
+        </Suspense>
+
+        <Navbar
+          pages={pages}
+          setShowThemeChooser={setShowThemeChooser}
           {...{showLanguageSwitcher, setShowLanguageSwitcher}}
         />
-      </Suspense>
-
-      <Navbar
-        pages={pages}
-        {...{darkMode}}
-        {...{showLanguageSwitcher, setShowLanguageSwitcher}}
-      />
-
-      <Suspense fallback={<div />}>
-        <Switch location={location}>
-          {pages.map((page, index) => {
-            return (
-              <Route
-                exact
-                path={page.pageLink}
-                render={({match}) => <page.view />}
-                key={index}
-              />
-            );
-          })}
-          <Redirect to="/" />
-        </Switch>
-      </Suspense>
-    </div>
+
+        <Suspense fallback={<div />}>
+          <Switch location={location}>
+            {pages.map((page, index) => {
+              return (
+                <Route
+                  exact
+                  path={page.pageLink}
+                  render={({match}) => <page.view />}
+                  key={index}
+                />
+              );
+            })}
+            <Redirect to="/" />
+          </Switch>
+        </Suspense>
+      </div>
+    </>
   );
 };