Merge pull request #25 from CrispyBaguette/dark-mode

Dark mode
2022-05-08 15:29:18 +02:00 · 2022-05-08 15:29:18 +02:00 · e1a797fbec
commit e1a797fbec
parent f27457ba70 023752045e
11 changed files with 4867 additions and 4645 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@ -4,23 +4,23 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.16",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^12.20.37",
-    "@types/react": "^17.0.37",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/user-event": "^14.1.1",
+    "@types/jest": "^27.5.0",
+    "@types/node": "^17.0.31",
+    "@types/react": "^18.0.9",
    "classnames": "^2.3.1",
    "file-saver": "^2.0.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
    "react-scripts": "next",
-    "typescript": "^4.5.3",
-    "web-vitals": "^1.1.2"
+    "typescript": "^4.6.4",
+    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "BROWSER=none react-scripts start",
@ -47,11 +47,11 @@
    ]
  },
  "devDependencies": {
-    "@tailwindcss/forms": "^0.4.0",
-    "@types/file-saver": "^2.0.4",
-    "@types/react-dom": "^18.0.1",
-    "autoprefixer": "^10.4.0",
-    "postcss": "^8.4.4",
-    "tailwindcss": "^3.0.1"
+    "@tailwindcss/forms": "^0.5.1",
+    "@types/file-saver": "^2.0.5",
+    "@types/react-dom": "^18.0.3",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.13",
+    "tailwindcss": "^3.0.24"
  }
 }
--- a/client/public/index.html
+++ b/client/public/index.html
@ -12,6 +12,17 @@
    />
    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
    <title>Palette Switcher</title>
+    <script>
+      if (
+        localStorage.theme === "dark" ||
+        (!("theme" in localStorage) &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches)
+      ) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    </script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@ -33,7 +33,7 @@ function App() {
  };

  return (
-    <div className="bg-nord-6 text-nord-0 min-h-screen">
+    <div className="bg-nord-6 dark:bg-nord-0 text-nord-0 dark:text-nord-6 min-h-screen">
      <Header />
      <main className="container mx-auto pb-5">
        <article className="text-xl leading-relaxed max-w-prose space-y-2 mx-auto pb-5 px-2">
--- a/client/src/Header.tsx
+++ b/client/src/Header.tsx
@ -1,42 +1,48 @@
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faIgloo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ThemeToggler from "./ThemeToggler";

 function Header() {
  return (
-    <header className="flex items-center bg-nord-1 text-nord-5 py-3 px-2">
-      <a
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://github.com/CrispyBaguette/wasm-palette-converter"
-      >
-        <FontAwesomeIcon
-          icon={faGithub}
-          className="fa-2x hover:text-nord-7 mx-2"
-        />
-      </a>
-      <a
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://blog.bruyant.xyz"
-      >
-        <FontAwesomeIcon
-          icon={faIgloo}
-          className="fa-2x hover:text-nord-7 mx-2"
-        />
-      </a>
-      <span className="text-sm">
-        Powered by{" "}
+    <header className="bg-nord-1 text-nord-5 py-3 px-2">
+      <div className="flex container items-center mx-auto">
        <a
-          href="https://ipfs.io"
          target="_blank"
-          rel="noreferrer"
-          className="bg-nord-5 text-nord-1 hover:bg-nord-7 px-1 "
+          rel="noopener noreferrer"
+          href="https://github.com/CrispyBaguette/wasm-palette-converter"
        >
-          IPFS
+          <FontAwesomeIcon
+            icon={faGithub}
+            className="fa-2x hover:text-nord-7 mx-2"
+          />
        </a>
-        . Visit using your own node !
-      </span>
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://blog.bruyant.xyz"
+        >
+          <FontAwesomeIcon
+            icon={faIgloo}
+            className="fa-2x hover:text-nord-7 mx-2"
+          />
+        </a>
+        <span className="text-sm">
+          Powered by{" "}
+          <a
+            href="https://ipfs.io"
+            target="_blank"
+            rel="noreferrer"
+            className="bg-nord-5 text-nord-1 hover:bg-nord-7 px-1 "
+          >
+            IPFS
+          </a>
+          . Visit using your own node !
+        </span>
+        <span className="ml-auto">
+          <ThemeToggler />
+        </span>
+      </div>
    </header>
  );
 }
--- a/client/src/ImageInput.tsx
+++ b/client/src/ImageInput.tsx
@ -39,7 +39,26 @@ function ImageInput({ onImageSubmit }: Props) {
          type="file"
          accept="image/png, image/jpeg"
          ref={fileInputRef}
-          className="block w-full mt-1 text-sm text-nord-0 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-semibold file:bg-nord-4 file:text-nord-0 hover:file:bg-nord-5"
+          className={
+            "block " +
+            "w-full " +
+            "mt-1 " +
+            "text-sm " +
+            "text-nord-0 " +
+            "dark:text-nord-5 " +
+            "file:mr-4 " +
+            "file:py-2 " +
+            "file:px-4 " +
+            "file:border-0 " +
+            "file:text-sm " +
+            "file:font-semibold " +
+            "file:bg-nord-4 " +
+            "dark:file:bg-nord-1 " +
+            "file:text-nord-0 " +
+            "dark:file:text-nord-5 " +
+            "hover:file:bg-nord-5 " +
+            "dark:hover:file:bg-nord-2"
+          }
        />
      </label>
      <label>
@ -50,7 +69,21 @@ function ImageInput({ onImageSubmit }: Props) {
      <button
        type="submit"
        value="Go"
-        className="block w-32 mx-auto mt-1 py-2 px-4 text-sm text-nord-0 bg-nord-4 hover:bg-nord-5"
+        className={
+          "block " +
+          "w-32 " +
+          "mx-auto " +
+          "mt-1 " +
+          "py-2 " +
+          "px-4 " +
+          "text-sm " +
+          "text-nord-0 " +
+          "dark:text-nord-5 " +
+          "bg-nord-4 " +
+          "dark:bg-nord-1 " +
+          "hover:bg-nord-5 " +
+          "dark:hover:bg-nord-2"
+        }
      >
        Go
      </button>
--- a/client/src/ImageOutput.tsx
+++ b/client/src/ImageOutput.tsx
@ -29,7 +29,22 @@ function ImageOutput({ imageData }: OutputProps) {
      />
      <button
        onClick={handleClick}
-        className="block w-48 mx-auto mt-1 py-2 px-4 text-sm text-center text-nord-0 bg-nord-4 hover:bg-nord-5"
+        className={
+          "block " +
+          "w-48 " +
+          "mx-auto " +
+          "mt-1 " +
+          "py-2 " +
+          "px-4 " +
+          "text-sm " +
+          "text-center " +
+          "text-nord-0 " +
+          "dark:text-nord-5 " +
+          "bg-nord-4 " +
+          "dark:bg-nord-1 " +
+          "hover:bg-nord-5 " +
+          "dark:hover:bg-nord-2"
+        }
      >
        Download
      </button>
@ -37,7 +52,22 @@ function ImageOutput({ imageData }: OutputProps) {
        href={imageUrl}
        target="_blank"
        rel="noopener noreferrer"
-        className="block w-48 mx-auto mt-1 py-2 px-4 text-sm text-center text-nord-0 bg-nord-4 hover:bg-nord-5"
+        className={
+          "block " +
+          "w-48 " +
+          "mx-auto " +
+          "mt-1 " +
+          "py-2 " +
+          "px-4 " +
+          "text-sm " +
+          "text-center " +
+          "text-nord-0 " +
+          "dark:text-nord-5 " +
+          "bg-nord-4 " +
+          "dark:bg-nord-1 " +
+          "hover:bg-nord-5 " +
+          "dark:hover:bg-nord-2"
+        }
      >
        Open in new tab
      </a>
--- a/client/src/PalettePreview.tsx
+++ b/client/src/PalettePreview.tsx
@ -26,7 +26,7 @@ function PalettePreview({ palette }: PalettePreviewProps) {

  return (
    <div
-      className="h-5 my-2 border-solid border-2 border-nord-0"
+      className="h-5 my-2 border-solid border-2 border-nord-0 dark:border-nord-5"
      style={{ background: gradientString }}
    ></div>
  );
--- a/client/src/PaletteSelect.tsx
+++ b/client/src/PaletteSelect.tsx
@ -24,7 +24,16 @@ function PaletteSelect({ value, onChange }: PaletteSelectProps) {
    <select
      value={valueIndex}
      onChange={handlePaletteChange}
-      className="form-select block w-full mt-1"
+      className={
+        "form-select " +
+        "dark:text-nord-5 " +
+        "dark:bg-nord-1 " +
+        "focus:ring-nord-7 " +
+        "focus:border-nord-7 " +
+        "block " +
+        "w-full " +
+        "mt-1"
+      }
    >
      {paletteOptions}
    </select>
--- a/client/src/ThemeToggler.tsx
+++ b/client/src/ThemeToggler.tsx
@ -0,0 +1,81 @@
+import {
+  faMoon,
+  faSun,
+  IconDefinition,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
+
+type Theme = "light" | "dark";
+
+function ThemeToggler() {
+  const userPrefersDarkMode = (): boolean => {
+    return (
+      localStorage.theme === "dark" ||
+      (!("theme" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    );
+  };
+
+  const getCurrentTheme = (): Theme => {
+    // We have a theme set
+    if ("theme" in localStorage) {
+      const theme = localStorage.getItem("theme");
+      // Is it valid ?
+      if (theme === "dark" || theme === "light") {
+        return theme;
+      } else {
+        // Invalid theme, remove it and return default
+        localStorage.removeItem("theme");
+        return userPrefersDarkMode() ? "dark" : "light";
+      }
+    } else {
+      return userPrefersDarkMode() ? "dark" : "light";
+    }
+  };
+
+  const [theme, setTheme] = useState<Theme>(getCurrentTheme());
+
+  const rotateTheme = () => {
+    switch (theme) {
+      case "light":
+        setTheme("dark");
+        break;
+      case "dark":
+        setTheme("light");
+        break;
+      default:
+        setTheme("light");
+        break;
+    }
+  };
+
+  const getIcon = (): IconDefinition => {
+    switch (theme) {
+      case "light":
+        return faMoon;
+      case "dark":
+        return faSun;
+    }
+  };
+
+  useEffect(() => {
+    localStorage.theme = theme;
+
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else if (theme === "light") {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [theme]);
+
+  return (
+    <FontAwesomeIcon
+      icon={getIcon()}
+      onClick={rotateTheme}
+      className="fa-2x hover:text-nord-7 mx-2"
+    />
+  );
+}
+
+export default ThemeToggler;
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@ -1,5 +1,6 @@
 module.exports = {
  content: ["./src/**/*.{ts,tsx}", "./public/index.html}"],
+  darkMode: "class",
  theme: {
    extend: {
      colors: {