Add dark theme.

Author: tosih

public/styles.css

@@ -1,96 +1,111 @@
+// dark theme colors
+$bg: #222;
+$gray: #888;
+$gray-dark: #555;
+$text-color: #fafafa;
+
 body,
 ul,
 li,
 h1,
 p {
   margin: 0;
-  padding: 0; }
+  padding: 0;
+}
 
 *,
 *::before,
 *::after {
-  box-sizing: border-box; }
+  box-sizing: border-box;
+}
 
 body {
-  background: #fafafa;
-  color: #555;
+  background: $bg;
+  color: $text-color;
   font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
-  line-height: 1.4; }
+  line-height: 1.4;
+}
 
 .container {
   margin: 0 auto;
   max-width: 450px;
-  padding: 15px; }
+  padding: 15px;
+}
 
 .h1 {
   font-size: 24px;
   font-weight: 500;
   margin-top: 60px;
-  padding-left: 48px; }
+  padding-left: 48px;
+}
 
 .todo-list {
-  background: white;
-  border: 1px solid #e6e6e6;
+  background: $gray-dark;
+  border: 1px solid transparent;
   border-radius: 6px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-  margin: 15px 0 150px; }
+  box-shadow: 0 1px 3px rgba(0,0,0,.1);
+  margin: 15px 0 150px;
+}
 
 .todo-list-item {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   font-size: 19px;
   padding: 18px;
-  width: 100%; }
-  .todo-list-item + .new_todo,
-  .todo-list-item + .todo-list-item {
-    border-top: 1px solid #e6e6e6; }
+  width: 100%;
+
+  + .new_todo,
+  + .todo-list-item {
+    border-top: 1px solid rgba(0,0,0,.3);
+  }
+}
 
 .button-complete {
-  background: #fff;
-  border: 3px solid #e6e6e6;
+  background: $gray-dark;
+  border: 3px solid rgba(0,0,0,.3);
   border-radius: 6px;
   cursor: pointer;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  flex: 0 0 auto;
   height: 18px;
   margin: 4px 12px 0 0;
-  width: 18px; }
+  width: 18px;
+}
 
 .button-edit {
-  color: #888;
+  color: $gray;
   font-size: 15px;
   margin-left: auto;
   position: relative;
-  top: 4px; }
+  top: 4px;
+}
 
 .input {
   background: none;
   border: none;
   color: inherit;
   line-height: inherit;
   outline: none;
-  padding-left: 48px; }
+  padding-left: 48px;
+}
 
 .notification {
-  background: #fff;
-  border: 1px solid #e6e6e6;
+  background: $gray-dark;
+  border: 1px solid transparent;
   border-radius: 6px;
   border-width: 1px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-  color: #555;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  box-shadow: 0 1px 3px rgba(0,0,0,.06);
   display: flex;
-  padding: 15px; }
+  padding: 15px;
+}
 
 .emoji {
   font-size: 45px;
-  margin-right: 12px; }
+  margin-right: 12px;
+}
 
 .weight-strong {
-  font-weight: 500; }
+  font-weight: 500;
+}
 
 .small {
-  font-size: 13px; }
+  font-size: 13px;
+}