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; }