From 122ff416ac0516331d00ec6a6831bcd74045de9b Mon Sep 17 00:00:00 2001 From: Eduardo Cruz Guedes Date: Wed, 3 Sep 2025 03:56:36 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=92=20refactor:=20Theme=20Handling=20t?= =?UTF-8?q?o=20use=20`isDark`=20Utility=20(#9405)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ 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 | 4 ++-- client/src/components/Auth/Registration.tsx | 4 ++-- client/src/hooks/ScreenshotContext.tsx | 8 ++------ package-lock.json | 2 +- packages/client/package.json | 2 +- packages/client/src/components/ThemeSelector.tsx | 6 +++--- 6 files changed, 11 insertions(+), 15 deletions(-) diff --git a/client/src/components/Auth/LoginForm.tsx b/client/src/components/Auth/LoginForm.tsx index 9916ce5653..1e0e911eb1 100644 --- a/client/src/components/Auth/LoginForm.tsx +++ b/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 = ({ 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(() => { diff --git a/client/src/components/Auth/Registration.tsx b/client/src/components/Auth/Registration.tsx index d80581a8ce..da36d21e49 100644 --- a/client/src/components/Auth/Registration.tsx +++ b/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); diff --git a/client/src/hooks/ScreenshotContext.tsx b/client/src/hooks/ScreenshotContext.tsx index 435327e571..e339f57644 100644 --- a/client/src/hooks/ScreenshotContext.tsx +++ b/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; @@ -17,11 +17,7 @@ export const useScreenshot = () => { throw new Error('You should provide correct html node.'); } - let isDark = theme === 'dark'; - if (theme === 'system') { - isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; - } - const backgroundColor = isDark ? '#171717' : 'white'; + const backgroundColor = isDark(theme) ? '#171717' : 'white'; const canvas = await toCanvas(node, { backgroundColor, diff --git a/package-lock.json b/package-lock.json index 9e7cdc62c6..510e14168e 100644 --- a/package-lock.json +++ b/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", diff --git a/packages/client/package.json b/packages/client/package.json index 4f86e4977f..855f3426dc 100644 --- a/packages/client/package.json +++ b/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", diff --git a/packages/client/src/components/ThemeSelector.tsx b/packages/client/src/components/ThemeSelector.tsx index 5954b96e78..e05baab7d5 100644 --- a/packages/client/src/components/ThemeSelector.tsx +++ b/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: , }; - 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], );