@lobehub/chat/src/features/ElectronTitlebar/hooks/useWatchThemeUpdate.ts

Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.

import { useWatchBroadcast } from '@lobechat/electron-client-ipc';
import { useTheme } from 'antd-style';
import { rgba } from 'polished';
import { useEffect } from 'react';

import { useElectronStore } from '@/store/electron';
import { useGlobalStore } from '@/store/global';

export const useWatchThemeUpdate = () => {
  const [isAppStateInit, systemAppearance, updateElectronAppState, isMac] = useElectronStore(
    (s) => [
      s.isAppStateInit,
      s.appState.systemAppearance,
      s.updateElectronAppState,
      s.appState.isMac,
    ],
  );
  const switchThemeMode = useGlobalStore((s) => s.switchThemeMode);

  const theme = useTheme();

  useWatchBroadcast('themeChanged', ({ themeMode }) => {
    switchThemeMode(themeMode, { skipBroadcast: true });
  });

  useWatchBroadcast('systemThemeChanged', ({ themeMode }) => {
    updateElectronAppState({ systemAppearance: themeMode });
  });

  useEffect(() => {
    if (!isAppStateInit || !isMac) return;
    document.documentElement.style.background = 'none';

    // https://x.com/alanblogsooo/status/1939208908993896684
    const isNotSameTheme = !systemAppearance ? true : theme.appearance !== systemAppearance;

    document.body.style.background = rgba(theme.colorBgLayout, isNotSameTheme ? 0.95 : 0.66);
  }, [theme, systemAppearance, isAppStateInit, isMac]);
};