diff --git a/client/src/Header.tsx b/client/src/Header.tsx index 83c2559..6677313 100644 --- 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 ( - - - - - - - - - Powered by{" "} + + - IPFS + - . Visit using your own node ! - + + + + + Powered by{" "} + + IPFS + + . Visit using your own node ! + + + + + ); } diff --git a/client/src/ImageInput.tsx b/client/src/ImageInput.tsx index 3156e88..60277cc 100644 --- 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" + } /> @@ -50,7 +69,21 @@ function ImageInput({ onImageSubmit }: Props) { Go diff --git a/client/src/ImageOutput.tsx b/client/src/ImageOutput.tsx index 82db465..c5b1c2b 100644 --- a/client/src/ImageOutput.tsx +++ b/client/src/ImageOutput.tsx @@ -29,7 +29,22 @@ function ImageOutput({ imageData }: OutputProps) { /> Download @@ -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 diff --git a/client/src/PalettePreview.tsx b/client/src/PalettePreview.tsx index 23941c7..747bf89 100644 --- a/client/src/PalettePreview.tsx +++ b/client/src/PalettePreview.tsx @@ -26,7 +26,7 @@ function PalettePreview({ palette }: PalettePreviewProps) { return ( ); diff --git a/client/src/PaletteSelect.tsx b/client/src/PaletteSelect.tsx index 6f15bef..ca2f611 100644 --- a/client/src/PaletteSelect.tsx +++ b/client/src/PaletteSelect.tsx @@ -24,7 +24,16 @@ function PaletteSelect({ value, onChange }: PaletteSelectProps) { {paletteOptions} diff --git a/client/src/ThemeToggler.tsx b/client/src/ThemeToggler.tsx new file mode 100644 index 0000000..fa00254 --- /dev/null +++ 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(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 ( + + ); +} + +export default ThemeToggler; diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 2143195..56d0af0 100644 --- 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: {