feat(theme): add Vesper Light (@SameerJS6) (#7040)

### Description

Adds Vesper Light and Oscura themes. Oscura by
[Fey](https://github.com/narative/oscura).

<!-- 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.
- [ ] Adding a language?
- Make sure to follow the [languages
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LANGUAGES.md)
  - [ ] Add language to `packages/schemas/src/languages.ts`
- [ ] Add language to exactly one group in
`frontend/src/ts/constants/languages.ts`
  - [ ] Add language json file to `frontend/static/languages` 
- [x] Adding a theme?
- Make sure to follow the [themes
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/THEMES.md)
  - [x] Add theme to `packages/schemas/src/themes.ts`
  - [x] Add theme to `frontend/src/ts/constants/themes.ts`
  - [x] Add theme css file to `frontend/static/themes`
- [x] Add some screenshot of the theme, especially with different test
settings (colorful, flip colors) to your pull request
- [ ] Adding a layout?
- [ ] Make sure to follow the [layouts
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LAYOUTS.md)
  - [ ] Add layout to `packages/schemas/src/layouts.ts`
  - [ ] Add layout json file to `frontend/static/layouts` 
- [ ] Adding a font?
- Make sure to follow the [themes
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/FONTS.md)
  - [ ] Add font file  to `frontend/static/webfonts`
  - [ ] Add font to `packages/schemas/src/fonts.ts`
  - [ ] Add font to `frontend/src/ts/constants/fonts.ts`
- [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.-->

Closes #

<!-- 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:
[#1234](https://github.com/monkeytypegame/monkeytype/pull/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! :) -->


## Preview

### Vesper Light

#### Home Route
<img width="1920" height="1440" alt="vesper-light"
src="https://github.com/user-attachments/assets/f2f43ecf-ee63-4797-a8e0-781c6879551f"
/>

#### Settings Route
<img width="1200" height="676" alt="80_1x_shots_so"
src="https://github.com/user-attachments/assets/e595faa9-9731-4aef-bc0e-95f882391289"
/>

#### Result Route
<img width="1200" height="676" alt="908_1x_shots_so"
src="https://github.com/user-attachments/assets/b86a7bae-dacf-4eba-b987-0620ee533d33"
/>

### Oscura

#### Home Route
<img width="1920" height="1440" alt="789_1x_shots_so"
src="https://github.com/user-attachments/assets/80c3f950-ef60-4ef1-aa35-9cc1c436b426"
/>

#### Settings Route
<img width="1920" height="1440" alt="194_1x_shots_so"
src="https://github.com/user-attachments/assets/08bf81d9-6a6f-4edc-89f2-ed9106a465b0"
/>

#### Result Route
<img width="1920" height="1440" alt="95_1x_shots_so"
src="https://github.com/user-attachments/assets/0d1ee6a5-78e6-4c66-a5e0-b2ab422ffe4e"
/>

### Toasts Theme For Vesper Light & Oscura
<img width="1920" height="1440" alt="585_1x_shots_so"
src="https://github.com/user-attachments/assets/b658811d-3303-4079-9e30-57d465093d04"
/>

frontend/src/ts/constants/themes.ts

@@ -1114,6 +1114,12 @@ export const themes: Record<ThemeName, Omit<Theme, "name">> = {
     subColor: "#5b578e",
     textColor: "#f4e0c9",
   },
+  vesper_light: {
+    bgColor: "#ffffff",
+    mainColor: "#fb7100",
+    subColor: "#067a6e",
+    textColor: "#000000",
+  },
   pale_nimbus: {
     bgColor: "#433e4c",
     mainColor: "#94ffc2",

frontend/static/themes/vesper.css

@@ -7,8 +7,8 @@
   --text-color: #ffffff;
   --error-color: #ff8080;
   --error-extra-color: #b25959;
-  --colorful-error-color: #99ffe4;
-  --colorful-error-extra-color: #99ffe4;
+  --colorful-error-color: #ff8080;
+  --colorful-error-extra-color: #b25959;
 }
 
 /* Background & Text Colors */

frontend/static/themes/vesper_light.css

@@ -0,0 +1,56 @@
+:root {
+  --bg-color: #ffffff;
+  --main-color: #fb7100;
+  --caret-color: #067a6e;
+  --sub-color: #a0a0a0;
+  --sub-alt-color: #fff8f4;
+  --text-color: #000000;
+  --error-color: #ed2839;
+  --error-extra-color: #ff6c72;
+  --colorful-error-color: #ed2839;
+  --colorful-error-extra-color: #ff6c72;
+}
+
+#testConfig .spacer {
+  background: #efefef;
+}
+
+/* Background & Text Colors */
+#notificationCenter .notif.bad {
+  --notif-border-color: #ed2939;
+  --notif-background-color: #ed2839;
+}
+
+#notificationCenter .notif.good {
+  --notif-border-color: #067a6e;
+  --notif-background-color: #067a6e;
+}
+
+#notificationCenter .notif.notice {
+  --notif-border-color: #1e90ff;
+  --notif-background-color: #1e90ff;
+}
+
+/* Hover Styles  */
+#notificationCenter .notif:hover.good {
+  --notif-background-color: #00a693;
+}
+#notificationCenter .notif:hover.bad {
+  --notif-background-color: #ff6c72;
+}
+#notificationCenter .notif:hover.notice {
+  --notif-background-color: #4ec5ff;
+}
+
+/* Content Colors  */
+#notificationCenter .notif .message {
+  color: var(--bg-color);
+}
+
+#notificationCenter .notif .message .title {
+  color: var(--bg-color);
+}
+
+#notificationCenter .notif .icon {
+  color: var(--bg-color);
+}

packages/schemas/src/themes.ts

@@ -181,6 +181,7 @@ export const ThemeNameSchema = z.enum(
     "tron_orange",
     "vaporwave",
     "vesper",
+    "vesper_light",
     "viridescent",
     "voc",
     "vscode",