UNPKG

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