Remove dark mode

This commit is contained in:
2024-12-01 10:21:11 +01:00
parent 2e3f90de19
commit 80e1f50acc
5 changed files with 9 additions and 58 deletions

View File

@@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="pl" class="w-full h-full overflow-hidden dark:bg-stone-900 dark:text-white"> <html lang="pl" class="w-full h-full overflow-hidden">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Repozytorium muzyczne</title> <title>Repozytorium muzyczne</title>

View File

@@ -60,7 +60,7 @@ export const Attachment = lazy(async () => {
</div> </div>
} }
return <div ref={containerRef} className="w-full h-full overflow-scroll sheet-music-display" />; return <div ref={containerRef} className="w-full h-full overflow-scroll" />;
}, },
}; };
}); });

View File

@@ -1,17 +1,3 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.sheet-music-display * {
color: black;
stroke: black;
fill: black;
}
@media (prefers-color-scheme: dark) {
.sheet-music-display * {
color: white;
stroke: white;
fill: white;
}
}

View File

@@ -1,41 +1,17 @@
import { ButtonHTMLAttributes, DetailedHTMLProps } from "react"; import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from "react";
export namespace Button { export namespace Button {
export type Props = Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className">; export type Props = Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className">;
} }
export function Button({ children, ...props }: Button.Props) { export const Button = forwardRef<HTMLButtonElement, Button.Props>(function Button({ children, ...props }, ref) {
return ( return (
<button <button
{...props} {...props}
className=" ref={ref}
p-2 className="p-2 bg-stone-300 border-2 border-t-stone-200 border-l-stone-200 border-r-stone-600 border-b-stone-600 active:border-t-stone-600 active:border-l-stone-600 active:border-r-stone-200 active:border-b-stone-200 rounded focus:outline focus:outline-2 focus:outline-red-500"
bg-stone-300
border-2
border-t-stone-200
border-l-stone-200
border-r-stone-600
border-b-stone-600
active:border-t-stone-600
active:border-l-stone-600
active:border-r-stone-200
active:border-b-stone-200
rounded
focus:outline
focus:outline-2
focus:outline-red-500
dark:bg-stone-700
dark:border-t-stone-600
dark:border-l-stone-600
dark:border-r-stone-900
dark:border-b-stone-900
dark:active:border-t-stone-900
dark:active:border-l-stone-900
dark:active:border-r-stone-600
dark:active:border-b-stone-600
"
> >
{children} {children}
</button> </button>
); );
} });

View File

@@ -4,23 +4,12 @@ export namespace Input {
export type Props = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "className">; export type Props = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "className">;
} }
export const Input = forwardRef<HTMLInputElement, Input.Props>(function Input({ children, ...props }: Input.Props, ref) { export const Input = forwardRef<HTMLInputElement, Input.Props>(function Input({ children, ...props }, ref) {
return ( return (
<input <input
{...props} {...props}
ref={ref} ref={ref}
className=" className="w-[32ch] p-2 bg-transparent border rounded focus:outline focus:outline-2 focus:outline-red-500"
w-[32ch]
p-2
bg-transparent
border
border-black
rounded
focus:outline
focus:outline-2
focus:outline-red-500
dark:border-white
"
> >
{children} {children}
</input> </input>