feat(theme): add Phantom (@Cybertaco360) (monkeytypegame#6348)

### Description

Added new theme "Phantom", a dark and light blue theme utilizing
glowing. (Originally going to be Tokyo Night if someone wants to make
one)

### Checks

 - [ ] Adding quotes?
- [x] 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!
- [ ] 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.-->

<!-- 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! :) -->


![image](https://github.com/user-attachments/assets/8800c232-4321-4f17-8570-52c2c7001acf)

![image](https://github.com/user-attachments/assets/31e7e98e-dddc-42b7-8bd5-9bf91cdce620)

![image](https://github.com/user-attachments/assets/5406c864-fb67-49c0-b84c-7ba4493dd811)

![image](https://github.com/user-attachments/assets/d9fbe5bd-2241-4407-85fa-7c7aed25046b)

Author: Cybertaco360

frontend/static/themes/_list.json

@@ -20,6 +20,13 @@
     "subColor": "#444",
     "textColor": "#eee"
   },
+  {
+    "name": "phantom",
+    "bgColor": "#1a1b26",
+    "mainColor": "#7aa2f7",
+    "subColor": "#414868",
+    "textColor": "#c0caf5"
+  },
   {
     "name": "muted",
     "bgColor": "#525252",

frontend/static/themes/phantom.css

@@ -0,0 +1,149 @@
+:root {
+  --bg-color: #001;
+  --main-color: #7aa2f7;
+  --caret-color: #bb9af7;
+  --sub-color: #414868;
+  --sub-alt-color: #24283b;
+  --text-color: #c0caf5;
+  --error-color: #f7768e;
+  --error-extra-color: #db4b4b;
+  --colorful-error-color: #ff7a93;
+  --colorful-error-extra-color: #ff9e64;
+}
+
+@keyframes tokyo-glow {
+  0% {
+    color: #c0caf5;
+    text-shadow: 0 0 5px #7aa2f7, 0 0 10px #bb9af7;
+  }
+  50% {
+    color: #c0caf5;
+    text-shadow: 0 0 8px #7dcfff, 0 0 15px #bb9af7;
+  }
+  100% {
+    color: #c0caf5;
+    text-shadow: 0 0 5px #7aa2f7, 0 0 10px #bb9af7;
+  }
+}
+
+@keyframes tokyo-glow-incorrect {
+  0% {
+    text-shadow: 0 0 5px #f7768e, 0 0 10px #db4b4b;
+  }
+  50% {
+    text-shadow: 0 0 8px #ff7a93, 0 0 15px #ff9e64;
+  }
+  100% {
+    text-shadow: 0 0 5px #f7768e, 0 0 10px #db4b4b;
+  }
+}
+
+@keyframes tokyo-bg {
+  0% {
+    background: #7aa2f7;
+  }
+  50% {
+    background: #bb9af7;
+  }
+  100% {
+    background: #7aa2f7;
+  }
+}
+
+#words {
+  --correct-letter-color: var(--text-color);
+  --untyped-letter-color: #565f89;
+}
+
+header:not(.focus) #logo .text {
+  color: var(--text-color);
+  animation: tokyo-glow 3s infinite alternate;
+}
+
+header #logo .text .top {
+  color: inherit;
+  animation: none;
+}
+
+header #logo .icon {
+  color: var(--main-color) !important;
+}
+
+button.text:hover,
+.button.text:hover,
+.textButton:hover {
+  color: var(--caret-color);
+}
+
+button.text.active,
+.button.text.active,
+.textButton.active {
+  color: var(--main-color);
+}
+
+button.text:hover,
+.textButton:hover {
+  animation: tokyo-glow 5s linear infinite;
+}
+
+.word .active {
+  animation: tokyo-glow 5s linear infinite;
+}
+
+button:hover,
+.button:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover,
+input[type="submit"]:hover {
+  color: var(--bg-color);
+  background: var(--caret-color);
+}
+
+.scrollToTopButton:hover {
+  background: var(--caret-color);
+  color: var(--bg-color);
+}
+
+#caret,
+.pageSettings .section .buttons .button.active,
+.pageSettings .section.languages .buttons .language.active,
+.pageAccount .group.filterButtons .buttons .button.active {
+  animation: tokyo-bg 3s linear infinite;
+}
+
+#logo .bottom,
+header .config .group .buttons .textButton.active,
+#result .stats .group .bottom,
+nav .textButton:hover,
+nav button.text:hover,
+header .config .group .buttons .textButton:hover,
+a:not(.button):hover {
+  animation: tokyo-glow 3s linear infinite;
+}
+
+.textButton.active {
+  animation: tokyo-glow 3s linear infinite;
+}
+.afk,
+.timeToday,
+#words .word letter.correct,
+#words .word.typed letter.correct,
+#words.highlight-word .word.typed letter,
+#words.highlight-next-word .word.typed letter,
+#words.highlight-next-two-words .word.typed letter,
+#words.highlight-next-three-words .word.typed letter {
+  animation: tokyo-glow 5s linear infinite;
+}
+
+#words.flipped .word.typed letter {
+  animation: none;
+}
+
+.incorrect {
+  animation: tokyo-glow-incorrect 5s linear infinite;
+}
+
+#words.highlight-off .word letter,
+#words.highlight-off .word.typed letter {
+  animation: tokyo-glow 5s linear infinite;
+}