Function ThemeTailwindClassExample

gui/src/styles/ThemePage.tsx:19–55

({
  colorName,
  varNames,
  defaultColor,
  isMissing,
}: {
  colorName: string;
  varNames: string[];
  defaultColor: string;
  isMissing?: boolean;
})

} from "./theme";

const ThemeTailwindClassExample = ({
  colorName,
  varNames,
  defaultColor,
  isMissing,
}: {
  colorName: string;
  varNames: string[];
  defaultColor: string;
  isMissing?: boolean;
}) => {
  return (
    <>
      <div className={`line-clamp-1 break-all px-2 text-right`}>
        {colorName}
      </div>
      <div
        className={`line-clamp-1 break-all p-1 text-[9px] ${isMissing ? "text-error" : ""}`}
        style={{
          backgroundColor: varWithFallback(
            colorName as keyof typeof THEME_COLORS,
          ),
        }}
      >
        {varNames.join(", ")}
      </div>
      <div
        className={`line-clamp-1 break-all p-1 text-[9px]`}
        style={{
          backgroundColor: defaultColor,
        }}
      >
        {defaultColor}
      </div>
    </>
  );
};

function ThemePage() {
  const navigate = useNavigate();