98 lines
No EOL
3.2 KiB
JavaScript
98 lines
No EOL
3.2 KiB
JavaScript
import createPalette from "./createPalette.js";
|
|
import createThemeWithVars from "./createThemeWithVars.js";
|
|
import createThemeNoVars from "./createThemeNoVars.js";
|
|
// eslint-disable-next-line consistent-return
|
|
function attachColorScheme(theme, scheme, colorScheme) {
|
|
if (!theme.colorSchemes) {
|
|
return undefined;
|
|
}
|
|
if (colorScheme) {
|
|
theme.colorSchemes[scheme] = {
|
|
...(colorScheme !== true && colorScheme),
|
|
palette: createPalette({
|
|
...(colorScheme === true ? {} : colorScheme.palette),
|
|
mode: scheme
|
|
}) // cast type to skip module augmentation test
|
|
};
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Generate a theme base on the options received.
|
|
* @param options Takes an incomplete theme object and adds the missing parts.
|
|
* @param args Deep merge the arguments with the about to be returned theme.
|
|
* @returns A complete, ready-to-use theme object.
|
|
*/
|
|
export default function createTheme(options = {},
|
|
// cast type to skip module augmentation test
|
|
...args) {
|
|
const {
|
|
palette,
|
|
cssVariables = false,
|
|
colorSchemes: initialColorSchemes = !palette ? {
|
|
light: true
|
|
} : undefined,
|
|
defaultColorScheme: initialDefaultColorScheme = palette?.mode,
|
|
...rest
|
|
} = options;
|
|
const defaultColorSchemeInput = initialDefaultColorScheme || 'light';
|
|
const defaultScheme = initialColorSchemes?.[defaultColorSchemeInput];
|
|
const colorSchemesInput = {
|
|
...initialColorSchemes,
|
|
...(palette ? {
|
|
[defaultColorSchemeInput]: {
|
|
...(typeof defaultScheme !== 'boolean' && defaultScheme),
|
|
palette
|
|
}
|
|
} : undefined)
|
|
};
|
|
if (cssVariables === false) {
|
|
if (!('colorSchemes' in options)) {
|
|
// Behaves exactly as v5
|
|
return createThemeNoVars(options, ...args);
|
|
}
|
|
let paletteOptions = palette;
|
|
if (!('palette' in options)) {
|
|
if (colorSchemesInput[defaultColorSchemeInput]) {
|
|
if (colorSchemesInput[defaultColorSchemeInput] !== true) {
|
|
paletteOptions = colorSchemesInput[defaultColorSchemeInput].palette;
|
|
} else if (defaultColorSchemeInput === 'dark') {
|
|
// @ts-ignore to prevent the module augmentation test from failing
|
|
paletteOptions = {
|
|
mode: 'dark'
|
|
};
|
|
}
|
|
}
|
|
}
|
|
const theme = createThemeNoVars({
|
|
...options,
|
|
palette: paletteOptions
|
|
}, ...args);
|
|
theme.defaultColorScheme = defaultColorSchemeInput;
|
|
theme.colorSchemes = colorSchemesInput;
|
|
if (theme.palette.mode === 'light') {
|
|
theme.colorSchemes.light = {
|
|
...(colorSchemesInput.light !== true && colorSchemesInput.light),
|
|
palette: theme.palette
|
|
};
|
|
attachColorScheme(theme, 'dark', colorSchemesInput.dark);
|
|
}
|
|
if (theme.palette.mode === 'dark') {
|
|
theme.colorSchemes.dark = {
|
|
...(colorSchemesInput.dark !== true && colorSchemesInput.dark),
|
|
palette: theme.palette
|
|
};
|
|
attachColorScheme(theme, 'light', colorSchemesInput.light);
|
|
}
|
|
return theme;
|
|
}
|
|
if (!palette && !('light' in colorSchemesInput) && defaultColorSchemeInput === 'light') {
|
|
colorSchemesInput.light = true;
|
|
}
|
|
return createThemeWithVars({
|
|
...rest,
|
|
colorSchemes: colorSchemesInput,
|
|
defaultColorScheme: defaultColorSchemeInput,
|
|
...(typeof cssVariables !== 'boolean' && cssVariables)
|
|
}, ...args);
|
|
} |