🌒 refactor: Theme Handling to use isDark Utility (#9405)

* ✨ fix: Refactor theme handling to use isDark utility across components

* 🔧 fix: Update package client version to 0.2.8 and adjust theme import path in ThemeSelector component

---------

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>

client/src/components/Auth/LoginForm.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { useForm } from 'react-hook-form';
 import { Turnstile } from '@marsidev/react-turnstile';
-import { ThemeContext, Spinner, Button } from '@librechat/client';
+import { ThemeContext, Spinner, Button, isDark } from '@librechat/client';
 import type { TLoginUser, TStartupConfig } from 'librechat-data-provider';
 import type { TAuthContext } from '~/common';
 import { useResendVerificationEmail, useGetStartupConfig } from '~/data-provider';
@@ -28,7 +28,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
 
   const { data: config } = useGetStartupConfig();
   const useUsernameLogin = config?.ldap?.username;
-  const validTheme = theme === 'dark' ? 'dark' : 'light';
+  const validTheme = isDark(theme) ? 'dark' : 'light';
   const requireCaptcha = Boolean(startupConfig.turnstile?.siteKey);
 
   useEffect(() => {

client/src/components/Auth/Registration.tsx

@@ -1,7 +1,7 @@
 import { useForm } from 'react-hook-form';
 import React, { useContext, useState } from 'react';
 import { Turnstile } from '@marsidev/react-turnstile';
-import { ThemeContext, Spinner, Button } from '@librechat/client';
+import { ThemeContext, Spinner, Button, isDark } from '@librechat/client';
 import { useNavigate, useOutletContext, useLocation } from 'react-router-dom';
 import { useRegisterUserMutation } from 'librechat-data-provider/react-query';
 import type { TRegisterUser, TError } from 'librechat-data-provider';
@@ -31,7 +31,7 @@ const Registration: React.FC = () => {
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const token = queryParams.get('token');
-  const validTheme = theme === 'dark' ? 'dark' : 'light';
+  const validTheme = isDark(theme) ? 'dark' : 'light';
 
   // only require captcha if we have a siteKey
   const requireCaptcha = Boolean(startupConfig?.turnstile?.siteKey);

client/src/hooks/ScreenshotContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useRef, useContext, RefObject } from 'react';
 import { toCanvas } from 'html-to-image';
-import { ThemeContext } from '@librechat/client';
+import { ThemeContext, isDark } from '@librechat/client';
 
 type ScreenshotContextType = {
   ref?: RefObject<HTMLDivElement>;
@@ -17,11 +17,7 @@ export const useScreenshot = () => {
       throw new Error('You should provide correct html node.');
     }
 
-    let isDark = theme === 'dark';
+    const backgroundColor = isDark(theme) ? '#171717' : 'white';
-    if (theme === 'system') {
-      isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-    const backgroundColor = isDark ? '#171717' : 'white';
 
     const canvas = await toCanvas(node, {
       backgroundColor,

package-lock.json

@@ -52067,7 +52067,7 @@
     },
     "packages/client": {
       "name": "@librechat/client",
-      "version": "0.2.7",
+      "version": "0.2.8",
       "devDependencies": {
         "@rollup/plugin-alias": "^5.1.0",
         "@rollup/plugin-commonjs": "^25.0.2",

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@librechat/client",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "React components for LibreChat",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

packages/client/src/components/ThemeSelector.tsx

@@ -1,6 +1,6 @@
 import { useContext, useCallback, useEffect, useState } from 'react';
 import { Sun, Moon, Monitor } from 'lucide-react';
-import { ThemeContext } from '../theme';
+import { ThemeContext, isDark } from '../theme';
 
 declare global {
   interface Window {
@@ -17,7 +17,7 @@ const Theme = ({ theme, onChange }: { theme: string; onChange: (value: string) =
     light: <Sun />,
   };
 
-  const nextTheme = theme === 'dark' ? 'light' : 'dark';
+  const nextTheme = isDark(theme) ? 'light' : 'dark';
   const label = `Switch to ${nextTheme} theme`;
 
   useEffect(() => {
@@ -65,7 +65,7 @@ const ThemeSelector = ({ returnThemeOnly }: { returnThemeOnly?: boolean }) => {
       window.lastThemeChange = now;
 
       setTheme(value);
-      setAnnouncement(value === 'dark' ? 'Dark theme enabled' : 'Light theme enabled');
+      setAnnouncement(isDark(value) ? 'Dark theme enabled' : 'Light theme enabled');
     },
     [setTheme],
   );