From 60d815f71c58bac564fed7d935ced7ef855fbcd0 Mon Sep 17 00:00:00 2001 From: Ward Truyen Date: Fri, 9 Aug 2024 16:16:44 +0200 Subject: [PATCH] chore: added theme/css; fixed wterminal.css --- src/css/main.css | 56 ++++++++++++++++------------------ src/game-pong-context2d.html | 2 ++ src/game-tetris-context2d.html | 2 ++ src/games-launcher.html | 2 ++ src/index.html | 2 ++ src/js/theme.js | 38 +++++++++++++++++++++++ src/term/wterminal.css | 4 +-- src/test-collision.html | 2 ++ 8 files changed, 76 insertions(+), 32 deletions(-) create mode 100644 src/js/theme.js diff --git a/src/css/main.css b/src/css/main.css index a8b2ae1..f215eba 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1,7 +1,3 @@ -:root { - color-scheme: light dark; -} - html, body { margin: 0px; @@ -9,13 +5,16 @@ body { height: 100%; display: flex; flex-direction: column; +} + +html{ /* colors */ background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F); } main { margin: auto; - width: 80%; + min-width: 80%; padding: 10px; min-height: 40%; overflow-y: scroll; @@ -51,7 +50,7 @@ main p { } header { - padding: 3px 16px 3px 16px; + padding: 3px 8px 3px 8px; border-bottom: 1px solid black; background-image: linear-gradient(#0000006f, #0000007f); text-shadow: 1px 1px 1px #0000004f; @@ -86,35 +85,32 @@ footer p { margin: 0px; } -@media(prefers-color-scheme: dark) { +html.theme-dark { + color-scheme: dark; + background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F); + color: white; +} - html, - body { - background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F); - } +.theme-dark>body>main { + border: 1px solid darkgray; + background-color: black; + box-shadow: 3px 3px 5px #101010C0; +} - main { - border: 1px solid darkgray; - background-color: black; - box-shadow: 3px 3px 5px #101010C0; - } +.theme-dark>body>main>h1 { + text-shadow: 0px 0px 3px blue, 2px 2px 6px; +} - main h1 { - text-shadow: 0px 0px 3px blue, 2px 2px 6px; - } - - header { - /* border-bottom: 1px solid darkgray; */ +.theme-dark>body>header { background-image: linear-gradient(#FFFFFF1f, #FFFFFF3f); - } +} - header a { - /* color: white */ - /* background-color: #0000004f; */ - } - - footer { - /* border-top: 1px solid darkgray; */ +.theme-dark>body>footer { background-image: linear-gradient(#FFFFFF4f, #FFFFFF0f); +} + +@media(orientation: portrait){ + main{ + margin: 1em; } } diff --git a/src/game-pong-context2d.html b/src/game-pong-context2d.html index ca99e29..473b49c 100644 --- a/src/game-pong-context2d.html +++ b/src/game-pong-context2d.html @@ -13,6 +13,7 @@
+ Willem Games
@@ -39,6 +40,7 @@

Author: Ward Truyen

+ diff --git a/src/game-tetris-context2d.html b/src/game-tetris-context2d.html index 458272d..59fd522 100644 --- a/src/game-tetris-context2d.html +++ b/src/game-tetris-context2d.html @@ -13,6 +13,7 @@
+ Willem Games
@@ -37,6 +38,7 @@

Author: Ward Truyen

+ diff --git a/src/games-launcher.html b/src/games-launcher.html index 1331026..d0b2b46 100644 --- a/src/games-launcher.html +++ b/src/games-launcher.html @@ -14,6 +14,7 @@
+ Willem Games
@@ -36,6 +37,7 @@

Author: Ward Truyen

+ diff --git a/src/index.html b/src/index.html index 197bfb2..b7cf6d5 100644 --- a/src/index.html +++ b/src/index.html @@ -10,6 +10,7 @@
+ Willem Games
@@ -32,6 +33,7 @@ + diff --git a/src/js/theme.js b/src/js/theme.js new file mode 100644 index 0000000..a93ed70 --- /dev/null +++ b/src/js/theme.js @@ -0,0 +1,38 @@ +function toggleTheme() { + const theme = "theme-dark";//localStorage.getItem('theme'); + const root = document.querySelector(":root"); + root.classList.toggle(theme); + if (root.classList.contains(theme)) { + localStorage.setItem('theme', theme); + } else { + localStorage.setItem('theme', "theme-light"); + } +} + +function setTheme(themeName) { + console.log("setting them: " + themeName); + const root = document.querySelector(":root"); + root.classList.add(themeName); + localStorage.setItem('theme', themeName); +} + +function detectTheme() { + const theme = localStorage.getItem('theme'); + if (theme === 'theme-dark' || theme === 'theme-light') { + setTheme(theme); + return; + } + + if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + setTheme('theme-dark'); + return; + } + + if (window.matchMedia('(prefers-color-scheme: light)').matches) { + setTheme('theme-light'); + return; + } + + setTheme('theme-light'); +} +detectTheme(); diff --git a/src/term/wterminal.css b/src/term/wterminal.css index 63d3c77..1e48b0c 100644 --- a/src/term/wterminal.css +++ b/src/term/wterminal.css @@ -66,7 +66,7 @@ background-color: #DDD; } -.wterminal-container input[type="submit"]:hover, button:hover{ +.wterminal-container input[type="submit"]:hover, .wterminal-container button:hover{ background-color: #DDD; cursor: pointer; } @@ -78,7 +78,7 @@ margin: 0; margin-left: 2px; } -.wterminal-container input[type="submit"], button{ +.wterminal-container input[type="submit"], .wterminal-container button{ width: unset; height: unset; margin: 0; diff --git a/src/test-collision.html b/src/test-collision.html index 122776b..c07c2c8 100644 --- a/src/test-collision.html +++ b/src/test-collision.html @@ -13,6 +13,7 @@
+ Willem Games
@@ -61,6 +62,7 @@

Author: Ward Truyen

+