alexandre/PaletteSwitcher
1
0
Fork 0
Code Issues 4 Pull Requests 9 Actions Packages Projects Releases Activity

Merge pull request #25 from CrispyBaguette/dark-mode

Browse Source 
Dark mode
This commit is contained in:
CrispyBaguette 2022-05-08 15:29:18 +02:00 committed by GitHub
commit e1a797fbec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 4867 additions and 4645 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9225
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

40
client/package.json
View File

@ -4,23 +4,23 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.16", "@fortawesome/react-fontawesome": "^0.1.18",
"@testing-library/jest-dom": "^5.16.1", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^11.2.7", "@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^12.8.3", "@testing-library/user-event": "^14.1.1",
"@types/jest": "^26.0.24", "@types/jest": "^27.5.0",
"@types/node": "^12.20.37", "@types/node": "^17.0.31",
"@types/react": "^17.0.37", "@types/react": "^18.0.9",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"react": "^18.0.0", "react": "^18.1.0",
"react-dom": "^18.0.0", "react-dom": "^18.1.0",
"react-scripts": "next", "react-scripts": "next",
"typescript": "^4.5.3", "typescript": "^4.6.4",
"web-vitals": "^1.1.2" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {
"start": "BROWSER=none react-scripts start", "start": "BROWSER=none react-scripts start",
@ -47,11 +47,11 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/forms": "^0.4.0", "@tailwindcss/forms": "^0.5.1",
"@types/file-saver": "^2.0.4", "@types/file-saver": "^2.0.5",
"@types/react-dom": "^18.0.1", "@types/react-dom": "^18.0.3",
"autoprefixer": "^10.4.0", "autoprefixer": "^10.4.7",
"postcss": "^8.4.4", "postcss": "^8.4.13",
"tailwindcss": "^3.0.1" "tailwindcss": "^3.0.24"
} }
} }

11
client/public/index.html
View File

@ -12,6 +12,17 @@
/> />
<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" /> <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
<title>Palette Switcher</title> <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> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

2
client/src/App.tsx
View File

@ -33,7 +33,7 @@ function App() {
}; };
return ( 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 /> <Header />
<main className="container mx-auto pb-5"> <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"> <article className="text-xl leading-relaxed max-w-prose space-y-2 mx-auto pb-5 px-2">

8
client/src/Header.tsx
View File

@ -1,10 +1,12 @@
import { faGithub } from "@fortawesome/free-brands-svg-icons"; import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { faIgloo } from "@fortawesome/free-solid-svg-icons"; import { faIgloo } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import ThemeToggler from "./ThemeToggler";
function Header() { function Header() {
return ( return (
<header className="flex items-center bg-nord-1 text-nord-5 py-3 px-2"> <header className="bg-nord-1 text-nord-5 py-3 px-2">
<div className="flex container items-center mx-auto">
<a <a
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@ -37,6 +39,10 @@ function Header() {
</a> </a>
. Visit using your own node ! . Visit using your own node !
</span> </span>
<span className="ml-auto">
<ThemeToggler />
</span>
</div>
</header> </header>
); );
} }

37
client/src/ImageInput.tsx
View File

@ -39,7 +39,26 @@ function ImageInput({ onImageSubmit }: Props) {
type="file" type="file"
accept="image/png, image/jpeg" accept="image/png, image/jpeg"
ref={fileInputRef} 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>
<label> <label>
@ -50,7 +69,21 @@ function ImageInput({ onImageSubmit }: Props) {
<button <button
type="submit" type="submit"
value="Go" 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 Go
</button> </button>

34
client/src/ImageOutput.tsx
View File

@ -29,7 +29,22 @@ function ImageOutput({ imageData }: OutputProps) {
/> />
<button <button
onClick={handleClick} 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 Download
</button> </button>
@ -37,7 +52,22 @@ function ImageOutput({ imageData }: OutputProps) {
href={imageUrl} href={imageUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" 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 Open in new tab
</a> </a>

2
client/src/PalettePreview.tsx
View File

@ -26,7 +26,7 @@ function PalettePreview({ palette }: PalettePreviewProps) {
return ( return (
<div <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 }} style={{ background: gradientString }}
></div> ></div>
); );

11
client/src/PaletteSelect.tsx
View File

@ -24,7 +24,16 @@ function PaletteSelect({ value, onChange }: PaletteSelectProps) {
<select <select
value={valueIndex} value={valueIndex}
onChange={handlePaletteChange} 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} {paletteOptions}
</select> </select>

81
client/src/ThemeToggler.tsx Normal file
View File

@ -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;

1
client/tailwind.config.js
View File

@ -1,5 +1,6 @@
module.exports = { module.exports = {
content: ["./src/**/*.{ts,tsx}", "./public/index.html}"], content: ["./src/**/*.{ts,tsx}", "./public/index.html}"],
darkMode: "class",
theme: { theme: {
extend: { extend: {
colors: { colors: {