forked from riccardoperra/codeimage
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdark-theme.css.ts
More file actions
100 lines (89 loc) · 2.78 KB
/
dark-theme.css.ts
File metadata and controls
100 lines (89 loc) · 2.78 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
import {themeColors, themeVars} from '@codeimage/ui';
import {createTheme} from '@vanilla-extract/css';
export const darkGrayScale = {
gray1: '#111111',
gray2: '#1d1d1d',
gray3: '#232323',
gray4: '#282828',
gray5: '#2B2B2B',
gray6: '#333333',
gray7: '#3e3e3e',
gray8: '#505050',
gray9: '#707070',
gray10: '#7e7e7e',
gray11: '#a0a0a0',
gray12: '#ededed',
white: '#ffffff',
} as const;
export const darkThemeCss = createTheme(themeColors, {
primary: themeVars.backgroundColor.blue['400'],
background: darkGrayScale.gray2,
baseText: themeVars.textColor.gray['800'],
descriptionTextColor: '#999999',
secondary: themeVars.backgroundColor.gray['200'],
divider: '#252525',
panel: {
background: darkGrayScale.gray1,
textColor: darkGrayScale.white,
textColorAlt: '#CCCCCC',
},
input: {
backgroundColor: darkGrayScale.gray3,
borderColor: 'transparent',
textColor: darkGrayScale.gray12,
labelTextColor: darkGrayScale.gray12,
labelTextHintColor: darkGrayScale.gray11,
accentColor: darkGrayScale.gray8,
},
button: {
base: {
backgroundColor: darkGrayScale.gray6,
activeColor: darkGrayScale.gray8,
hoverColor: darkGrayScale.gray7,
textColor: darkGrayScale.gray12,
},
primaryAlt: {
backgroundColor: `hsla(204, 100%, 50%, 0.15)`,
hoverColor: `hsla(204, 100%, 40%, 0.15)`,
textColor: themeVars.backgroundColor.blue['500'],
},
primary: {
backgroundColor: themeVars.backgroundColor.blue['500'],
activeColor: themeVars.backgroundColor.blue['700'],
hoverColor: themeVars.backgroundColor.blue['600'],
textColor: themeVars.backgroundColor.white,
},
},
listBox: {
panelBackground: darkGrayScale.gray4, // 5
activeBackgroundColor: themeVars.backgroundColor.blue['700'], // 500
hoverBackgroundColor: darkGrayScale.gray6,
textColor: darkGrayScale.gray12,
activeTextColor: darkGrayScale.gray12,
},
dialog: {
overlayBackgroundColor: 'rgba(0,0,0,.7)',
panelBackgroundColor: darkGrayScale.gray2, // 2,
panelShadow: `0 10px 30px 0 rgba(0,0,0,.15), inset 0 0 0 1px ${darkGrayScale.gray3}`,
panelTextColor: darkGrayScale.gray12,
titleTextColor: darkGrayScale.gray12,
titleBorderColor: darkGrayScale.gray5,
},
scrollBar: {
backgroundColor: darkGrayScale.gray8,
hoverBackgroundColor: darkGrayScale.gray6,
},
snackbar: {
backgroundColor: '#1a1a1a',
textColor: themeVars.backgroundColor.white,
},
bottomBar: {
backgroundColor: darkGrayScale.gray5,
textColor: darkGrayScale.gray11,
},
resizeLineBackgroundColor: 'hsla(0,0%,100%,.25)',
resizeLineBadgeBackgroundColor: '#161515',
emptySquareBackgroundColor: '#252525',
frameDragControlBackgroundColor: `#EEEEEE`,
shortcutKeyBackgroundColor: '#555555',
});