Implement proper dark mode (#800)

* Implement proper dark mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Fix footer color in light mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

---------

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

assets/styles/components/buttons.scss

@@ -1,44 +1,44 @@
 .btn-dark {
-  background-color: $text-color !important;
-  border-color: $text-color !important;
-  color: $text-over-accent-color !important;
+  background-color: get-light-color('text-color') !important;
+  border-color: get-light-color('text-color') !important;
+  color: get-light-color('text-over-accent-color') !important;
   @include transition();
 
   &:hover,
   &:focus {
-    background-color: $accent-color !important;
-    border-color: $accent-color !important;
+    background-color: get-light-color('accent-color') !important;
+    border-color: get-light-color('accent-color') !important;
     @include transition();
   }
 }
 
 .btn-info {
-  background-color: $accent-color !important;
-  color: $text-over-accent-color !important;
+  background-color: get-light-color('accent-color') !important;
+  color: get-light-color('text-over-accent-color') !important;
 
   &:hover,
   &:focus {
-    background-color: $hover-over-accent-color !important;
+    background-color: get-light-color('hover-over-accent-color') !important;
   }
 }
 
 .btn-outline-info {
-  color: $accent-color !important;
-  border-color: $accent-color !important;
+  color: get-light-color('accent-color') !important;
+  border-color: get-light-color('accent-color') !important;
 
   &:hover,
   &:focus {
-    background-color: $accent-color !important;
-    color: $text-over-accent-color !important;
+    background-color: get-light-color('accent-color') !important;
+    color: get-light-color('text-over-accent-color') !important;
   }
 }
 
 .btn-link {
-  color: $accent-color;
+  color: get-light-color('accent-color');
 
   &:hover,
   &:focus {
-    color: $hover-over-accent-color;
+    color: get-light-color('hover-over-accent-color');
   }
 }
 
@@ -46,7 +46,7 @@
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 0.25rem;
-  color: $muted-text-color;
+  color: get-light-color('muted-text-color');
 }
 
 .tags {
@@ -56,18 +56,19 @@
     font-size: 0.5em;
     list-style-type: none;
     display: inline-block;
-    background: $accent-color;
+    background: get-light-color('accent-color');
     margin-left: 0.1em;
     margin-right: 0.1em;
   }
   a {
-    color: $text-over-accent-color;
+    color: get-light-color('text-over-accent-color');
+    text-decoration: none !important;
   }
 }
 
 .icon-button {
-  background-color: $text-color;
-  color: $text-over-accent-color !important;
+  background-color: get-light-color('text-color');
+  color: get-light-color('text-over-accent-color') !important;
   padding: 0.25rem 0.5rem;
   line-height: 1.5;
   border-radius: 0.2rem;
@@ -75,19 +76,99 @@
 
   &:hover,
   &:focus {
-    background-color: $accent-color !important;
+    background-color: get-light-color('accent-color') !important;
     @include transition();
   }
 }
 
 .filled-button {
-  background-color: $accent-color !important;
-  color: $text-over-accent-color !important;
+  background-color: get-light-color('accent-color') !important;
+  color: get-light-color('text-over-accent-color') !important;
   @include transition();
 
   &:hover,
   &:active {
-    background-color: $hover-over-accent-color !important;
+    background-color: get-light-color('hover-over-accent-color') !important;
     @include transition();
   }
 }
+
+html[data-theme='dark'] {
+  .btn-dark {
+    background-color: get-dark-color('accent-color') !important;
+    border-color: get-dark-color('accent-color') !important;
+    color: get-dark-color('text-over-accent-color') !important;
+
+    &:hover,
+    &:focus {
+      background-color: get-dark-color('hover-over-accent-color') !important;
+      border-color: get-dark-color('hover-over-accent-color') !important;
+    }
+  }
+
+  .btn-info {
+    background-color: get-dark-color('bg-card') !important;
+    color: get-dark-color('text-color') !important;
+    border: 1px solid get-dark-color('muted-text-color') !important;
+
+    &:hover,
+    &:focus {
+      background-color: get-dark-color('hover-over-accent-color') !important;
+    }
+  }
+
+  .btn-outline-info {
+    color: get-dark-color('accent-color') !important;
+    border-color: get-dark-color('accent-color') !important;
+
+    &:hover,
+    &:focus {
+      background-color: get-dark-color('accent-color') !important;
+      color: get-dark-color('text-over-accent-color') !important;
+    }
+  }
+
+  .btn-link {
+    color: get-dark-color('accent-color');
+
+    &:hover,
+    &:focus {
+      color: get-dark-color('hover-over-accent-color');
+    }
+  }
+
+  .nav-button {
+    color: get-dark-color('muted-text-color');
+  }
+
+  .tags {
+    li {
+      background: get-dark-color('accent-color');
+      a {
+        background-color: get-dark-color('bg-card');
+        border: 1px solid get-dark-color('muted-text-color');
+        color: get-dark-color('text-over-accent-color');
+      }
+    }
+  }
+
+  .icon-button {
+    background-color: get-dark-color('muted-text-color');
+    color: get-dark-color('text-over-accent-color') !important;
+
+    &:hover,
+    &:focus {
+      background-color: get-dark-color('accent-color') !important;
+    }
+  }
+
+  .filled-button {
+    background-color: get-dark-color('accent-color') !important;
+    color: get-dark-color('text-over-accent-color') !important;
+
+    &:hover,
+    &:active {
+      background-color: get-dark-color('hover-over-accent-color') !important;
+    }
+  }
+}

assets/styles/components/cards.scss

@@ -2,12 +2,12 @@
   box-shadow: none;
   @include transition();
   overflow: hidden;
-  background: $bg-card;
+  background: get-light-color('bg-card');
 
   &:hover,
   &:focus {
     box-shadow: $box-shadow;
-    border: 1px solid $bg-primary;
+    border: 1px solid get-light-color('bg-primary');
     @include transition();
   }
 
@@ -36,7 +36,10 @@
   }
 
   .card-footer {
-    background: $bg-card !important;
+    background: get-light-color('bg-card') !important;
+    a.btn {
+      text-decoration: none !important;
+    }
   }
 }
 
@@ -45,7 +48,7 @@
   display: inline-flex;
 
   .post-card-link {
-    text-decoration: none;
+    text-decoration: none !important;
   }
 
   .card {
@@ -80,9 +83,33 @@
 
       span {
         font-size: 10pt;
-        color: $muted-text-color !important;
+        color: get-light-color('muted-text-color') !important;
         padding-top: 5px;
       }
     }
   }
 }
+
+html[data-theme='dark'] {
+  .card {
+    background: get-dark-color('bg-card');
+
+    &:hover,
+    &:focus {
+      border: 1px solid rgba(get-dark-color('accent-color'), 0.2);
+    }
+    .card-footer {
+      background: get-dark-color('bg-card') !important;
+    }
+  }
+
+  .post-card {
+    .card {
+      .card-footer {
+        span {
+          color: get-dark-color('muted-text-color') !important;
+        }
+      }
+    }
+  }
+}

assets/styles/components/images.scss

@@ -17,7 +17,7 @@ img {
 }
 
 figure {
-  border: 1px solid $border-color;
+  border: 1px solid rgba(get-light-color('accent-color'), 0.1);
   height: -moz-fit-content;
   height: fit-content;
   width: -moz-fit-content;
@@ -30,5 +30,15 @@ caption,
 figcaption {
   caption-side: bottom;
   text-align: center;
-  color: $muted-text-color;
+  color: get-light-color('muted-text-color');
+}
+
+html[data-theme='dark'] {
+  figure {
+    border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
+  }
+  caption,
+  figcaption {
+    color: get-dark-color('muted-text-color');
+  }
 }

assets/styles/components/links.scss

@@ -1,38 +1,38 @@
 a {
-  color: $accent-color;
+  color: get-light-color('accent-color');
   @include transition();
 
   &:hover,
   &:focus {
-    text-decoration: $hover-over-accent-color underline;
-    color: $hover-over-accent-color;
+    text-decoration: get-light-color('hover-over-accent-color') underline;
+    color: get-light-color('hover-over-accent-color');
     @include transition();
   }
 }
 
 .list-link {
-  text-decoration: none;
-  color: $text-color;
+  text-decoration: none !important;
+  color: get-light-color('text-color');
   @include transition();
   &.active {
     display: inline;
-    color: $accent-color;
+    color: get-light-color('accent-color');
   }
 
   &:hover {
     margin-left: 3px;
-    color: $accent-color;
+    color: get-light-color('accent-color');
     @include transition();
   }
 }
 
 a.header-anchor {
   text-decoration: none;
-  color: $heading-color;
+  color: get-light-color('heading-color');
   i,
   svg {
     font-size: 10pt;
-    color: $text-color;
+    color: get-light-color('text-color');
     display: none;
     margin-left: 0.5rem;
   }
@@ -43,10 +43,37 @@ a.header-anchor {
     }
   }
   code {
-    color: $inline-code-color;
+    color: get-light-color('inline-code-color');
   }
 }
 
 .anchor {
   padding-top: 3.5rem;
 }
+
+html[data-theme='dark'] {
+  a {
+    color: get-dark-color('accent-color');
+    &:hover,
+    &:focus {
+      text-decoration: get-dark-color('hover-over-accent-color') underline;
+      color: get-dark-color('hover-over-accent-color');
+    }
+  }
+  .list-link {
+    color: get-dark-color('text-color');
+    &:hover {
+      color: get-dark-color('accent-color');
+    }
+  }
+  a.header-anchor {
+    color: get-dark-color('heading-color');
+    i,
+    svg {
+      color: get-dark-color('text-color');
+    }
+    code {
+      color: get-dark-color('inline-code-color');
+    }
+  }
+}

assets/styles/components/misc.scss

@@ -6,12 +6,12 @@
 
   .page-item {
     & > a {
-      color: $accent-color;
+      color: get-light-color('accent-color');
     }
     &.active,
     &:hover > a {
-      background-color: $accent-color !important;
-      color: $text-over-accent-color !important;
+      background-color: get-light-color('accent-color') !important;
+      color: get-light-color('text-over-accent-color') !important;
     }
   }
 }
@@ -31,3 +31,18 @@ pre {
     }
   }
 }
+
+html[data-theme='dark'] {
+  .paginator {
+    .page-item {
+      & > a {
+        color: get-dark-color('accent-color');
+      }
+      &.active,
+      &:hover > a {
+        background-color: get-dark-color('accent-color') !important;
+        color: get-dark-color('text-over-accent-color') !important;
+      }
+    }
+  }
+}

assets/styles/components/tables.scss

@@ -1,24 +1,24 @@
 table {
   border-radius: 0.1rem;
-  border: 1px solid $border-color;
+  border: 1px solid rgba(get-light-color('accent-color'), 0.1);
   min-width: 10rem;
   padding: 0.1rem;
   thead {
     tr {
-      background: $accent-color;
-      color: $text-over-accent-color;
+      background: get-light-color('accent-color');
+      color: get-light-color('text-over-accent-color');
     }
   }
 
   tbody {
     tr {
       height: 40px !important;
-      color: $text-color;
+      color: get-light-color('text-color');
       &:nth-child(odd) {
-        background-color: $bg-primary;
+        background-color: get-light-color('bg-primary');
       }
       &:nth-child(even) {
-        background-color: rgba($accent-color, 0.05);
+        background-color: rgba(get-light-color('accent-color'), 0.05);
       }
     }
   }
@@ -33,10 +33,10 @@ table {
 
 .gist {
   table {
-    border-radius: unset;
-    background: unset;
-    border: unset;
-    padding: unset;
+    border-radius: unset !important;
+    background: unset !important;
+    border: unset !important;
+    padding: unset !important;
 
     tr {
       height: unset !important;
@@ -44,31 +44,67 @@ table {
 
     th,
     td {
-      padding: unset;
-      border-left: unset;
-      border-bottom: unset;
+      padding: unset !important;
+      border-left: unset !important;
+      border-bottom: unset !important;
     }
     td,
     tc {
-      border-right: 1px solid $border-color;
+      border-right: 1px solid rgba(get-light-color('accent-color'), 0.1);
     }
 
     thead {
       tr {
-        background: unset;
-        color: unset;
+        background: unset !important;
+        color: unset !important;
       }
     }
 
     tbody {
       tr {
         &:nth-child(odd) {
-          background-color: unset;
+          background-color: unset !important;
         }
         &:hover {
-          background: unset;
+          background: unset !important;
         }
       }
     }
   }
 }
+
+html[data-theme='dark'] {
+  table {
+    border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
+    thead {
+      tr {
+        background: get-dark-color('accent-color');
+        color: get-dark-color('text-over-accent-color');
+      }
+    }
+
+    tbody {
+      tr {
+        color: get-dark-color('text-color');
+        &:nth-child(odd) {
+          background-color: get-dark-color('bg-primary');
+        }
+        &:nth-child(even) {
+          background-color: rgba(get-dark-color('accent-color'), 0.05);
+        }
+      }
+    }
+  }
+  .gist {
+    &::selection{
+      background: get-dark-color('text-color');
+      color: get-dark-color('inverse-text-color');
+    }
+    table {
+      td,
+      tc {
+        border-right: 1px solid rgba(get-dark-color('accent-color'), 0.1);
+      }
+    }
+  }
+}

assets/styles/components/texts.scss

@@ -3,41 +3,41 @@ h2,
 h3,
 h4,
 h5 {
-  color: $heading-color;
+  color: get-light-color('heading-color');
 }
 
 strong {
-  color: $heading-color !important;
+  color: get-light-color('heading-color') !important;
 }
 
 p {
-  color: $text-color;
+  color: get-light-color('text-color');
 }
 
 blockquote {
-  border-left: 4px solid $accent-color;
-  background-color: rgba($accent-color, 0.05);
+  border-left: 4px solid get-light-color('accent-color');
+  background-color: rgba(get-light-color('accent-color'), 0.05);
   padding: 0.3rem;
   padding-left: 1rem;
 
   & > p {
-    color: $text-color;
+    color: get-light-color('text-color');
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
   }
 }
 
 .text-muted {
-  color: $muted-text-color !important;
+  color: get-light-color('muted-text-color') !important;
 }
 
 .text-heading {
   font-weight: bold;
-  color: $muted-text-color;
+  color: get-light-color('muted-text-color');
 }
 
 .sub-title {
-  color: $muted-text-color;
+  color: get-light-color('muted-text-color');
   font-size: 10pt;
 }
 
@@ -60,3 +60,50 @@ blockquote {
     font-size: 1.5rem;
   }
 }
+
+html[data-theme='dark'] {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    color: get-dark-color('heading-color');
+  }
+
+  strong {
+    color: get-dark-color('heading-color') !important;
+  }
+
+  p {
+    color: get-dark-color('text-color');
+  }
+
+  blockquote {
+    border-left: 4px solid get-dark-color('accent-color');
+    background-color: rgba(get-dark-color('accent-color'), 0.05);
+    color: get-dark-color('text-color');
+  }
+
+  .text-muted {
+    color: get-dark-color('muted-text-color') !important;
+  }
+
+  .text-heading {
+    color: get-dark-color('muted-text-color');
+  }
+
+  .sub-title {
+    color: get-dark-color('muted-text-color');
+  }
+  ::-moz-selection {
+    @include selection-color($theme: 'dark');
+  }
+
+  ::selection {
+    @include selection-color($theme: 'dark');
+  }
+  li,
+  ul {
+    color: get-dark-color('text-color');
+  }
+}