feat(ui): add dark mode

CONTRIBUTING.md

@@ -290,6 +290,34 @@ When a new release is tagged on the `main` branch (excluding prereleases), it tr
 1. The Docker image is published to GitHub Packages with the version number and `latest` tag.
 2. The deployment is carried out on Langfuse Cloud. This is done by force pushing the `main` branch to the `production` branch during every release, using the [`release.yml`](.github/workflows/release.yml) GitHub Action.
 
+## Theming
+
+At Langfuse, we utilize CSS variables to manage our theme settings across the platform.
+
+Our approach leverages separate CSS variables for backgrounds (--background) and foregrounds (--foreground), fully adhering to the [shadcn/ui](https://ui.shadcn.com/docs/theming) color conventions. We recommend using HSL values for these colors to enhance consistency and customization.
+
+### Adding New Colors
+
+1. Global Definitions: Add new CSS variable definitions in the global.css file.
+2. Tailwind Configuration: Reflect these new colors in the tailwind.config.js to maintain alignment with Tailwind's utility classes.
+
+### Utility Classes
+
+- Border Color: `border`
+- Primary Text: `primary`
+- Secondary Text: `muted-foreground`
+- Hover States: Use `primary-foreground` or `accent`
+- Background: `background`
+- Main Content: `foreground`
+- Primary Color: `primary`
+- Accents: `primary-accent`
+- Selectable Items: `input`
+- Link Background: `muted-indigo`
+- Link Text: `accent-dark-blue`
+- Link Hover: `accent-light-blue`
+
+By following these guidelines, you can ensure that any contributions to our theme are consistent, maintainable, and aligned with our design system.
+
 ## Using secrets stored in 1Password
 
 When applying changes to non-local environments, you may need to use secrets stored in 1Password. We use the 1Password CLI for this purpose.

web/package.json

@@ -94,6 +94,7 @@
     "next": "^14.2.3",
     "next-auth": "^4.24.7",
     "next-query-params": "^5.0.0",
+    "next-themes": "^0.3.0",
     "nodemailer": "^6.9.13",
     "posthog-js": "^1.122.0",
     "posthog-node": "^3.6.3",

web/src/features/darkmode/ThemeProvider.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

web/src/pages/_app.tsx

@@ -30,6 +30,7 @@ import "core-js/features/array/to-sorted";
 import "react18-json-view/src/style.css";
 import { DetailPageListsProvider } from "@/src/features/navigate-detail-pages/context";
 import { env } from "@/src/env.mjs";
+import { ThemeProvider } from "@/src/features/darkmode/ThemeProvider";
 
 const setProjectInPosthog = () => {
   // project
@@ -87,10 +88,17 @@ const MyApp: AppType<{ session: Session | null }> = ({
         <PostHogProvider client={posthog}>
           <SessionProvider session={session} refetchOnWindowFocus={true}>
             <DetailPageListsProvider>
-              <Layout>
-                <Component {...pageProps} />
-                <UserTracking />
-              </Layout>
+              <ThemeProvider
+                attribute="class"
+                defaultTheme="light"
+                enableSystem={false}
+                disableTransitionOnChange
+              >
+                <Layout>
+                  <Component {...pageProps} />
+                  <UserTracking />
+                </Layout>
+              </ThemeProvider>
               <CrispWidget />
             </DetailPageListsProvider>
           </SessionProvider>