Configuration & Theming

/**
 * Global configuration provider
 * @param props - Configuration settings
 * @returns React configuration provider element
 */
function ConfigProvider(props: ConfigProviderProps): JSX.Element;

interface ConfigProviderProps {
  /** Locale configuration */
  locale?: Locale;
  /** Component theme configuration */
  theme?: 'light' | 'dark' | Theme;
  /** Provider content */
  children?: React.ReactNode;
}

interface Theme {
  /** Primary color */
  '--adm-color-primary'?: string;
  /** Color variables */
  '--adm-color-success'?: string;
  '--adm-color-warning'?: string;
  '--adm-color-danger'?: string;
  /** Text colors */  
  '--adm-color-text'?: string;
  '--adm-color-text-secondary'?: string;
  /** Background colors */
  '--adm-color-background'?: string;
  '--adm-color-border'?: string;
  /** Font settings */
  '--adm-font-size-main'?: string;
  '--adm-font-family'?: string;
}

interface Locale {
  locale: string;
  common: {
    confirm: string;
    cancel: string;
    loading: string;
    close: string;
  };
  Calendar: {
    markItems: string[];
    renderYearAndMonth: (year: number, month: number) => string;
  };
  Cascader: {
    placeholder: string;
  };
  Dialog: {
    ok: string;
  };
  DatePicker: {
    tillNow: string;
  };
  ErrorBlock: {
    default: {
      title: string;
      description: string;
    };
    busy: {
      title: string;
      description: string;
    };
    disconnected: {
      title: string;
      description: string;
    };
    empty: {
      title: string;
      description: string;
    };
  };
  Form: {
    required: string;
    optional: string;
  };
  ImageUploader: {
    uploading: string;
    upload: string;
  };
  InfiniteScroll: {
    noMore: string;
  };
  Input: {
    clear: string;
  };
  Mask: {
    name: string;
  };
  Modal: {
    ok: string;
  };
  PasscodeInput: {
    name: string;
  };
  PullToRefresh: {
    pulling: string;
    canRelease: string;
    refreshing: string;
    complete: string;
  };
  SearchBar: {
    name: string;
  };
  Slider: {
    name: string;
  };
  Stepper: {
    decrease: string;
    increase: string;
  };
}

/**
 * Hook to access current configuration
 * @returns Current configuration object
 */
function useConfig(): ConfigProviderProps;

/**
 * Set global default configuration
 * @param config - Configuration object to set as defaults
 */
function setDefaultConfig(config: Config): void;

interface Config {
  locale?: Locale;
  theme?: Theme;
}

/**
 * Disable all animations globally
 * Useful for accessibility or performance optimization
 */
function reduceMotion(): void;

/**
 * Restore all animations globally
 * Re-enables animations after they were disabled
 */
function restoreMotion(): void;

// Common CSS variables available for customization
interface CSSVariables {
  // Color system
  '--adm-color-primary': string;
  '--adm-color-success': string;
  '--adm-color-warning': string;
  '--adm-color-danger': string;
  '--adm-color-white': string;
  '--adm-color-weak': string;
  '--adm-color-light': string;
  '--adm-color-border': string;
  '--adm-color-box': string;
  '--adm-color-text': string;
  '--adm-color-text-secondary': string;
  '--adm-color-background': string;
  
  // Typography
  '--adm-font-size-1': string;
  '--adm-font-size-2': string;
  '--adm-font-size-3': string;
  '--adm-font-size-4': string;
  '--adm-font-size-5': string;
  '--adm-font-size-6': string;
  '--adm-font-size-7': string;
  '--adm-font-size-8': string;
  '--adm-font-size-9': string;
  '--adm-font-size-10': string;
  '--adm-font-family': string;
  '--adm-font-weight-light': string;
  '--adm-font-weight-normal': string;
  '--adm-font-weight-bold': string;
  
  // Spacing
  '--adm-space-1': string;
  '--adm-space-2': string;
  '--adm-space-3': string;
  '--adm-space-4': string;
  '--adm-space-5': string;
  
  // Border radius
  '--adm-border-radius-xs': string;
  '--adm-border-radius-sm': string;
  '--adm-border-radius-md': string;
  '--adm-border-radius-lg': string;
  '--adm-border-radius-xl': string;
}

import { 
  ConfigProvider, 
  useConfig, 
  setDefaultConfig,
  reduceMotion,
  restoreMotion 
} from "antd-mobile";

// Global configuration
setDefaultConfig({
  theme: {
    '--adm-color-primary': '#1677ff',
    '--adm-font-family': 'Inter, system-ui'
  }
});

function App() {
  const customTheme = {
    '--adm-color-primary': '#00b96b',
    '--adm-color-text': '#000000'
  };

  return (
    <ConfigProvider theme={customTheme} locale={enUS}>
      <YourApp />
    </ConfigProvider>
  );
}

// Component using configuration
function CustomComponent() {
  const config = useConfig();
  
  return (
    <div style={{
      color: 'var(--adm-color-primary)',
      fontFamily: 'var(--adm-font-family)'
    }}>
      Themed content
    </div>
  );
}

// Motion control
function AccessibilitySettings() {
  const handleReduceMotion = () => {
    reduceMotion();
  };

  const handleRestoreMotion = () => {
    restoreMotion();
  };

  return (
    <div>
      <Button onClick={handleReduceMotion}>
        Disable Animations
      </Button>
      <Button onClick={handleRestoreMotion}>
        Enable Animations
      </Button>
    </div>
  );
}

// CSS Variable Theming
const darkTheme = {
  '--adm-color-background': '#000000',
  '--adm-color-text': '#ffffff',
  '--adm-color-border': '#333333'
};

function ThemedApp() {
  const [isDark, setIsDark] = useState(false);

  return (
    <ConfigProvider theme={isDark ? darkTheme : undefined}>
      <Button onClick={() => setIsDark(!isDark)}>
        Toggle Theme
      </Button>
      <div>Content with theme applied</div>
    </ConfigProvider>
  );
}

import { 
  ConfigProvider,
  zhCN,
  enUS,
  esES,
  frFR,
  jaJP,
  koKR
} from "antd-mobile";

// Available locales
const locales = {
  'zh-CN': zhCN,
  'en-US': enUS,
  'es-ES': esES,
  'fr-FR': frFR,
  'ja-JP': jaJP,
  'ko-KR': koKR
};

function LocalizedApp({ locale = 'en-US' }) {
  return (
    <ConfigProvider locale={locales[locale]}>
      <App />
    </ConfigProvider>
  );
}