Dark mode #25

Merged
CrispyBaguette merged 5 commits from dark-mode into master 2022-05-08 13:29:18 +00:00
5 changed files with 79 additions and 7 deletions
Showing only changes of commit 49b3de25aa - Show all commits

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">

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>

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>

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

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>