mirror of
https://github.com/BerriAI/litellm.git
synced 2026-08-28 05:25:59 +00:00
e5dcc6873e
The top bar's theme control needed a click on the sun/moon, then a menu, then a choice, to do something every other product does in one click. It is now a plain button that flips between light and dark, with the beta marker moved into the label of the click that turns dark on. An explicit "system" choice is gone, but next-themes still follows the OS for anyone who has it stored and has not clicked yet. Docs and Blog also drifted apart in the gateway header: Blog rendered through the shared product-link class while Docs was a muted ghost button one size down, so Docs read as dimmer and sat 4px shorter. Both now go through a shared DocsLink component, which is also what the legacy navbar uses, so the pair cannot drift again.
28 lines
689 B
TypeScript
28 lines
689 B
TypeScript
"use client";
|
|
|
|
import { Moon, Sun } from "lucide-react";
|
|
import { useTheme } from "next-themes";
|
|
import React from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
const ThemeToggle: React.FC = () => {
|
|
const { setTheme, resolvedTheme } = useTheme();
|
|
const isDark = resolvedTheme === "dark";
|
|
const label = isDark ? "Switch to light mode" : "Switch to dark mode (beta)";
|
|
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
aria-label={label}
|
|
title={label}
|
|
className="text-muted-foreground"
|
|
onClick={() => setTheme(isDark ? "light" : "dark")}
|
|
>
|
|
{isDark ? <Moon /> : <Sun />}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default ThemeToggle;
|