dashboard: fix issue with theme not being detected (#33645)

We had two versions of `next-themes` and they are not compatible with eachother. For now, re-export next-themes from dashboard-common

GitOrigin-RevId: 2a345af89f770ecec2ffae3fa0b9c34d0ab66fc9

Author: atrakh

Diff for: npm-packages/common/config/rush/pnpm-lock.yaml

@@ -1,6 +1,8 @@
 import { useCallback, useEffect } from "react";
 import { useTheme } from "next-themes";
 
+export { ThemeProvider, useTheme } from "next-themes";
+
 export function ThemeConsumer() {
   const { setTheme, theme } = useTheme();
 

Diff for: npm-packages/dashboard-common/src/elements/ThemeConsumer.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { DecoratorHelpers } from "@storybook/addon-themes";
 import type { DecoratorFunction, Renderer } from "@storybook/types";
-import { ThemeProvider } from "next-themes";
+import { ThemeProvider } from "dashboard-common";
 import { ReactRenderer } from "@storybook/react";
 const { initializeThemeState, pluckThemeFromContext, useThemeParameters } =
   DecoratorHelpers;

Diff for: npm-packages/dashboard/.storybook/themeDecorator.tsx

@@ -43,7 +43,6 @@
     "launchdarkly-react-client-sdk": "^3.0.4",
     "lodash": "~4.17.21",
     "next": "14.2.21",
-    "next-themes": "~0.2.1",
     "nprogress": "~0.2.0",
     "prop-types": "~15.8.1",
     "react": "^18.0.0",

Diff for: npm-packages/dashboard/package.json

@@ -1,4 +1,4 @@
-import { Menu, MenuLink, Tooltip } from "dashboard-common";
+import { Menu, MenuLink, Tooltip, useTheme } from "dashboard-common";
 import {
   GearIcon,
   SunIcon,
@@ -12,7 +12,6 @@ import Image from "next/image";
 import { useCurrentTeam } from "api/teams";
 import { useCurrentProject } from "api/projects";
 import { useProfile } from "api/profile";
-import { useTheme } from "next-themes";
 import { cn } from "lib/cn";
 import startCase from "lodash/startCase";
 import { useRouter } from "next/router";

Diff for: npm-packages/dashboard/src/components/header/UserMenu/UserMenu.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "next-themes";
+import { useTheme } from "dashboard-common";
 import { Toaster } from "sonner";
 
 export function ToastContainer() {

Diff for: npm-packages/dashboard/src/elements/ToastContainer.tsx

@@ -6,7 +6,7 @@ import {
 import { useCreateSetupIntent } from "api/billing";
 import { useState, useEffect, useCallback } from "react";
 import { Team } from "generatedApi";
-import { useTheme } from "next-themes";
+import { useTheme } from "dashboard-common";
 
 const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY!);
 

Diff for: npm-packages/dashboard/src/hooks/useStripe.ts

@@ -1,7 +1,6 @@
 // eslint-disable-next-line import/no-relative-packages
 import "../../../dashboard-common/src/styles/globals.css";
 import type { AppProps } from "next/app";
-import { ThemeProvider } from "next-themes";
 import { useAuth0 } from "hooks/useAuth0";
 import { useRouter } from "next/router";
 import React, { useEffect } from "react";
@@ -30,7 +29,12 @@ import { RefreshSession } from "components/login/RefreshSession";
 import { useDashboardVersion } from "hooks/api";
 import { useProfile } from "api/profile";
 import { useGlobalLDContext, useLDContext } from "hooks/useLaunchDarklyContext";
-import { Favicon, LoadingLogo, ThemeConsumer } from "dashboard-common";
+import {
+  Favicon,
+  LoadingLogo,
+  ThemeConsumer,
+  ThemeProvider,
+} from "dashboard-common";
 import { CurrentDeploymentDashboardLayout } from "layouts/DeploymentDashboardLayout";
 import { Fallback } from "./500";
 

Diff for: npm-packages/dashboard/src/pages/_app.tsx

@@ -1,8 +1,6 @@
 import { useAuth0 } from "hooks/useAuth0";
-import { useTheme } from "next-themes";
-
-import { RadioGroup } from "@headlessui/react";
 import {
+  useTheme,
   Sheet,
   LoadingTransition,
   Button,
@@ -11,6 +9,8 @@ import {
   TextInput,
   ConfirmationDialog,
 } from "dashboard-common";
+
+import { RadioGroup } from "@headlessui/react";
 import classNames from "classnames";
 import { CheckCircledIcon } from "@radix-ui/react-icons";
 import { withAuthenticatedPage } from "lib/withAuthenticatedPage";