Implementation:Infiniflow Ragflow ThemeProvider Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, UI_Components, Theming
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete theme provider with localStorage persistence and utility hooks for light/dark theme management provided by the RAGFlow frontend.

Description

Exports ThemeProvider (React context provider with localStorage persistence), useTheme (access current theme and setter), useIsDarkTheme (boolean check), useSwitchToDarkThemeOnMount (force dark on mount), and useSyncThemeFromParams (sync from URL params).

Usage

Wrap the application root with ThemeProvider and use the hooks in any component that needs to respond to or control the current theme.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/components/theme-provider.tsx
• Lines: 1-84

Signature

export function ThemeProvider({
  children,
  defaultTheme,
  storageKey,
}: {
  children: React.ReactNode;
  defaultTheme?: ThemeEnum;
  storageKey?: string;
}): JSX.Element;

export function useTheme(): { theme: ThemeEnum; setTheme: (t: ThemeEnum) => void };
export function useIsDarkTheme(): boolean;
export function useSwitchToDarkThemeOnMount(): void;
export function useSyncThemeFromParams(theme: string | null): void;

Import

import { ThemeProvider, useTheme, useIsDarkTheme } from '@/components/theme-provider';

I/O Contract

Inputs

Name	Type	Required	Description
defaultTheme	ThemeEnum	No	Default theme (Dark by default)
storageKey	string	No	localStorage key (default: 'vite-ui-theme')

Outputs

Name	Type	Description
useTheme()	object	Current theme and setter function
useIsDarkTheme()	boolean	True if dark theme is active

Usage Examples

import { ThemeProvider, useTheme } from '@/components/theme-provider';

// App root
<ThemeProvider defaultTheme="dark">
  <App />
</ThemeProvider>

// In component
function MyComponent() {
  const { theme, setTheme } = useTheme();
  return <button onClick={() => setTheme('light')}>Switch to Light</button>;
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment