Optimize dark theme (#431)

* Optimize dark theme * Fix-up * Minor fixes Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
kushalarora · Oct 30, 2021 · fe3339d · fe3339d
1 parent 1c52125
commit fe3339d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 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 {
@@ -91,18 +95,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);
@@ -242,7 +250,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;
@@ -252,7 +260,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;
@@ -267,7 +275,7 @@ footer.sticky-bottom {
  margin-bottom: 40px;
  padding: 0;
  li {
- border-bottom: 1px solid $grey-color-light;
+ border-bottom: 1px solid var(--global-divider-color);
  list-style: none;
  padding-top: 2rem;
  padding-bottom: 2rem;
@@ -358,8 +366,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;
@@ -386,8 +394,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;

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
@@ -25,7 +25,7 @@ $yellow-color: #efcc00 !default;
 
 $grey-color: #828282 !default;
 $grey-color-light: lighten($grey-color, 40%);
-$grey-color-dark: darken($grey-color, 25%);
+$grey-color-dark: #1C1C1D;
 
 $white-color: #ffffff !default;
 $black-color: #000000 !default;
@@ -35,4 +35,3 @@ $black-color: #000000 !default;
 
 $code-bg-color-light: rgba($purple-color, 0.05);
 $code-bg-color-dark: #2c3237 !default;
-