UNPKG

16 kBJavaScriptView Raw
1import _extends from "@babel/runtime/helpers/esm/extends";
2import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
4import { deepmerge } from '@mui/utils';
5import { colorChannel, alpha, darken, lighten, emphasize, unstable_createGetCssVar as systemCreateGetCssVar } from '@mui/system';
6import createThemeWithoutVars from './createTheme';
7import { getOverlayAlpha } from '../Paper/Paper';
8
9var defaultDarkOverlays = _toConsumableArray(Array(25)).map(function (_, index) {
10 if (index === 0) {
11 return undefined;
12 }
13
14 var overlay = getOverlayAlpha(index);
15 return "linear-gradient(rgba(255 255 255 / ".concat(overlay, "), rgba(255 255 255 / ").concat(overlay, "))");
16});
17
18function assignNode(obj, keys) {
19 keys.forEach(function (k) {
20 if (!obj[k]) {
21 obj[k] = {};
22 }
23 });
24}
25
26function setColor(obj, key, defaultValue) {
27 obj[key] = obj[key] || defaultValue;
28}
29
30export var createGetCssVar = function createGetCssVar() {
31 var cssVarPrefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'mui';
32 return systemCreateGetCssVar(cssVarPrefix);
33};
34export default function extendTheme() {
35 var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
36
37 var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
38
39 var _options$colorSchemes = options.colorSchemes,
40 colorSchemesInput = _options$colorSchemes === void 0 ? {} : _options$colorSchemes,
41 _options$cssVarPrefix = options.cssVarPrefix,
42 cssVarPrefix = _options$cssVarPrefix === void 0 ? 'mui' : _options$cssVarPrefix,
43 input = _objectWithoutProperties(options, ["colorSchemes", "cssVarPrefix"]);
44
45 var getCssVar = createGetCssVar(cssVarPrefix);
46
47 var _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
48 palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
49 })),
50 lightPalette = _createThemeWithoutVa.palette,
51 muiTheme = _objectWithoutProperties(_createThemeWithoutVa, ["palette"]);
52
53 var _createThemeWithoutVa2 = createThemeWithoutVars({
54 palette: _extends({
55 mode: 'dark'
56 }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
57 }),
58 darkPalette = _createThemeWithoutVa2.palette;
59
60 var theme = _extends({}, muiTheme, {
61 cssVarPrefix: cssVarPrefix,
62 getCssVar: getCssVar,
63 colorSchemes: _extends({}, colorSchemesInput, {
64 light: _extends({}, colorSchemesInput.light, {
65 palette: lightPalette,
66 opacity: _extends({
67 inputPlaceholder: 0.42,
68 inputUnderline: 0.42,
69 switchTrackDisabled: 0.12,
70 switchTrack: 0.38
71 }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
72 overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
73 }),
74 dark: _extends({}, colorSchemesInput.dark, {
75 palette: darkPalette,
76 opacity: _extends({
77 inputPlaceholder: 0.5,
78 inputUnderline: 0.7,
79 switchTrackDisabled: 0.2,
80 switchTrack: 0.3
81 }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
82 overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
83 })
84 })
85 });
86
87 Object.keys(theme.colorSchemes).forEach(function (key) {
88 var palette = theme.colorSchemes[key].palette; // attach black & white channels to common node
89
90 if (key === 'light') {
91 setColor(palette.common, 'background', '#fff');
92 setColor(palette.common, 'onBackground', '#000');
93 } else {
94 setColor(palette.common, 'background', '#000');
95 setColor(palette.common, 'onBackground', '#fff');
96 } // assign component variables
97
98
99 assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
100
101 if (key === 'light') {
102 setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
103 setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
104 setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
105 setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
106 setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
107 setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
108 setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
109 setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
110 setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
111 setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
112 setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
113 setColor(palette.Alert, 'warningFilledColor', lightPalette.getContrastText(palette.warning.main));
114 setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9));
115 setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
116 setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
117 setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
118 setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
119 setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
120 setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
121 setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
122 setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
123 setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
124 setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
125 setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));
126 setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-700'));
127 setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
128 setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
129 setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
130 setColor(palette.LinearProgress, 'primaryBg', lighten(palette.primary.main, 0.62));
131 setColor(palette.LinearProgress, 'secondaryBg', lighten(palette.secondary.main, 0.62));
132 setColor(palette.LinearProgress, 'errorBg', lighten(palette.error.main, 0.62));
133 setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62));
134 setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62));
135 setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62));
136 setColor(palette.Skeleton, 'bg', "rgba(".concat(getCssVar('palette-text-primaryChannel'), " / 0.11)"));
137 setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62));
138 setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62));
139 setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62));
140 setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62));
141 setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
142 setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
143 var snackbarContentBackground = emphasize(palette.background.default, 0.8);
144 setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
145 setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
146 setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
147 setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
148 setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
149 setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
150 setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
151 setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62));
152 setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62));
153 setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62));
154 setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62));
155 setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62));
156 setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62));
157 setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
158 setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
159 } else {
160 setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
161 setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
162 setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
163 setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
164 setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
165 setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
166 setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
167 setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
168 setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
169 setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
170 setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
171 setColor(palette.Alert, 'warningFilledColor', darkPalette.getContrastText(palette.warning.dark));
172 setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9));
173 setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
174 setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
175 setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
176 setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
177 setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
178 setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
179 setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
180 setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
181 setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
182
183 setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
184
185 setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
186 setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
187 setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
188 setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-300'));
189 setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
190 setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
191 setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
192 setColor(palette.LinearProgress, 'primaryBg', darken(palette.primary.main, 0.5));
193 setColor(palette.LinearProgress, 'secondaryBg', darken(palette.secondary.main, 0.5));
194 setColor(palette.LinearProgress, 'errorBg', darken(palette.error.main, 0.5));
195 setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5));
196 setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5));
197 setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5));
198 setColor(palette.Skeleton, 'bg', "rgba(".concat(getCssVar('palette-text-primaryChannel'), " / 0.13)"));
199 setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5));
200 setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5));
201 setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));
202 setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5));
203 setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
204 setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
205
206 var _snackbarContentBackground = emphasize(palette.background.default, 0.98);
207
208 setColor(palette.SnackbarContent, 'bg', _snackbarContentBackground);
209 setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(_snackbarContentBackground));
210 setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
211 setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
212 setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
213 setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
214 setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
215 setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55));
216 setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55));
217 setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55));
218 setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55));
219 setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55));
220 setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55));
221 setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68));
222 setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
223 }
224
225 palette.common.backgroundChannel = colorChannel(palette.common.background);
226 palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
227 palette.dividerChannel = colorChannel(palette.divider);
228 Object.keys(palette).forEach(function (color) {
229 var colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
230
231 if (colors.main) {
232 palette[color].mainChannel = colorChannel(colors.main);
233 }
234
235 if (colors.light) {
236 palette[color].lightChannel = colorChannel(colors.light);
237 }
238
239 if (colors.dark) {
240 palette[color].darkChannel = colorChannel(colors.dark);
241 }
242
243 if (colors.contrastText) {
244 palette[color].contrastTextChannel = colorChannel(colors.contrastText);
245 } // Text colors: text.primary, text.secondary
246
247
248 if (colors.primary) {
249 palette[color].primaryChannel = colorChannel(colors.primary);
250 }
251
252 if (colors.secondary) {
253 palette[color].secondaryChannel = colorChannel(colors.secondary);
254 } // Action colors: action.active, action.selected
255
256
257 if (colors.active) {
258 palette[color].activeChannel = colorChannel(colors.active);
259 }
260
261 if (colors.selected) {
262 palette[color].selectedChannel = colorChannel(colors.selected);
263 }
264 });
265 });
266
267 for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
268 args[_key - 1] = arguments[_key];
269 }
270
271 theme = args.reduce(function (acc, argument) {
272 return deepmerge(acc, argument);
273 }, theme);
274 return theme;
275}
\No newline at end of file