Add dark-mode support (#24)

* add dark-mode support

* make improvements as suggested by riggraz

* fix some dark theme styles

Co-authored-by: Riccardo Graziosi <riccardo.graziosi97@gmail.com>

app/javascript/components/Board/NewPost.tsx

@@ -156,7 +156,7 @@ class NewPost extends React.Component<Props, State> {
               { showForm ? 'Cancel' : 'Submit feedback' }
             </Button>
           :
-            <a href="/users/sign_in" className="btn btn-dark">
+            <a href="/users/sign_in" className="btn">
               Log in / Sign up
             </a>
         }

app/javascript/components/Comments/Comment.tsx

@@ -68,10 +68,11 @@ const Comment = ({
               { 'Post update: ' + (isPostUpdate ? 'yes' : 'no') }
             </a>
             <Separator />
-            <a href={`/admin/comments/${id}/edit`} data-turbolinks="false">Edit</a>
+            <a href={`/admin/comments/${id}/edit`} className="commentLink" data-turbolinks="false">Edit</a>
             <Separator />
             <a
               href={`/admin/comments/${id}`}
+              className="commentLink"
               data-method="delete"
               data-confirm="Are you sure?"
               data-turbolinks="false">Delete</a>

app/javascript/stylesheets/components/Board.scss

@@ -118,4 +118,11 @@
       @extend .mr-2;
     }
   }
+}
+
+@media (prefers-color-scheme: dark) {
+  .postTitle {
+    color: white;
+  }
+
 }

app/javascript/stylesheets/components/Comments.scss

@@ -84,4 +84,11 @@
       }
     }
   }
+}
+
+@media (prefers-color-scheme: dark) {
+  .commentList .comment .commentFooter .commentLink {
+    color: white;
+  }
+
 }

app/javascript/stylesheets/components/LikeButton.scss

@@ -28,4 +28,24 @@
     text-align: center;
     font-size: 17px;
   }
+}
+
+@media (prefers-color-scheme: dark) {
+  .likeButtonContainer {
+    .likeButton {
+      border-bottom-color: white;
+
+      &:hover {
+        border-bottom-color: black;
+      }
+    }
+
+    .likeButton.liked {
+      border-bottom-color: black;
+    }
+
+    .likesCountLabel {
+      color: white;
+    }
+  }
 }

app/javascript/stylesheets/components/Post.scss

@@ -118,4 +118,26 @@
       color: $astuto-black;
     }
   }
+}
+
+@media (prefers-color-scheme: dark) {
+
+  .postDescription {
+    color: white !important;
+  }
+
+  .badgeLight {
+    color: white;
+  }
+
+  .postAndCommentsContainer .postSettings .selectPicker {
+    background-color: #282828 !important;
+    color: white !important;
+  }
+
+  .postAndCommentsContainer .postHeader a {
+    color: white;
+  }
+
+
 }

app/javascript/stylesheets/general/_components.scss

@@ -71,4 +71,22 @@ a {
   @extend .badge-light;
 
   background-color: $astuto-grey;
+}
+
+@media (prefers-color-scheme: dark) {
+  .card {
+    color: white;
+    background-color: $astuto-black;
+  }
+
+  .alert-primary {
+    background-color: #00bc8c;
+    border-color: #fff;
+  }
+
+  .alert-danger {
+    background-color: #E74C3C;
+    border-color: #fff;
+  }
+
 }

app/javascript/stylesheets/general/_form.scss

@@ -34,4 +34,23 @@
   margin-top: 24px;
 
   a { color: $astuto-black; }
+}
+
+@media (prefers-color-scheme: dark) {
+  .deviseLinks {
+    a { color: white; }
+  }
+
+  .form-control, .form-control:focus {
+    color: white;
+    background-color: $astuto-grey;
+  }
+
+  .form-control {
+    border-color: grey;
+  }
+
+  .form-control:focus {
+    border-color: white;
+  }
 }

app/javascript/stylesheets/general/_header.scss

@@ -64,3 +64,73 @@
     background-color: $astuto-black;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .navbar {
+    background-color: $astuto-black;
+
+    .fullname {  
+      color: $navbar-dark-brand-color;
+    }
+
+    .navbar-brand {
+      color: $navbar-dark-brand-color;
+  
+      @include hover-focus {
+        color: $navbar-dark-brand-hover-color;
+      }
+    }
+
+    .dropdown-menu {
+      background-color: #363636;
+    }
+
+    .dropdown-item {
+      color: white;
+      &:hover {
+        background-color: black;
+      }
+    }
+  
+    .navbar-nav {
+      .nav-link {
+        color: $navbar-dark-color;
+  
+        @include hover-focus {
+          color: $navbar-dark-hover-color;
+        }
+  
+        &.disabled {
+          color: $navbar-dark-disabled-color;
+        }
+      }
+  
+      .show > .nav-link,
+      .active > .nav-link,
+      .nav-link.show,
+      .nav-link.active {
+        color: $navbar-dark-active-color;
+      }
+    }
+  
+    .navbar-toggler {
+      color: $navbar-dark-color;
+      border-color: $navbar-dark-toggler-border-color;
+    }
+  
+    .navbar-toggler-icon {
+      background-image: $navbar-dark-toggler-icon-bg;
+    }
+  
+    .navbar-text {
+      color: $navbar-dark-color;
+      a {
+        color: $navbar-dark-active-color;
+  
+        @include hover-focus {
+          color: $navbar-dark-active-color;
+        }
+      }
+    }
+  }
+}

app/javascript/stylesheets/general/_index.scss

@@ -28,4 +28,30 @@
 
 .loginInfo {
   text-decoration: underline;
+}
+
+.btn {
+  color: #fff;
+  background-color: #343a40;
+  border-color: #343a40;
+}
+
+@media (prefers-color-scheme: dark) {
+  html, body {
+    background-color: #242424;
+  }
+
+  .container, h2 {
+    color: white;
+  }
+
+  .loginInfo {
+    color: white;
+  }
+
+  .btn {
+    color: #212529;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa;
+  }
 }

app/views/devise/confirmations/new.html.erb

@@ -9,7 +9,7 @@
   </div>
 
   <div class="actions">
-    <%= f.submit "Resend confirmation instructions", class: "btn btn-dark btn-block" %>
+    <%= f.submit "Resend confirmation instructions", class: "btn btn-block" %>
   </div>
 <% end %>
 

app/views/devise/passwords/new.html.erb

@@ -9,7 +9,7 @@
   </div>
 
   <div class="actions">
-    <%= f.submit "Send me reset password instructions", class: "btn btn-dark btn-block" %>
+    <%= f.submit "Send me reset password instructions", class: "btn btn-block" %>
   </div>
 <% end %>
 

app/views/devise/registrations/edit.html.erb

@@ -47,7 +47,7 @@
   </div>
 
   <div class="actions">
-    <%= f.submit "Update profile", class: "btn btn-dark btn-block" %>
+    <%= f.submit "Update profile", class: "btn btn-block" %>
   </div>
 <% end %>
 

app/views/devise/registrations/new.html.erb

@@ -24,7 +24,7 @@
   </div>
 
   <div class="actions">
-    <%= f.submit "Sign up", class: "btn btn-dark btn-block" %>
+    <%= f.submit "Sign up", class: "btn btn-block" %>
   </div>
 <% end %>
 

app/views/devise/sessions/new.html.erb

@@ -19,7 +19,7 @@
   <% end %>
 
   <div class="actions">
-    <%= f.submit "Log in", class: "btn btn-dark btn-block" %>
+    <%= f.submit "Log in", class: "btn btn-block" %>
   </div>
 <% end %>
 

app/views/layouts/_header.html.erb

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-md navbar-light">
+<nav class="navbar navbar-expand-md">
   <div class="container">
     <%=
       link_to root_path, class: 'navbar-brand' do