Add theme customizer

Author: Perlkonig

src/components/Navbar.js

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, Suspense, lazy } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { addResource } from "@abstractplay/gameslib";
@@ -9,6 +9,9 @@ import logoDark from "../assets/AbstractPlayLogo-dark.svg";
 import LogInOutButton from "./LogInOutButton";
 import { useStorageState } from "react-use-storage-state";
 import { useStore } from "../stores";
+import Spinner from "./Spinner";
+
+const ThemeCustomizer = lazy(() => import("./ThemeCustomizer"));
 
 function Navbar(props) {
   const [loggedin, loggedinSetter] = useState(false);
@@ -21,6 +24,7 @@ function Navbar(props) {
   const [colorMode, colorModeSetter] = useStorageState("color-mode", "light");
   const [storedInvis, setStoredInvis] = useStorageState("invisible", false);
   const { t, i18n } = useTranslation();
+  const [showThemeModal, setShowThemeModal] = useState(false);
   addResource(i18n.language);
 
   const closeBurger = () => {
@@ -304,12 +308,24 @@ function Navbar(props) {
             >
               Toggle Dark Mode
             </button>
+            <button
+              className="button is-small apButtonNeutral ml-2"
+              aria-label="Customize Theme"
+              onClick={() => setShowThemeModal(true)}
+            >
+              Customize Theme
+            </button>
           </div>
           <div className="navbar-item tourSettings">
             <LogInOutButton closeBurger={closeBurger} />
           </div>
         </div>
       </div>
+      <Suspense fallback={<Spinner />}>
+        {showThemeModal ? (
+          <ThemeCustomizer show={showThemeModal} handleClose={() => setShowThemeModal(false)} />
+        ) : null}
+      </Suspense>
     </nav>
   );
 }

src/index.css

@@ -16,16 +16,16 @@
     --tag-background-color: #f5f5f5;
     --dropshadow-target-start: rgba(10,10,10,0.1);
     --dropshadow-target-end: rgba(10,10,10,0.02);
-    --svg-label-color: black;
-    --svg-annotation-color: black;
-    --svg-gridline-color: black;
     --svg-default-fill: black;
     --svg-volcano-caps: black;
 
     /* Currently unused */
     /* --main-fg-color-lighter: #c3d6f1; */
     /* --secondary-color-1-bg: #ffe8e0; */
     /* --secondary-color-2-lighter: #e6f2f2; */
+    /* --svg-label-color: black; */
+    /* --svg-annotation-color: black; */
+    /* --svg-gridline-color: black; */
 }
 
 :root[color-mode="dark"] {
@@ -43,13 +43,15 @@
   --secondary-color-3-lighter: #009fbf;
   --secondary-color-3-bg: #333;
   --tag-background-color: #444;
-  --svg-label-color: var(--main-fg-color);
-  --svg-annotation-color: var(--secondary-color-2);
-  --svg-gridline-color: var(--main-font-color);
   --svg-default-fill: var(--main-font-color);
   --svg-volcano-caps: #888;
   --dropshadow-target-start: rgba(245,245,245,0.1);
   --dropshadow-target-end: rgba(245,245,245,0.02);
+
+  /* Currently unused */
+  /* --svg-label-color: var(--main-fg-color); */
+  /* --svg-annotation-color: var(--secondary-color-2); */
+  /* --svg-gridline-color: var(--main-font-color); */
 }
 
 /* Any element with the class "light--hidden" will be hidden when the site is set to Light Mode */
@@ -1196,4 +1198,3 @@ span.hardTime::after {
   :root[color-mode="dark"] svg#_btnBar symbol.aprender-button-0ca07818d5ffc > rect {
     fill: #999999;
   }
-

src/pages/Skeleton.js

@@ -39,6 +39,7 @@ import en from "javascript-time-ago/locale/en.json";
 import TimeAgo from "javascript-time-ago";
 import { useStorageState } from "react-use-storage-state";
 import newsData from "../assets/news.json";
+import ThemeApplicator from "../components/ThemeApplicator";
 import MyWebSocket from "../components/MyWebSocket";
 import { useStore } from "../stores";
 
@@ -222,6 +223,7 @@ function Bones(props) {
         </Helmet>
         <ToastContainer />
         <Router>
+          <ThemeApplicator />
           <MyWebSocket />
           <Navbar />
           <section className="section" id="main">