AntD Dark Mode with @umijs/ssr-darkreader

darkmode.tsx

import {
  disable as darkreaderDisable,
  enable as darkreaderEnable,
  setFetchMethod as setFetch,
} from '@umijs/ssr-darkreader';
import { ConfigProvider } from 'antd';

const themeConfig = {
  daybreak: '#1890ff',
  dust: '#F5222D',
  volcano: '#FA541C',
  sunset: '#FAAD14',
  cyan: '#13C2C2',
  green: '#52C41A',
  geekblue: '#2F54EB',
  purple: '#722ED1',
};
/**
 * Daybreak-> #1890ff
 *
 * @param val
 */
export function genStringToTheme(val?: string): string {
  return val && themeConfig[val] ? themeConfig[val] : val;
}

const updateTheme = async (dark: boolean, color?: string) => {
  if (typeof window === 'undefined') return;
  if (typeof window.MutationObserver === 'undefined') return;

  if (!ConfigProvider.config) return;
  ConfigProvider.config({
    theme: {
      primaryColor: genStringToTheme(color) || '#1890ff',
    },
  });

  if (dark) {
    const defaultTheme = {
      brightness: 100,
      contrast: 90,
      sepia: 0,
    };

    const defaultFixes = {
      invert: [],
      css: '',
      ignoreInlineStyle: ['.react-switch-handle'],
      ignoreImageAnalysis: [],
      disableStyleSheetsProxy: true,
    };
    if (window.MutationObserver && window.fetch) {
      setFetch(window.fetch);
      darkreaderEnable(defaultTheme, defaultFixes);
    }
  } else {
    if (window.MutationObserver) darkreaderDisable();
  }
};

export const enableDarkMode = () => {
  updateTheme(true)
}

export const disableDarkMode = () => {
  updateTheme(false)
}