litellm/ui/litellm-dashboard/package.json
ryan-crabbe-berri 933e28d900
feat(ui): add a light/dark/system theme toggle to the top bar (#37669)
* feat(ui): add a light/dark/system theme toggle

The dashboard already carried a full `.dark` palette, dark-aware surfaces and a
dark logo variant, but nothing ever put the `dark` class on the document, so
none of it could be reached. next-themes now owns that class: it reads the
stored choice, falls back to the OS preference, and stamps the class from an
inline script before first paint so there is no light flash on load.

The toggle is a three-way System / Light / Dark control in the account menu,
in both the sidebar menu and the older navbar dropdown, so it is reachable from
the gateway dashboard, chat and the model hub alike.

useIsDarkMode watched the root element with a MutationObserver purely to answer
a question next-themes now answers directly, so it goes, and useSyntaxTheme
reads resolvedTheme instead. The toaster follows the resolved theme too.

* feat(ui): move the theme control to the top bar and default to light

The toggle now lives in the header toolbar of both shells, the gateway
dashboard's DashboardHeader and the older full-width Navbar, where it replaces
the placeholder comment that had been holding its spot. It reads better there
as a single icon button with a System / Light / Dark menu than as a segmented
row buried in the account popover, so the account menus lose their theme row.

Dark mode is still being rolled out, so an install that has never touched the
control now stays light instead of following the OS. System is still a choice,
just no longer the default. While dark is active the toolbar carries a small
Experimental badge, so nobody mistakes an unstyled surface for a bug.

* fix(ui): serve the dark logo in the legacy navbar too

The sidebar already paired its logo with a dark variant, but the full-width
navbar kept a single light-only image. That did not matter while dark mode was
unreachable; now that the toggle sits in that shell's own top bar, the white
JPEG slab lands on a dark bar. It gets the same two-image swap the sidebar uses,
and a test that pins the pairing so the two shells cannot drift apart again.
2026-08-20 12:58:29 -07:00

112 lines
3.3 KiB
JSON

{
"name": "litellm-dashboard",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"dev:webpack": "next dev --webpack",
"build": "next build",
"start": "next start",
"lint": "eslint .",
"test": "vitest",
"test:unit": "vitest run --project unit",
"test:component": "vitest run --project component",
"test:integration": "vitest run --project integration",
"test:dot": "vitest --reporter=dot",
"test:types": "vitest run --project types",
"test:watch": "vitest -w",
"test:coverage": "vitest run --coverage",
"format": "prettier --write .",
"format:check": "prettier --check .",
"knip": "knip",
"knip:ci": "knip --exclude exports,nsExports,types,nsTypes,enumMembers,classMembers,duplicates",
"knip:fix": "knip --fix",
"gen:api": "node scripts/gen-api-types.mjs"
},
"dependencies": {
"@anthropic-ai/sdk": "0.92.0",
"@base-ui/react": "^1.6.0",
"@headlessui/tailwindcss": "0.2.2",
"@heroicons/react": "1.0.6",
"@hookform/resolvers": "5.4.0",
"@tanstack/react-pacer": "0.22.1",
"@tanstack/react-query": "5.100.7",
"@tanstack/react-table": "8.21.3",
"@types/papaparse": "5.5.2",
"cva": "1.0.0-beta.4",
"date-fns": "^4.4.0",
"dayjs": "1.11.19",
"jwt-decode": "4.0.0",
"lucide-react": "0.513.0",
"moment": "2.30.1",
"next": "16.2.11",
"next-themes": "^0.4.6",
"nuqs": "^2.9.4",
"openai": "4.104.0",
"openapi-fetch": "^0.17.0",
"openapi-react-query": "^0.5.4",
"papaparse": "5.5.3",
"react": "19.2.8",
"react-copy-to-clipboard": "5.1.1",
"react-dom": "19.2.8",
"react-hook-form": "7.82.0",
"react-json-view-lite": "2.5.0",
"react-markdown": "9.1.0",
"react-syntax-highlighter": "15.6.6",
"recharts": "3.9.2",
"remark-gfm": "4.0.1",
"sonner": "2.0.8",
"tailwind-merge": "3.4.0",
"uuid": "14.0.0",
"zod": "3.25.76"
},
"devDependencies": {
"@eslint/js": "9.39.2",
"@tailwindcss/forms": "0.5.11",
"@tailwindcss/postcss": "4.3.2",
"@testing-library/dom": "10.4.1",
"@testing-library/jest-dom": "6.9.1",
"@testing-library/react": "16.3.2",
"@testing-library/user-event": "14.6.1",
"@types/node": "20.19.37",
"@types/react": "19.2.18",
"@types/react-copy-to-clipboard": "5.0.7",
"@types/react-dom": "19.2.4",
"@types/react-syntax-highlighter": "15.5.13",
"@vitest/coverage-v8": "3.2.6",
"@vitest/ui": "3.2.6",
"eslint": "9.39.2",
"eslint-config-next": "16.2.11",
"eslint-config-prettier": "10.1.8",
"eslint-plugin-jest-dom": "5.10.1",
"eslint-plugin-testing-library": "7.16.2",
"eslint-plugin-unused-imports": "4.3.0",
"jsdom": "27.4.0",
"knip": "5.83.1",
"openapi-typescript": "7.13.0",
"postcss": "8.5.23",
"prettier": "3.2.5",
"tailwindcss": "4.3.2",
"tw-animate-css": "1.4.0",
"typescript": "5.9.3",
"typescript-eslint": "8.60.1",
"vitest": "3.2.6"
},
"overrides": {
"prismjs": "1.30.0",
"js-yaml": "4.3.1",
"brace-expansion": "5.0.9",
"glob": "13.0.0",
"minimatch": "10.2.4",
"ws": "8.21.0",
"braces": "3.0.3",
"axios": "1.13.6",
"postcss": "8.5.23",
"esbuild": "0.28.1",
"sharp": "^0.35.0"
},
"engines": {
"node": ">=24.14.1",
"npm": ">=11.10.0"
}
}