Optimize dark theme (alshedivat#431)

* Optimize dark theme * Fix-up * Minor fixes Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
semicolonsnet · Oct 24, 2022 · a2deef3 · a2deef3
1 parent 9ceba8e
commit a2deef3
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -8,6 +8,10 @@ p, h1, h2, h3, h4, h5, h6, em, div, li, span, strong {
   color: var(--global-text-color);
 }
 
+hr {
+  border-top: 1px solid var(--global-divider-color);
+}
+
 a, table.table a {
   color: var(--global-theme-color);
   &:hover {
@@ -92,18 +96,22 @@ blockquote {
 
 .navbar {
   box-shadow: none;
-  border-bottom: 1px solid $grey-color-light;
+  border-bottom: 1px solid var(--global-divider-color);
   background-color: var(--global-bg-color);
   opacity: 0.95;
 }
 .navbar .dropdown-menu {
   background-color: var(--global-bg-color);
+  border: 1px solid var(--global-divider-color);
   a:not(.active) {
     color: var(--global-text-color);
   }
   a:hover {
     color: var(--global-hover-color);
   }
+  .dropdown-divider {
+    border-top: 1px solid var(--global-divider-color) !important;
+  }
 }
 .dropdown-item {
   color: var(--global-text-color);
@@ -244,7 +252,7 @@ footer.fixed-bottom {
 }
 
 footer.sticky-bottom {
-  border-top: 1px solid $grey-color-light;
+  border-top: 1px solid var(--global-divider-color);
   padding-top: 40px;
   padding-bottom: 40px;
   font-size: 0.9rem;
@@ -254,7 +262,7 @@ footer.sticky-bottom {
 // Blog
 
 .header-bar {
-  border-bottom: 1px solid $grey-color-light;
+  border-bottom: 1px solid var(--global-divider-color);
   text-align: center;
   padding-top: 2rem;
   padding-bottom: 5rem;
@@ -270,9 +278,10 @@ footer.sticky-bottom {
   margin-bottom: 40px;
   padding: 0;
   li {
-      margin-top: 2rem;
+    margin-top: 2rem;
 
     border-top: 1px solid $grey-color-light;
+
     list-style: none;
     padding-top: 2rem;
     padding-bottom: 2rem;
@@ -363,8 +372,8 @@ footer.sticky-bottom {
   }
 
   h2.category {
-    color: $grey-color-light;
-    border-bottom: 1px solid $grey-color-light;
+    color: var(--global-divider-color);
+    border-bottom: 1px solid var(--global-divider-color);
     padding-top: 0.5rem;
     margin-top: 2rem;
     margin-bottom: 1rem;
@@ -391,8 +400,8 @@ footer.sticky-bottom {
     }
   }
   h2.year {
-    color: $grey-color-light;
-    border-top: 1px solid $grey-color-light;
+    color: var(--global-divider-color);
+    border-top: 1px solid var(--global-divider-color);
     padding-top: 1rem;
     margin-top: 2rem;
     margin-bottom: -2rem;
@@ -441,11 +450,11 @@ footer.sticky-bottom {
           font-style: normal;
         }
       }
-      
+
       .periodical {
       	font-weight: light;
       	font-size: 1rem;
-      
+
       }
       .links {
         a.btn {

diff --git a/_sass/_themes.scss b/_sass/_themes.scss
@@ -13,6 +13,7 @@
   --global-footer-text-color: #{$grey-color-light};
   --global-footer-link-color: #{$white-color};
   --global-distill-app-color: #{$grey-color};
+  --global-divider-color: rgba(0,0,0,.1);
 
   .fa-sun {
     display : none;
@@ -35,6 +36,7 @@ html[data-theme='dark'] {
   --global-footer-text-color: #{$grey-color-dark};
   --global-footer-link-color: #{$black-color};
   --global-distill-app-color: #{$grey-color-light};
+  --global-divider-color: #424246;
 
   .fa-sun {
     padding-left: 10px;

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -27,6 +27,7 @@ $grey-color:          #828282 !default;
 $grey-color-light:    lighten($grey-color, 40%);
 $grey-color-dark:     darken($grey-color, 40%);
 
+
 $white-color: #ffffff !default;
 $black-color: #000000 !default;
 
@@ -35,4 +36,3 @@ $black-color: #000000 !default;
 
 $code-bg-color-light:     rgba($purple-color, 0.05);
 $code-bg-color-dark:      #2c3237 !default;
-