Introduce dark mode

1 files changed, 22 insertions, 5 deletions

diff --git a/static/rater.css b/static/rater.css
index b73f4a0..6f441a8 100644
--- a/static/rater.css
+++ b/static/rater.css
@@ -1,5 +1,16 @@
 body {
   font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:200; font-stretch:normal;
+  background-color: Canvas;
+  color: CanvasText;
+  color-scheme: light dark;
+}
+
+body.dark-mode {
+  color-scheme: dark;
+}
+
+body.light-mode {
+  color-scheme: light;
 }
 
 .username-wrapper {
@@ -49,12 +60,13 @@ button {
 
 .event-list-item {
   vertical-align: top;
-  background-color: #f6f6f6;
+  background-color: Field;
   margin-bottom: 0.5em;
   border: 1px solid silver;
   border-radius: 10px;
   padding: 0 0.5em 0.5em 0.5em;
   box-sizing: border-box;
+  color: FieldText;
 }
 
 .event-list-item[event_state='gone'] {
@@ -100,7 +112,8 @@ body.four-column .event-list-item {
   width: 15em;
   margin: 1em 1em 0 0;
   padding: 0.2em;
-  background-color: #f0f0f0;
+  background-color: Field;
+  color: GrayText;
   border-radius: 10px;
   vertical-align:top;
   font-size: smaller;
@@ -112,17 +125,19 @@ body.four-column .event-list-item {
   font-weight: bold;
 }
 
+.event-mail,
 .event-duration,
 .event-speaker-count,
 .event-subtitle {
   font-size: smaller;
 }
 
+.event-mail,
 .event-speaker-count,
 .event-duration {
   display: inline;
   font-weight: bold;
-  background-color: cyan;
+  background-color: Highlight;
   border-radius: 2px;
   margin: 0.2em;
   padding: 0.2em;
@@ -140,7 +155,7 @@ body.four-column .event-list-item {
 .event-rating-comment {
   min-height: 3em;
   margin-top: 0.1em;
-  background-color: white;
+  background-color: Field;
 }
 
 #Filter, #Username {
@@ -187,7 +202,7 @@ body.four-column .event-list-item {
 .event-description.full,
 .event-abstract.full {
   cursor: zoom-out;
-  background: white;
+  background-color: color-mix(in srgb, Field, black 5%);
   overflow: visible;
   height: auto !important;
   white-space: initial;
@@ -199,6 +214,8 @@ body.show-ratings .ratings-button,
 body.two-column .two-columns,
 body.three-column .three-columns,
 body.four-column .four-columns,
+body.light-mode .light-mode-button,
+body.dark-mode .dark-mode-button,
 .event-list-item.editing .edit-button,
 .event-list-item[event_state='accepted'] .accept-button,
 .event-list-item[event_state='rejected'] .reject-button,