createTheme.js
3.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = createTheme;
var _createPalette = _interopRequireDefault(require("./createPalette"));
var _createThemeWithVars = _interopRequireDefault(require("./createThemeWithVars"));
var _createThemeNoVars = _interopRequireDefault(require("./createThemeNoVars"));
// 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: (0, _createPalette.default)({
...(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.
*/
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,
...other
} = 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 (0, _createThemeNoVars.default)(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 = (0, _createThemeNoVars.default)({
...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 (0, _createThemeWithVars.default)({
...other,
colorSchemes: colorSchemesInput,
defaultColorScheme: defaultColorSchemeInput,
...(typeof cssVariables !== 'boolean' && cssVariables)
}, ...args);
}