Settings

<SettingsProvider
  defaultSettings={{
    colorScheme: 'light',
    direction: 'ltr',
    contrast: 'default',
    navLayout: 'vertical',
    primaryColor: 'default',
    navColor: 'integrate',
    compactLayout: true,
    fontFamily: defaultFont,
  }}
/>

export function createTheme() {
  const initialTheme = {
    colorSchemes,
    shadows: shadows('light'),
    customShadows: customShadows('light'),
    shape: { borderRadius: 8 },
    components,
    typography,
    cssVarPrefix: '',
    shouldSkipGeneratingVar,
  };
 
  const theme = extendTheme(initialTheme, overridesTheme);
 
  return theme;
}

export function createTheme(
  localeComponents,
) {
  const initialTheme = {
    colorSchemes,
    shadows: shadows('light'),
    customShadows: customShadows('light'),
    shape: { borderRadius: 8 },
    components,
    typography,
    cssVarPrefix: '',
    shouldSkipGeneratingVar,
  };
 
  const theme = extendTheme(
    initialTheme,
    localeComponents,
  );
 
  return theme;
}

export function createTheme(
  settings
) {
  const initialTheme = {
    colorSchemes,
    shadows: shadows(settings.colorScheme),
    customShadows: customShadows(settings.colorScheme),
    direction: settings.direction,
    shape: { borderRadius: 8 },
    components,
    typography,
    cssVarPrefix: '',
    shouldSkipGeneratingVar,
  };
 
  const updateTheme = updateCoreWithSettings(initialTheme, settings);
 
  const theme = extendTheme(
    updateTheme,
    updateComponentsWithSettings(settings),
  );
 
  return theme;
}