1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | const _excluded = ["colorSchemes", "cssVarPrefix"],
|
4 | _excluded2 = ["palette"];
|
5 | import { deepmerge } from '@mui/utils';
|
6 | import { colorChannel, alpha, darken, lighten, emphasize, unstable_createGetCssVar as systemCreateGetCssVar } from '@mui/system';
|
7 | import createThemeWithoutVars from './createTheme';
|
8 | import { getOverlayAlpha } from '../Paper/Paper';
|
9 | const 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 |
|
18 | function assignNode(obj, keys) {
|
19 | keys.forEach(k => {
|
20 | if (!obj[k]) {
|
21 | obj[k] = {};
|
22 | }
|
23 | });
|
24 | }
|
25 |
|
26 | function setColor(obj, key, defaultValue) {
|
27 | obj[key] = obj[key] || defaultValue;
|
28 | }
|
29 |
|
30 | export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
|
31 | export 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;
|
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 | }
|
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'));
|
178 |
|
179 | setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary'));
|
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];
|
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 | }
|
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 | }
|
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 |