From f1ac269c48487a70d0f1a723e435844ee520a969 Mon Sep 17 00:00:00 2001
From: aymm <max.nuding@icloud.com>
Date: Mon, 10 May 2021 19:06:35 +0200
Subject: [PATCH] Fixed #11 Added light design

---
 styles/style.css | 49 ++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/styles/style.css b/styles/style.css
index 38ed024..2c9a00c 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,13 +1,15 @@
 /* Globals */
 :root {
-  --main-bg-color: rgb(48, 48, 48);
-  --secondary-bg-color: rgba(10, 10, 10, 0.7);
-  --main-fg-color: white;
+  --main-bg-color: rgb(223, 223, 223);
+  --secondary-bg-color: rgba(20, 20, 20, 0.7);
+  --ternary-bg-color: rgba(175, 175, 175, 0.7);
+  --main-fg-color: black;
+  --secondary-fg-color: rgb(210, 210, 210);
   --main-accent-color: rgb(253, 122, 0);
   --disabled-color: gray;
   --green: green;
   --default-shadow: 3px 3px 10px 1px var(--secondary-bg-color);
-  --error-color-translucent: rgba(255, 0, 0, 0.3);
+  --error-color-translucent: rgba(193, 0, 0, 0.87);
   --error-color: rgba(255, 0, 0);
 }
 @supports (color: color(display-p3 1 1 1)) {
@@ -16,6 +18,40 @@
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --main-bg-color: rgb(48, 48, 48);
+    --secondary-bg-color: rgba(10, 10, 10, 0.7);
+    --ternary-bg-color: rgba(10, 10, 10, 0.7);
+    --main-fg-color: white;
+    --secondary-fg-color: rgb(210, 210, 210);
+    --main-accent-color: rgb(253, 122, 0);
+    --disabled-color: gray;
+    --green: green;
+    --default-shadow: 3px 3px 10px 1px var(--secondary-bg-color);
+    --error-color-translucent: rgba(255, 0, 0, 0.3);
+    --error-color: rgba(255, 0, 0);
+  }
+  @supports (color: color(display-p3 1 1 1)) {
+    :root {
+      --main-accent-color: color(display-p3 0.927 0.506 0.028)
+    }
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  ::placeholder {
+    opacity: 1;
+    color: rgb(73, 73, 73);
+  }
+  :-ms-input-placeholder {
+    color: rgb(73, 73, 73);
+  }
+  ::-ms-input-placeholder {
+    color: rgb(73, 73, 73);
+  }
+}
+
 a:visited, a {
   color: var(--main-accent-color);
 }
@@ -84,6 +120,7 @@ header {
   margin-bottom: 8px;
   background: var(--secondary-bg-color);
   box-shadow: var(--default-shadow);
+  color: var(--secondary-fg-color);
 }
 
 .spacer {
@@ -229,13 +266,13 @@ datewrapper time {
 }
 .create-poll input[type=number] {
   max-width: 3em;
-  background-color: var(--secondary-bg-color);
+  background-color: var(--ternary-bg-color);
   color: var(--main-accent-color);
 }
 .create-poll input[type=text] {
   display: block;
   width: 100%;
-  background-color: var(--secondary-bg-color);
+  background-color: var(--ternary-bg-color);
   color: var(--main-accent-color);
 }
 .create-poll input[type=text]:focus {