Support dark mode

diff --git a/public/trivabble.css b/public/trivabble.css
index 6ed303ed0f91250b9cd02c230716845d3ea86518..ec0e4cb817ec2bff3c9f64c267d56f71aee4fc57 100644 (file)
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -507,6 +507,7 @@ td.blink {
 #participants th {
     font-weight:normal;
     background:#EEE;
+    color: black;
     font-size:smaller
 }
 
@@ -835,3 +836,129 @@ button#next-help-msg:hover {
 #board-selection > p > .select, #board-selection > p > .select > select {
     width: 100%;
 }
+
+textarea {
+  background: inherit;
+  color: inherit;
+  border: 1px solid gray;
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        background: black;
+    }
+    #menu, #panel {
+        color: #DDD;
+    }
+
+    .panel button, select {
+        background: #030;
+        border: 1px  solid green;
+        color: #EEE;
+    }
+
+    .panel button:hover, select:hover {
+        background: green;
+        border: 1px solid green;
+    }
+
+    #chat-messages {
+        border: 1px solid gray;
+    }
+
+    #participants th {
+        color: #EEE;
+        background: #555
+    }
+
+    #rack {
+        background: #333
+    }
+
+    #board td {
+        border: 1px solid #555;
+    }
+
+    #board td, #rack .tile-placeholder {
+        background: #000;
+        color: #BBB;
+    }
+
+    td.special-cell-tripleWord {
+        background: #700 !important;
+    }
+
+    td.special-cell-tripleLetter {
+        background: #234 !important;
+    }
+
+
+    td.special-cell-doubleWord {
+        background: #522 !important;
+    }
+
+    td.special-cell-doubleLetter {
+        background: #014 !important;
+    }
+
+    .tile {
+        background: #770;
+        color: #DDD;
+    }
+
+    #bag {
+        filter: invert(30%)
+    }
+
+    .msg-sender {
+        color: #5AC;
+    }
+
+    #participants .score-cell button {
+        background: #555;
+    }
+
+    #participants .score-cell button:hover {
+        background: #999;
+    }
+
+    #participants .score-cell > span:hover, #participants .turn-cell button:hover {
+        background:#770
+    }
+
+    #help-messages p {
+        color: #AAA;
+    }
+
+    button#next-help-msg {
+        background: #333;
+        color: #AAA;
+    }
+
+    button#next-help-msg:hover {
+        color: #333;
+    }
+
+    #center-cell .special-cell-label {
+        color: #AAA;
+    }
+
+    .modal-content {
+        background: black;
+        color: #DDD;
+        box-shadow: 0 0 20px #AAA;
+    }
+
+    #btn-settings-close {
+        background: #AAA
+    }
+
+    #btn-settings-close:hover {
+        background: white
+    }
+
+    #panel #btn-settings {
+        background: #555;
+        color: #CCC
+    }
+}