feat(ui): implement dark mode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "langfuse",
-  "version": "2.39.0",
+  "version": "2.40.0",
   "author": "engineering@langfuse.com",
   "license": "MIT",
   "private": true,

packages/shared/src/features/evals/types.ts

@@ -93,10 +93,22 @@ export const evalLLMModels = [
     maxTemperature: 2,
     max_tokens: 256,
     top_p: 1,
+  } as const,
+  {
+    provider: ModelProvider.OpenAI,
+    model: "gpt-4o",
+    temperature: 1,
+    maxTemperature: 2,
+    max_tokens: 256,
+    top_p: 1,
   },
 ] as const;
 
-export const EvalModelNames = z.enum(["gpt-3.5-turbo", "gpt-4-turbo-preview"]);
+export const EvalModelNames = z.enum([
+  "gpt-3.5-turbo",
+  "gpt-4-turbo-preview",
+  "gpt-4o",
+]);
 
 export const OutputSchema = z.object({
   reasoning: z.string(),

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "2.39.0",
+  "version": "2.40.0",
   "private": true,
   "license": "MIT",
   "engines": {
@@ -25,7 +25,8 @@
     "@aws-sdk/lib-storage": "^3.568.0",
     "@aws-sdk/s3-request-presigner": "^3.554.0",
     "@codemirror/lang-json": "^6.0.1",
-    "@headlessui/react": "^1.7.19",
+    "@headlessui/react": "1.7.18",
+    "@headlessui/tailwindcss": "0.2.0",
     "@heroicons/react": "^2.1.3",
     "@hookform/resolvers": "^3.3.4",
     "@langchain/anthropic": "^0.1.16",
@@ -57,6 +58,7 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-email/components": "^0.0.17",
     "@react-email/render": "^0.0.13",
+    "@remixicon/react": "^4.2.0",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@sentry/nextjs": "^7.113.0",
@@ -65,10 +67,9 @@
     "@sentry/types": "^7.113.0",
     "@t3-oss/env-nextjs": "^0.8.0",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-table": "^8.11.8",
-    "@tremor/react": "3.11.1",
+    "@tremor/react": "3.16.2",
     "@trpc/client": "^10.45.0",
     "@trpc/next": "^10.45.0",
     "@trpc/react-query": "^10.45.0",
@@ -118,6 +119,7 @@
     "@jedmao/location": "^3.0.0",
     "@mermaid-js/mermaid-cli": "^10.7.0",
     "@playwright/test": "^1.43.1",
+    "@tailwindcss/forms": "^0.5.7",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.6",
     "@types/bcryptjs": "^2.4.6",

web/src/components/LangfuseLogo.tsx

@@ -41,10 +41,10 @@ export const LangfuseLogo = ({
         className={cn(
           "flex items-center gap-2 self-stretch rounded-md px-3 py-2 text-xs ring-1 lg:-mx-2",
           env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION === "STAGING"
-            ? "bg-blue-100 text-blue-500 ring-blue-500"
+            ? "bg-light-blue text-dark-blue ring-dark-blue"
             : env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION === "DEV"
-              ? "bg-green-100 text-green-500 ring-green-500"
-              : "bg-red-100 text-red-500 ring-red-500",
+              ? "bg-light-green text-dark-green ring-dark-green"
+              : "bg-light-red text-dark-red ring-dark-red",
         )}
       >
         {env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION === "DEV" ? (
@@ -76,7 +76,7 @@ export const LangfuseLogo = ({
           target="_blank"
           rel="noopener"
           title="View releases on GitHub"
-          className="ml-2 text-xs text-gray-400"
+          className="ml-2 text-xs text-muted-foreground"
         >
           {VERSION}
         </a>

web/src/components/Slider.tsx

@@ -7,27 +7,23 @@ export const Slider = (props: {
   loading?: boolean;
   onChecked?: (checked: boolean) => void;
   isChecked?: boolean; // whether the slider is active
-}) => {
-  console.log("props", props);
-
-  return (
-    <Switch
-      checked={props.isChecked}
-      disabled={props.loading || props.disabled}
-      onChange={props.onChecked}
+}) => (
+  <Switch
+    checked={props.isChecked}
+    disabled={props.loading || props.disabled}
+    onChange={props.onChecked}
+    className={cn(
+      props.isChecked ? "bg-background" : "bg-input",
+      "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2",
+    )}
+  >
+    <span className="sr-only">Use setting</span>
+    <span
+      aria-hidden="true"
       className={cn(
-        props.isChecked ? "bg-black" : "bg-gray-200",
-        "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2",
+        props.isChecked ? "translate-x-5" : "translate-x-0",
+        "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-background shadow ring-0 transition duration-200 ease-in-out",
       )}
-    >
-      <span className="sr-only">Use setting</span>
-      <span
-        aria-hidden="true"
-        className={cn(
-          props.isChecked ? "translate-x-5" : "translate-x-0",
-          "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
-        )}
-      />
-    </Switch>
-  );
-};
+    />
+  </Switch>
+);

web/src/components/error-page.tsx

@@ -18,7 +18,7 @@ export const ErrorPage = ({
 
   return (
     <div className="flex h-screen flex-col items-center justify-center">
-      <AlertCircle className="mb-4 h-12 w-12 text-red-500" />
+      <AlertCircle className="text-dark-red mb-4 h-12 w-12" />
       <h1 className="mb-4 text-xl font-bold">{title}</h1>
       <p className="mb-8 text-center">{message}</p>
       {session.status === "unauthenticated" ? (

web/src/components/grouped-score-badge.tsx

@@ -58,7 +58,7 @@ export const GroupedScoreBadges = ({
           .sort(([a], [b]) => (a < b ? -1 : 1))
           .map(([name, scores]) => (
             <div key={name}>
-              <div className="text-xs text-gray-500">{name}</div>
+              <div className="text-xs text-muted-foreground">{name}</div>
               <ScoresOfGroup scores={scores} />
             </div>
           ))}

web/src/components/json-editor.tsx

@@ -1,6 +1,7 @@
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
-import { githubLight } from "@uiw/codemirror-theme-github";
+import { githubLight, githubDark } from "@uiw/codemirror-theme-github";
 import { json } from "@codemirror/lang-json";
+import { useTheme } from "next-themes";
 import { cn } from "@/src/utils/tailwind";
 
 // todo: add json linting
@@ -18,10 +19,12 @@ export function JsonEditor({
   lineWrapping?: boolean;
   className?: string;
 }) {
+  const { theme } = useTheme();
+  const codeMirrorTheme = theme === "dark" ? githubDark : githubLight;
   return (
     <CodeMirror
       value={defaultValue}
-      theme={githubLight}
+      theme={codeMirrorTheme}
       basicSetup={{
         foldGutter: true,
       }}

web/src/components/layouts/doc-popup.tsx

@@ -46,7 +46,7 @@ export default function DocPopup({
             href={href}
             rel="noopener"
             target="_blank"
-            className="inline-block whitespace-nowrap text-gray-500 sm:pl-0"
+            className="inline-block whitespace-nowrap text-muted-foreground sm:pl-0"
             onClick={() => {
               capture("help_popup:href_clicked", {
                 href: href,
@@ -62,7 +62,7 @@ export default function DocPopup({
             }
           </Link>
         ) : (
-          <div className="inline-block whitespace-nowrap text-gray-500 sm:pl-0">
+          <div className="inline-block whitespace-nowrap text-muted-foreground sm:pl-0">
             {
               {
                 question: <HelpCircle className={sizes[size]} />,
@@ -74,7 +74,7 @@ export default function DocPopup({
       </HoverCardTrigger>
       <HoverCardContent>
         {typeof description === "string" ? (
-          <div className="whitespace-break-spaces text-xs font-normal text-gray-800 sm:pl-0">
+          <div className="whitespace-break-spaces text-xs font-normal text-primary sm:pl-0">
             {description}
           </div>
         ) : (
@@ -98,7 +98,7 @@ export function Popup({ triggerContent, description }: PopupProps) {
       </HoverCardTrigger>
       <HoverCardContent>
         {typeof description === "string" ? (
-          <div className="whitespace-break-spaces text-xs font-normal text-gray-800 sm:pl-0">
+          <div className="whitespace-break-spaces text-xs font-normal text-primary sm:pl-0">
             {description}
           </div>
         ) : (