pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
Added new theme called skyRealm
+258
-2
+2
-1
src/assets/locales/en.json
+2
-1
src/assets/locales/en.json
+5
src/pages/parts/settings/AppearancePart.tsx
+5
src/pages/parts/settings/AppearancePart.tsx
+3
-1
themes/all.ts
+3
-1
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
21
21
22
export const allThemes = [
22
23
teal,
···
38
39
hulk,
39
40
wolverine,
40
41
popsicle,
41
-
]
42
+
skyRealm,
43
+
];
+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
+
});