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
|
import {
createTheme,
responsiveFontSizes,
type ThemeOptions,
ThemeProvider as MaterialUiThemeProvider,
} from '@mui/material/styles';
import { observer } from 'mobx-react-lite';
import React, { type CSSProperties, type ReactNode } from 'react';
import { useRootStore } from '../RootStore';
import EditorTheme from './EditorTheme';
interface HighlightStyles {
number: CSSProperties['color'];
parameter: CSSProperties['color'];
occurences: {
read: CSSProperties['color'];
write: CSSProperties['color'];
};
}
declare module '@mui/material/styles' {
interface Palette {
selection: Palette['primary'];
highlight: HighlightStyles;
}
interface PaletteOptions {
selection: PaletteOptions['primary'];
highlight: HighlightStyles;
}
}
function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions {
switch (currentTheme) {
case EditorTheme.Light:
return {
palette: {
mode: 'light',
primary: { main: '#0097a7' },
selection: {
main: '#c8e4fb',
contrastText: '#000',
},
highlight: {
number: '#1976d2',
parameter: '#6a3e3e',
occurences: {
read: '#ceccf7',
write: '#f0d8a8',
},
},
},
};
case EditorTheme.Dark:
return {
palette: {
mode: 'dark',
primary: { main: '#56b6c2' },
selection: {
main: '#3e4453',
contrastText: '#fff',
},
highlight: {
number: '#6188a6',
parameter: '#c8ae9d',
occurences: {
read: 'rgba(255, 255, 255, 0.15)',
write: 'rgba(255, 255, 128, 0.4)',
},
},
},
};
default:
throw new Error(`Unknown theme: ${currentTheme}`);
}
}
function ThemeProvider({ children }: { children?: ReactNode }) {
const {
themeStore: { currentTheme },
} = useRootStore();
const themeOptions = getMUIThemeOptions(currentTheme);
const theme = responsiveFontSizes(createTheme(themeOptions));
return (
<MaterialUiThemeProvider theme={theme}>{children}</MaterialUiThemeProvider>
);
}
ThemeProvider.defaultProps = {
children: undefined,
};
export default observer(ThemeProvider);
|
