pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
add cobalt theme
replace skyrealm
+340
-256
+1
-1
src/assets/locales/en.json
+1
-1
src/assets/locales/en.json
+5
-5
src/pages/parts/settings/AppearancePart.tsx
+5
-5
src/pages/parts/settings/AppearancePart.tsx
···
96
96
key: "settings.appearance.themes.spark",
97
97
},
98
98
{
99
+
id: "cobalt",
100
+
selector: "theme-cobalt",
101
+
key: "settings.appearance.themes.cobalt",
102
+
},
103
+
{
99
104
id: "grape",
100
105
selector: "theme-grape",
101
106
key: "settings.appearance.themes.grape",
···
124
129
id: "christmas",
125
130
selector: "theme-christmas",
126
131
key: "settings.appearance.themes.christmas",
127
-
},
128
-
{
129
-
id: "skyRealm",
130
-
selector: "theme-skyrealm",
131
-
key: "settings.appearance.themes.skyrealm",
132
132
},
133
133
];
134
134
+2
-2
themes/all.ts
+2
-2
themes/all.ts
···
17
17
import popsicle from "./list/popsicle";
18
18
import hulk from "./list/hulk";
19
19
import autumn from "./list/autumn";
20
-
import skyRealm from "./list/skyrealm";
20
+
import cobalt from "./list/cobalt";
21
21
import frost from "./list/frost";
22
22
import christmas from "./list/christmas";
23
23
···
43
43
wolverine,
44
44
popsicle,
45
45
christmas,
46
-
skyRealm,
46
+
cobalt,
47
47
];
+332
themes/list/cobalt.ts
+332
themes/list/cobalt.ts
···
1
+
import { createTheme } from "../types";
2
+
3
+
const tokens = {
4
+
black: {
5
+
c50: "#000000",
6
+
c75: "#030303",
7
+
c80: "#080808",
8
+
c100: "#0d0d0d",
9
+
c125: "#141414",
10
+
c150: "#1a1a1a",
11
+
c200: "#262626",
12
+
c250: "#333333",
13
+
},
14
+
white: "#FFFFFF",
15
+
semantic: {
16
+
red: {
17
+
c100: "#F46E6E",
18
+
c200: "#E44F4F",
19
+
c300: "#D74747",
20
+
c400: "#B43434",
21
+
},
22
+
green: {
23
+
c100: "#60D26A",
24
+
c200: "#40B44B",
25
+
c300: "#31A33C",
26
+
c400: "#237A2B",
27
+
},
28
+
silver: {
29
+
c100: "#DEDEDE",
30
+
c200: "#B6CAD7",
31
+
c300: "#8EA3B0",
32
+
c400: "#617A8A",
33
+
},
34
+
yellow: {
35
+
c100: "#80EAFF",
36
+
c200: "#43DFFF",
37
+
c300: "#00D4FF",
38
+
c400: "#00B6E6",
39
+
},
40
+
rose: {
41
+
c100: "#80EAFF",
42
+
c200: "#00B6E6",
43
+
c300: "#00D4FF",
44
+
c400: "#43DFFF",
45
+
},
46
+
},
47
+
blue: {
48
+
c50: "#ccccd6",
49
+
c100: "#a2a2a2",
50
+
c200: "#868686",
51
+
c300: "#646464",
52
+
c400: "#4e4e4e",
53
+
c500: "#383838",
54
+
c600: "#2e2e2e",
55
+
c700: "#272727",
56
+
c800: "#181818",
57
+
c900: "#0f0f0f",
58
+
},
59
+
purple: {
60
+
c50: "#80EAFF",
61
+
c100: "#43DFFF",
62
+
c200: "#00D4FF",
63
+
c300: "#00B6E6",
64
+
c400: "#0099CC",
65
+
c500: "#007CAD",
66
+
c600: "#00668F",
67
+
c700: "#004F6E",
68
+
c800: "#00384D",
69
+
c900: "#002A3A",
70
+
},
71
+
ash: {
72
+
c50: "#8d8d8d",
73
+
c100: "#6b6b6b",
74
+
c200: "#545454",
75
+
c300: "#3c3c3c",
76
+
c400: "#313131",
77
+
c500: "#2c2c2c",
78
+
c600: "#252525",
79
+
c700: "#1e1e1e",
80
+
c800: "#181818",
81
+
c900: "#111111",
82
+
},
83
+
shade: {
84
+
c25: "#939393",
85
+
c50: "#7c7c7c",
86
+
c100: "#666666",
87
+
c200: "#4f4f4f",
88
+
c300: "#404040",
89
+
c400: "#343434",
90
+
c500: "#282828",
91
+
c600: "#202020",
92
+
c700: "#1a1a1a",
93
+
c800: "#151515",
94
+
c900: "#0e0e0e",
95
+
},
96
+
};
97
+
98
+
export default createTheme({
99
+
name: "cobalt",
100
+
extend: {
101
+
colors: {
102
+
themePreview: {
103
+
primary: tokens.black.c80,
104
+
secondary: tokens.purple.c400,
105
+
ghost: tokens.purple.c100,
106
+
},
107
+
108
+
pill: {
109
+
background: tokens.black.c100,
110
+
backgroundHover: tokens.black.c125,
111
+
highlight: tokens.blue.c200,
112
+
activeBackground: tokens.shade.c700,
113
+
},
114
+
115
+
global: {
116
+
accentA: tokens.purple.c200,
117
+
accentB: tokens.purple.c300,
118
+
},
119
+
120
+
lightBar: {
121
+
light: tokens.purple.c800,
122
+
},
123
+
124
+
buttons: {
125
+
toggle: tokens.purple.c300,
126
+
toggleDisabled: tokens.black.c200,
127
+
danger: tokens.semantic.rose.c300,
128
+
dangerHover: tokens.semantic.rose.c200,
129
+
130
+
secondary: tokens.black.c100,
131
+
secondaryText: tokens.semantic.silver.c300,
132
+
secondaryHover: tokens.black.c150,
133
+
primary: tokens.white,
134
+
primaryText: tokens.black.c50,
135
+
primaryHover: tokens.semantic.silver.c100,
136
+
purple: tokens.purple.c600,
137
+
purpleHover: tokens.purple.c400,
138
+
cancel: tokens.black.c100,
139
+
cancelHover: tokens.black.c150,
140
+
},
141
+
142
+
background: {
143
+
main: tokens.black.c75,
144
+
secondary: tokens.black.c75,
145
+
secondaryHover: tokens.black.c75,
146
+
accentA: tokens.purple.c600,
147
+
accentB: tokens.black.c100,
148
+
},
149
+
150
+
modal: {
151
+
background: tokens.shade.c800,
152
+
},
153
+
154
+
type: {
155
+
logo: tokens.purple.c100,
156
+
emphasis: tokens.white,
157
+
text: tokens.shade.c50,
158
+
dimmed: tokens.shade.c50,
159
+
divider: tokens.ash.c500,
160
+
secondary: tokens.ash.c100,
161
+
danger: tokens.semantic.red.c100,
162
+
success: tokens.semantic.green.c100,
163
+
link: tokens.purple.c100,
164
+
linkHover: tokens.purple.c50,
165
+
},
166
+
167
+
search: {
168
+
background: tokens.black.c100,
169
+
hoverBackground: tokens.shade.c900,
170
+
focused: tokens.black.c125,
171
+
placeholder: tokens.shade.c200,
172
+
icon: tokens.shade.c500,
173
+
text: tokens.white,
174
+
},
175
+
176
+
mediaCard: {
177
+
hoverBackground: tokens.shade.c900,
178
+
hoverAccent: tokens.black.c250,
179
+
hoverShadow: tokens.black.c50,
180
+
shadow: tokens.shade.c800,
181
+
barColor: tokens.ash.c200,
182
+
barFillColor: tokens.purple.c100,
183
+
badge: tokens.shade.c700,
184
+
badgeText: tokens.ash.c100,
185
+
},
186
+
187
+
largeCard: {
188
+
background: tokens.black.c100,
189
+
icon: tokens.purple.c400,
190
+
},
191
+
192
+
dropdown: {
193
+
background: tokens.black.c100,
194
+
altBackground: tokens.black.c80,
195
+
hoverBackground: tokens.black.c150,
196
+
highlight: tokens.semantic.yellow.c400,
197
+
highlightHover: tokens.semantic.yellow.c200,
198
+
text: tokens.shade.c50,
199
+
secondary: tokens.shade.c100,
200
+
border: tokens.shade.c400,
201
+
contentBackground: tokens.black.c50,
202
+
},
203
+
204
+
authentication: {
205
+
border: tokens.shade.c300,
206
+
inputBg: tokens.black.c100,
207
+
inputBgHover: tokens.black.c150,
208
+
wordBackground: tokens.shade.c500,
209
+
copyText: tokens.shade.c100,
210
+
copyTextHover: tokens.ash.c50,
211
+
errorText: tokens.semantic.rose.c100,
212
+
},
213
+
214
+
settings: {
215
+
sidebar: {
216
+
activeLink: tokens.black.c100,
217
+
badge: tokens.shade.c900,
218
+
219
+
type: {
220
+
secondary: tokens.shade.c200,
221
+
inactive: tokens.shade.c50,
222
+
icon: tokens.black.c200,
223
+
iconActivated: tokens.purple.c200,
224
+
activated: tokens.purple.c100,
225
+
},
226
+
},
227
+
228
+
card: {
229
+
border: tokens.shade.c700,
230
+
background: tokens.black.c100,
231
+
altBackground: tokens.black.c100,
232
+
},
233
+
234
+
saveBar: {
235
+
background: tokens.black.c50,
236
+
},
237
+
},
238
+
239
+
utils: {
240
+
divider: tokens.ash.c300,
241
+
},
242
+
243
+
onboarding: {
244
+
bar: tokens.shade.c400,
245
+
barFilled: tokens.purple.c300,
246
+
divider: tokens.shade.c200,
247
+
card: tokens.shade.c800,
248
+
cardHover: tokens.shade.c700,
249
+
border: tokens.shade.c600,
250
+
good: tokens.purple.c100,
251
+
best: tokens.semantic.yellow.c100,
252
+
link: tokens.purple.c100,
253
+
},
254
+
255
+
errors: {
256
+
card: tokens.black.c75,
257
+
border: tokens.ash.c500,
258
+
259
+
type: {
260
+
secondary: tokens.ash.c100,
261
+
},
262
+
},
263
+
264
+
about: {
265
+
circle: tokens.black.c100,
266
+
circleText: tokens.ash.c50,
267
+
},
268
+
269
+
editBadge: {
270
+
bg: tokens.ash.c500,
271
+
bgHover: tokens.ash.c400,
272
+
text: tokens.ash.c50,
273
+
},
274
+
275
+
progress: {
276
+
background: tokens.ash.c50,
277
+
preloaded: tokens.ash.c50,
278
+
filled: tokens.purple.c200,
279
+
},
280
+
281
+
video: {
282
+
buttonBackground: tokens.ash.c600,
283
+
284
+
autoPlay: {
285
+
background: tokens.ash.c800,
286
+
hover: tokens.ash.c600,
287
+
},
288
+
289
+
scraping: {
290
+
card: tokens.black.c50,
291
+
error: tokens.semantic.red.c200,
292
+
success: tokens.semantic.green.c200,
293
+
loading: tokens.purple.c200,
294
+
noresult: tokens.black.c200,
295
+
},
296
+
297
+
audio: {
298
+
set: tokens.purple.c200,
299
+
},
300
+
301
+
context: {
302
+
background: tokens.black.c50,
303
+
light: tokens.shade.c50,
304
+
border: tokens.ash.c600,
305
+
hoverColor: tokens.ash.c600,
306
+
buttonFocus: tokens.ash.c500,
307
+
flagBg: tokens.ash.c500,
308
+
inputBg: tokens.black.c100,
309
+
buttonOverInputHover: tokens.ash.c500,
310
+
inputPlaceholder: tokens.ash.c200,
311
+
cardBorder: tokens.ash.c700,
312
+
slider: tokens.black.c200,
313
+
sliderFilled: tokens.purple.c200,
314
+
error: tokens.semantic.red.c200,
315
+
316
+
buttons: {
317
+
list: tokens.ash.c700,
318
+
active: tokens.ash.c900,
319
+
},
320
+
321
+
closeHover: tokens.ash.c800,
322
+
323
+
type: {
324
+
main: tokens.semantic.silver.c300,
325
+
secondary: tokens.ash.c200,
326
+
accent: tokens.purple.c200,
327
+
},
328
+
},
329
+
},
330
+
},
331
+
},
332
+
});
-248
themes/list/skyrealm.ts
-248
themes/list/skyrealm.ts
···
1
-
import { createTheme } from "../types";
2
-
3
-
const tokens = {
4
-
petal: {
5
-
c50: "#fff0f5",
6
-
c100: "#ffdde9",
7
-
c200: "#ffbbd1",
8
-
c300: "#ff99bb",
9
-
c400: "#ff77a5",
10
-
c500: "#e65f8f",
11
-
c600: "#cc4779",
12
-
c700: "#b33263",
13
-
c800: "#991e4d",
14
-
c900: "#800f3a",
15
-
},
16
-
dawn: {
17
-
c25: "#f0e9f5",
18
-
c50: "#e6d9f0",
19
-
c100: "#d7c2e8",
20
-
c200: "#c2a6dd",
21
-
c300: "#ad8ad2",
22
-
c400: "#9970c7",
23
-
c500: "#8558b5",
24
-
c600: "#6b4599",
25
-
c700: "#52337d",
26
-
c800: "#3a2361",
27
-
c900: "#261547",
28
-
},
29
-
silk: {
30
-
c50: "#fdfdfd",
31
-
c100: "#faf8f9",
32
-
c200: "#f5f0f3",
33
-
c300: "#ede5ec",
34
-
c400: "#e6dae5",
35
-
c500: "#dfd0de",
36
-
c600: "#d0b8d0",
37
-
c700: "#c29fc2",
38
-
c800: "#b386b3",
39
-
c900: "#a66ea6",
40
-
},
41
-
nectar: {
42
-
c50: "#fff9e6",
43
-
c100: "#fff3cc",
44
-
c200: "#ffe899",
45
-
c300: "#ffdd66",
46
-
c400: "#ffd233",
47
-
c500: "#e6b800",
48
-
c600: "#cca000",
49
-
c700: "#b38900",
50
-
c800: "#997100",
51
-
c900: "#805a00",
52
-
},
53
-
};
54
-
55
-
export default createTheme({
56
-
name: "skyRealm",
57
-
extend: {
58
-
colors: {
59
-
themePreview: {
60
-
primary: tokens.petal.c200,
61
-
secondary: tokens.dawn.c50,
62
-
},
63
-
64
-
pill: {
65
-
background: tokens.dawn.c300,
66
-
backgroundHover: tokens.dawn.c200,
67
-
highlight: tokens.petal.c200,
68
-
activeBackground: tokens.dawn.c300,
69
-
},
70
-
71
-
global: {
72
-
accentA: tokens.petal.c200,
73
-
accentB: tokens.petal.c300,
74
-
},
75
-
76
-
lightBar: {
77
-
light: tokens.petal.c400,
78
-
},
79
-
80
-
buttons: {
81
-
toggle: tokens.nectar.c300,
82
-
toggleDisabled: tokens.silk.c500,
83
-
84
-
secondary: tokens.silk.c700,
85
-
secondaryHover: tokens.silk.c600,
86
-
purple: tokens.dawn.c500,
87
-
purpleHover: tokens.dawn.c400,
88
-
cancel: tokens.silk.c500,
89
-
cancelHover: tokens.silk.c300,
90
-
},
91
-
92
-
background: {
93
-
main: tokens.dawn.c900,
94
-
secondary: tokens.dawn.c600,
95
-
secondaryHover: tokens.dawn.c400,
96
-
accentA: tokens.nectar.c500,
97
-
accentB: tokens.petal.c500,
98
-
},
99
-
100
-
modal: {
101
-
background: tokens.dawn.c800,
102
-
},
103
-
104
-
type: {
105
-
logo: tokens.nectar.c100,
106
-
text: tokens.silk.c50,
107
-
dimmed: tokens.silk.c50,
108
-
divider: tokens.silk.c500,
109
-
secondary: tokens.silk.c100,
110
-
link: tokens.petal.c100,
111
-
linkHover: tokens.petal.c50,
112
-
},
113
-
114
-
search: {
115
-
background: tokens.dawn.c500,
116
-
hoverBackground: tokens.dawn.c600,
117
-
focused: tokens.dawn.c400,
118
-
placeholder: tokens.dawn.c100,
119
-
icon: tokens.dawn.c100,
120
-
},
121
-
122
-
mediaCard: {
123
-
hoverBackground: tokens.dawn.c600,
124
-
hoverAccent: tokens.dawn.c25,
125
-
hoverShadow: tokens.dawn.c900,
126
-
shadow: tokens.dawn.c700,
127
-
barColor: tokens.silk.c200,
128
-
barFillColor: tokens.petal.c100,
129
-
badge: tokens.dawn.c700,
130
-
badgeText: tokens.silk.c100,
131
-
},
132
-
133
-
largeCard: {
134
-
background: tokens.dawn.c600,
135
-
icon: tokens.petal.c400,
136
-
},
137
-
138
-
dropdown: {
139
-
background: tokens.dawn.c600,
140
-
altBackground: tokens.dawn.c700,
141
-
hoverBackground: tokens.dawn.c500,
142
-
text: tokens.silk.c50,
143
-
secondary: tokens.dawn.c100,
144
-
border: tokens.dawn.c400,
145
-
contentBackground: tokens.dawn.c500,
146
-
},
147
-
148
-
authentication: {
149
-
border: tokens.dawn.c300,
150
-
inputBg: tokens.dawn.c600,
151
-
inputBgHover: tokens.dawn.c500,
152
-
wordBackground: tokens.dawn.c500,
153
-
copyText: tokens.dawn.c100,
154
-
copyTextHover: tokens.silk.c50,
155
-
},
156
-
157
-
settings: {
158
-
sidebar: {
159
-
activeLink: tokens.dawn.c600,
160
-
badge: tokens.dawn.c900,
161
-
type: {
162
-
secondary: tokens.dawn.c200,
163
-
inactive: tokens.dawn.c50,
164
-
icon: tokens.dawn.c50,
165
-
iconActivated: tokens.petal.c200,
166
-
activated: tokens.petal.c50,
167
-
},
168
-
},
169
-
card: {
170
-
border: tokens.dawn.c400,
171
-
background: tokens.dawn.c400,
172
-
altBackground: tokens.dawn.c400,
173
-
},
174
-
saveBar: {
175
-
background: tokens.dawn.c800,
176
-
},
177
-
},
178
-
179
-
utils: {
180
-
divider: tokens.silk.c300,
181
-
},
182
-
183
-
errors: {
184
-
card: tokens.dawn.c800,
185
-
border: tokens.silk.c500,
186
-
type: {
187
-
secondary: tokens.silk.c100,
188
-
},
189
-
},
190
-
191
-
about: {
192
-
circle: tokens.silk.c500,
193
-
circleText: tokens.silk.c50,
194
-
},
195
-
196
-
editBadge: {
197
-
bg: tokens.silk.c500,
198
-
bgHover: tokens.silk.c400,
199
-
text: tokens.silk.c50,
200
-
},
201
-
202
-
progress: {
203
-
background: tokens.silk.c50,
204
-
preloaded: tokens.silk.c50,
205
-
filled: tokens.petal.c200,
206
-
},
207
-
208
-
video: {
209
-
buttonBackground: tokens.silk.c200,
210
-
autoPlay: {
211
-
background: tokens.silk.c700,
212
-
hover: tokens.silk.c500,
213
-
},
214
-
scraping: {
215
-
card: tokens.dawn.c700,
216
-
loading: tokens.petal.c200,
217
-
noresult: tokens.silk.c100,
218
-
},
219
-
audio: {
220
-
set: tokens.petal.c200,
221
-
},
222
-
context: {
223
-
background: tokens.silk.c900,
224
-
light: tokens.dawn.c50,
225
-
border: tokens.silk.c600,
226
-
hoverColor: tokens.silk.c600,
227
-
buttonFocus: tokens.silk.c500,
228
-
flagBg: tokens.silk.c500,
229
-
inputBg: tokens.silk.c600,
230
-
buttonOverInputHover: tokens.silk.c500,
231
-
inputPlaceholder: tokens.silk.c200,
232
-
cardBorder: tokens.silk.c700,
233
-
slider: tokens.silk.c50,
234
-
sliderFilled: tokens.petal.c200,
235
-
buttons: {
236
-
list: tokens.silk.c700,
237
-
active: tokens.silk.c900,
238
-
},
239
-
closeHover: tokens.silk.c800,
240
-
type: {
241
-
secondary: tokens.silk.c200,
242
-
accent: tokens.petal.c200,
243
-
},
244
-
},
245
-
},
246
-
},
247
-
},
248
-
});