feat: Implement theme toggling and enhance dashboard component theming

This commit introduces a theme toggle functionality in the application header
and improves the visual consistency of dashboard components across different
color schemes.

- Added light/dark mode toggle to  using Mantine's .
- Ensured all  components in  have visible borders in both light and dark modes by adding the  prop.
- Made  colors in  theme-aware, dynamically adjusting their background color based on the active color scheme.

Additionally, this commit includes a large refactoring operation, moving various
component files from  to  and updating
their references.
This commit is contained in:
2026-02-11 11:20:17 +08:00
parent d41e53c41f
commit defdb2b7bd
67 changed files with 530 additions and 6500 deletions

View File

@@ -1,60 +0,0 @@
import {
Button as MantineButton,
type ButtonProps as MantineButtonProps,
} from "@mantine/core";
import { cn } from "./utils";
interface ButtonProps extends MantineButtonProps {
variant?:
| "default"
| "destructive"
| "outline"
| "secondary"
| "ghost"
| "link";
className?: string;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
type?: "button" | "submit" | "reset";
}
const Button = ({ children, className, variant, ...props }: ButtonProps) => {
let mantineVariant: MantineButtonProps["variant"];
let mantineColor: MantineButtonProps["color"];
switch (variant) {
case "destructive":
mantineVariant = "filled";
mantineColor = "red";
break;
case "outline":
mantineVariant = "outline";
break;
case "secondary":
mantineVariant = "default";
break;
case "ghost":
mantineVariant = "subtle";
break;
case "link":
mantineVariant = "transparent";
mantineColor = "blue"; // Assuming primary maps to blue in Mantine for now
break;
default:
mantineVariant = "filled";
mantineColor = "blue"; // Assuming primary maps to blue in Mantine for now
break;
}
return (
<MantineButton
variant={mantineVariant}
color={mantineColor}
className={cn(className)}
{...props}
>
{children}
</MantineButton>
);
};
export { Button };