diff --git a/index.html b/index.html
index 099cf4e2..811a992b 100644
--- a/index.html
+++ b/index.html
@@ -2,24 +2,35 @@
-
-
-
- CoderType
-
+
+
+
+ CoderType
+
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/scripts/changeTheme.ts b/scripts/changeTheme.ts
new file mode 100644
index 00000000..75e57d37
--- /dev/null
+++ b/scripts/changeTheme.ts
@@ -0,0 +1,9 @@
+export const changeThemeColor = () => {
+ const themeSelect: HTMLSelectElement = document.querySelector('#select-theme')
+
+ themeSelect.onchange = function () {
+ document.documentElement.className = ''
+ document.documentElement.classList.add(themeSelect.value)
+ }
+
+}
diff --git a/scripts/index.ts b/scripts/index.ts
index e1f16e39..62d00755 100644
--- a/scripts/index.ts
+++ b/scripts/index.ts
@@ -1,6 +1,7 @@
import { Repo, RepoFile, repoOptions } from "./data";
import { clearEditor, EditorResult, startEditor } from "./editor";
import { chooseOption, clearTerminal, readLine, removeTerminalCursor, separatorLine, writeLines } from "./terminal";
+import { changeThemeColor } from "./changeTheme";
const getRoundLine = (round: number, wantsToPlayAgain: boolean) => {
if (round === 1) return "Welcome to coder type!";
@@ -71,4 +72,6 @@ const runGame = async () => {
}
}
+changeThemeColor()
+
runGame();
diff --git a/styles/catppuccin.css b/styles/catppuccin.css
new file mode 100644
index 00000000..f65958ff
--- /dev/null
+++ b/styles/catppuccin.css
@@ -0,0 +1,17 @@
+.catppuccin:root {
+ --foreground-color: #d9e0ee;
+ --background-color: #1e1e2e;
+ --wrong-color: #f28fad;
+}
+
+body {
+ background-color: var(--background-color);
+ color: var(--foreground-color);
+}
+
+@media (prefers-color-scheme: dark) {
+ .catppuccin:root {
+ --foreground-color: #d9e0ee;
+ --background-color: #1e1e2e;
+ }
+}
diff --git a/styles/index.css b/styles/index.css
index 2f3b9f11..6bcda37c 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -44,3 +44,21 @@ main {
background-color: var(--wrong-color);
opacity: 0.8;
}
+
+select {
+ position: fixed;
+ top: 40px;
+ right: 40px;
+ padding: 10px;
+ background: transparent;
+ border: 1px solid var(--foreground-color);
+ border-radius: 5px;
+ font-size: 18px;
+ color: var(--foreground-color);
+}
+
+option {
+ background: var(--background-color);
+ color: var(--foreground-color);
+ padding: 3px;
+}
diff --git a/styles/monokai.css b/styles/monokai.css
new file mode 100644
index 00000000..6b43b7c2
--- /dev/null
+++ b/styles/monokai.css
@@ -0,0 +1,17 @@
+.monokai:root {
+ --foreground-color: #e2e2dc;
+ --background-color: #272822;
+ --wrong-color: #f92672;
+}
+
+body {
+ background-color: var(--background-color);
+ color: var(--foreground-color);
+}
+
+@media (prefers-color-scheme: dark) {
+ .monokai:root {
+ --foreground-color: #e2e2dc;
+ --background-color: #272822;
+ }
+}
diff --git a/styles/rosepine.css b/styles/rosepine.css
new file mode 100644
index 00000000..cdfa3cfd
--- /dev/null
+++ b/styles/rosepine.css
@@ -0,0 +1,17 @@
+.rosepine:root {
+ --foreground-color: #e0def4;
+ --background-color: #1f1d27;
+ --wrong-color: #eb6f92;
+}
+
+body {
+ background-color: var(--background-color);
+ color: var(--foreground-color);
+}
+
+@media (prefers-color-scheme: dark) {
+ .rosepine:root {
+ --foreground-color: #e0def4;
+ --background-color: #1f1d27;
+ }
+}
diff --git a/styles/solarizedlight.css b/styles/solarizedlight.css
new file mode 100644
index 00000000..966996a3
--- /dev/null
+++ b/styles/solarizedlight.css
@@ -0,0 +1,17 @@
+.solarizedlight:root {
+ --foreground-color: #181819;
+ --background-color: #fdf6e3;
+ --wrong-color: #d33682;
+}
+
+body {
+ background-color: var(--background-color);
+ color: var(--foreground-color);
+}
+
+@media (prefers-color-scheme: dark) {
+ .solarizedlight:root {
+ --foreground-color: #181819;
+ --background-color: #fdf6e3;
+ }
+}
diff --git a/styles/theme.css b/styles/theme.css
index cb394d15..311113ab 100644
--- a/styles/theme.css
+++ b/styles/theme.css
@@ -1,6 +1,6 @@
:root {
- --foreground-color: black;
- --background-color: white;
+ --foreground-color: white;
+ --background-color: black;
--wrong-color: red;
}