Skip to content

Commit

Permalink
Optimize dark theme (alshedivat#431)
Browse files Browse the repository at this point in the history
* Optimize dark theme

* Fix-up

* Minor fixes

Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
  • Loading branch information
Edsuns and alshedivat authored Oct 30, 2021
1 parent 55b77d0 commit d0ea86a
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 10 deletions.
24 changes: 16 additions & 8 deletions _sass/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions _sass/_themes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
3 changes: 1 addition & 2 deletions _sass/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -35,4 +35,3 @@ $black-color: #000000 !default;

$code-bg-color-light: rgba($purple-color, 0.05);
$code-bg-color-dark: #2c3237 !default;

0 comments on commit d0ea86a

Please sign in to comment.