andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Add dark mode

Browse source
This commit is contained in:
Andras Schmelczer 2026-02-01 13:07:24 +00:00
parent 5e210e14bd
commit 7235df0a97
14 changed files with 304 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/ui/label.tsx
View file

@ -7,6 +7,6 @@ interface LabelProps {
export function Label({ children, className }: LabelProps) {
return (
<label className={`text-sm font-medium text-warm-700 ${className || ''}`}>{children}</label>
<label className={`text-sm font-medium text-warm-700 dark:text-warm-300 ${className || ''}`}>{children}</label>
);
}

4
frontend/src/components/ui/slider.tsx
View file

@ -11,13 +11,13 @@ export function Slider({ className, ...props }: SliderProps) {
className={cn('relative flex w-full touch-none select-none items-center', className)}
{...props}
>
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-warm-200">
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-warm-200 dark:bg-warm-700">
<SliderPrimitive.Range className="absolute h-full bg-teal-600" />
</SliderPrimitive.Track>
{props.value?.map((_, i) => (
<SliderPrimitive.Thumb
key={i}
className="block h-5 w-5 rounded-full border-2 border-teal-600 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
className="block h-5 w-5 rounded-full border-2 border-teal-600 dark:border-teal-500 bg-white dark:bg-warm-800 ring-offset-white dark:ring-offset-warm-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
/>
))}
</SliderPrimitive.Root>