Skip to content

Commit 6acaeb4

Browse files
authored
feat(theme): add Vesper theme (@SameerJS6) (monkeytypegame#6443)
### Description Adds Vesper theme. Based on Vesper for VSCode theme from [Rauno Freiberg](https://github.com/raunofreiberg/vesper) <!-- Please describe the change(s) made in your PR --> ### Checks - [ ] Adding quotes? - [ ] Make sure to include translations for the quotes in the description (or another comment) so we can verify their content. - [x] Adding a language or a theme? - [ ] If is a language, did you edit `_list.json`, `_groups.json` and add `languages.json`? - [x] If is a theme, did you add the theme.css? - Also please add a screenshot of the theme, it would be extra awesome if you do so! - [x] Check if any open issues are related to this PR; if so, be sure to tag them below. - [x] Make sure the PR title follows the Conventional Commits standard. (https://www.conventionalcommits.org for more info) - [x] Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title. <!-- label(optional scope): pull request title (@your_github_username) --> <!-- I know I know they seem boring but please do them, they help us and you will find out it also helps you.--> ## Preview ### Main Page: ![vesper-monkey-type](https://github.com/user-attachments/assets/4d1f7ac0-b139-42e9-b588-e3e9edeae809) ### Settings Page: ![vesper monkey type settings](https://github.com/user-attachments/assets/274a7551-5555-483e-85c3-efd47797edac) ### Toasts: #### Error Toast: ![image](https://github.com/user-attachments/assets/8cdc4d20-08b7-4c82-94aa-a3ee55fd779e) #### Info Toast: ![image](https://github.com/user-attachments/assets/0b40e90d-cd23-4248-b39a-ad3340e46d32) #### Success Toast: ![image](https://github.com/user-attachments/assets/405d010f-e790-4a32-97d2-2a051b85ec0e) <!-- the issue(s) your PR resolves if any (delete if that is not the case) --> <!-- please also reference any issues and or PRs related to your pull request --> <!-- Also remove it if you are not following any issues. --> <!-- pro tip: you can mention an issue, PR, or discussion on GitHub by referencing its hash number e.g: [monkeytypegame#1234](monkeytypegame#1234) --> <!-- pro tip: you can press . (dot or period) in the code tab of any GitHub repo to get access to GitHub's VS Code web editor Enjoy! :) -->
1 parent 644c59c commit 6acaeb4

File tree

2 files changed

+60
-0
lines changed

2 files changed

+60
-0
lines changed

frontend/static/themes/_list.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,13 @@
5555
"subColor": "#616161",
5656
"textColor": "#f5e6c8"
5757
},
58+
{
59+
"name": "vesper",
60+
"bgColor": "#101010",
61+
"mainColor": "#ffc799",
62+
"subColor": "#99ffe4",
63+
"textColor": "#ffffff"
64+
},
5865
{
5966
"name": "our_theme",
6067
"bgColor": "#ce1226",

frontend/static/themes/vesper.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
:root {
2+
--bg-color: #101010;
3+
--main-color: #ffc799;
4+
--caret-color: #99ffe4;
5+
--sub-color: #a0a0a0;
6+
--sub-alt-color: #1c1c1c;
7+
--text-color: #ffffff;
8+
--error-color: #ff8080;
9+
--error-extra-color: #b25959;
10+
--colorful-error-color: #99ffe4;
11+
--colorful-error-extra-color: #99ffe4;
12+
}
13+
14+
/* Background & Text Colors */
15+
#notificationCenter .notif.bad {
16+
--notif-border-color: #b25959;
17+
--notif-background-color: #ff8080;
18+
}
19+
20+
#notificationCenter .notif.good {
21+
--notif-border-color: #99ffe4;
22+
--notif-background-color: #99ffe4;
23+
}
24+
25+
#notificationCenter .notif.notice {
26+
--notif-border-color: #afdbf5;
27+
--notif-background-color: #afdbf5;
28+
}
29+
30+
/* Hover Styles */
31+
#notificationCenter .notif:hover.good {
32+
--notif-background-color: #6bb29f;
33+
}
34+
#notificationCenter .notif:hover.bad {
35+
--notif-background-color: #8b4444;
36+
}
37+
#notificationCenter .notif:hover.notice {
38+
--notif-background-color: #5d91ab;
39+
/* #7896a8 */
40+
}
41+
42+
/* Content Colors */
43+
#notificationCenter .notif .message {
44+
color: var(--bg-color);
45+
}
46+
47+
#notificationCenter .notif .message .title {
48+
color: var(--bg-color);
49+
}
50+
51+
#notificationCenter .notif .icon {
52+
color: var(--bg-color);
53+
}

0 commit comments

Comments
 (0)