From 32ebc02063589a7d99af4b12e777bfd4773edc83 Mon Sep 17 00:00:00 2001 From: Andrew Lee Date: Fri, 12 Dec 2025 17:48:43 -0500 Subject: add light and dark theme for the window --- src/styles/window.css | 56 +++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 43 insertions(+), 13 deletions(-) diff --git a/src/styles/window.css b/src/styles/window.css index fc229cb..fb1b874 100644 --- a/src/styles/window.css +++ b/src/styles/window.css @@ -1,3 +1,46 @@ +@media (prefers-color-scheme: dark) { + .window { + background-color: #000000; + color: #FFFFFF; + } + + .button { + color: #FFFFFF; + } + + .button:hover { + background-color: #424242; + color: #FFFFFF; + } + + .button:active { + box-shadow: inset 0 0 0 1px #FFFFFF; + color: #FFFFFF; + } + +} + +@media (prefers-color-scheme: light) { + .window { + background-color: #ffffff; + color: #000000; + } + + .button { + color: #000000; + } + + .button:hover { + background-color: #bebebe; + color: #000000; + } + + .button:active { + box-shadow: inset 0 0 0 1px #000; + color: #000000; + } +} + .titlebar { background-color: #808080; color: #FFFFFF; @@ -27,9 +70,7 @@ .window { font-family: Arial, Helvetica, sans-serif; - background-color: #ffffff; margin: 1em 15%; - color: #000000; } .border { @@ -40,22 +81,11 @@ } .button { - color: #000000; padding: 15px 40px; border: solid; border-width: 2px; } - .button:hover { - background-color: #bebebe; - color: #000000; - } - - .button:active { - box-shadow: inset 0 0 0 1px #000; - color: #000000; - } - .nav { display: flex; flex-direction: column; -- cgit v1.2.3