From 2394f481b12aeb75db4c61ef00eddfd65bb54e8a Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Fri, 3 Feb 2023 23:40:06 +0100 Subject: Very basic dark mode theme. Tone down the background color to light gray instead of white, if dark mode is preferred by the browser. --- public/images/rally-the-troops.svg | 4 +++- public/style.css | 12 ++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/public/images/rally-the-troops.svg b/public/images/rally-the-troops.svg index da7b407..fac34c4 100644 --- a/public/images/rally-the-troops.svg +++ b/public/images/rally-the-troops.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/public/style.css b/public/style.css index a28676f..c4b0b9e 100644 --- a/public/style.css +++ b/public/style.css @@ -81,6 +81,7 @@ p.warning::before { content: "\26a0"; } /* TABLES */ table { + background-color: white; min-width: min(50rem,100%); border-collapse: collapse; border: 1px solid black; @@ -105,6 +106,7 @@ td.is_active { background-color: lemonchiffon; } /* FORUM AND MESSAGE POSTS */ div.post { + background-color: white; max-width: 50em; margin-top: 24px; border: 1px solid black; @@ -194,3 +196,13 @@ article hr + p { font-style: italic; } .game_item.your_turn a:hover { color: #860 } .game_item.unread .game_head div::after { content: " \1f4dd "; } + +/* DARK MODE */ +@media (prefers-color-scheme: dark) { + body { background-color: silver } + header { background-color: darkgray } + table, div.post { background-color: gainsboro } + thead, tfoot, div.post > div.head { background-color: darkgray } + input, textarea { background-color: gainsboro } + input:focus, textarea:focus { outline-color: cornflowerblue } +} -- cgit v1.2.3