Skip to content

Commit

Permalink
Added native dark mode support
Browse files Browse the repository at this point in the history
I've found all the places that need to be fixed using commit to Pixyll theme johno/pixyll@72a15dc
  • Loading branch information
andrey-lepekhin committed Jan 30, 2022
1 parent 6bef5c1 commit b542274
Show file tree
Hide file tree
Showing 13 changed files with 244 additions and 31 deletions.
9 changes: 9 additions & 0 deletions _sass/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,15 @@ MIT License http://opensource.org/licenses/MIT
html, body {
height: auto;
min-height: 100%;
background-color: $base-bg-color;
color: $base-font-color;
}

@media (prefers-color-scheme: dark) {
html, body {
background-color: $dark-gray;
color: $dark-mode-font-color;
}
}

img {
Expand Down
15 changes: 12 additions & 3 deletions _sass/_blockquotes.scss
Original file line number Diff line number Diff line change
@@ -1,20 +1,29 @@
blockquote {
border-left: 5px solid #7a7a7a;
border-left: 5px solid $blockquote-color;
/*font-style: italic;*/
margin-left: $space-1;
padding: $space-1;
}

blockquote footer {
background-color: #fff;
background-color: $blockquote-bg-color;
border-color: transparent;
color: #7a7a7a;
color: $blockquote-color;
font-size: .85rem;
font-style: normal;
text-align: left;
padding: 0;
}

@media (prefers-color-scheme: dark) {
blockquote {
border-left: 5px solid $dark-mode-font-color;
}
blockquote footer {
// TODO dark mode
}
}

blockquote p:last-of-type {
margin-bottom: 0rem;
}
2 changes: 1 addition & 1 deletion _sass/_code.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ code {
}

code {
color: #7a7a7a;
color: #7a7a7a; // TODO dark mode
}

pre {
Expand Down
7 changes: 7 additions & 0 deletions _sass/_footer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,10 @@ footer {
padding: $footer-padding;
text-align: center;
}

@media (prefers-color-scheme: dark) {
footer {
background-color: $dark-mode-footer-bg-color;
}

}
53 changes: 46 additions & 7 deletions _sass/_header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,18 @@
}

.site-header a {
color: #333;
color: $base-font-color;
font-size: $h3;
font-weight: 300;
background-image: none;
}

@media (prefers-color-scheme: dark) {
.site-header a {
color: $dark-mode-font-color;
}
}

.site-header .site-title {
font-size: $h2;
}
Expand All @@ -20,15 +26,31 @@
}

.site-header nav a {
color: #666;
color: $nav-link-color;
}

@media (prefers-color-scheme: dark) {
.site-header nav a {
color: $dark-mode-nav-link-color;
}
}

.site-header nav a:hover,
.site-header nav a:focus,
.site-header nav a:active {
color: #444;
color: $nav-link-color;
opacity: 1;
border-bottom: 2px solid #444;
border-bottom: 2px solid $nav-link-color;
}

@media (prefers-color-scheme: dark) {
.site-header nav a:hover,
.site-header nav a:focus,
.site-header nav a:active {
color: lighten($dark-mode-nav-link-color, 30%);
opacity: 1;
border-bottom: $dark-mode-nav-active-border-bottom;
}
}

.site-nav a + a {
Expand All @@ -39,7 +61,16 @@
.posts .post a:hover .post-meta,
.posts .post a:hover .post-title,
.posts .post a:hover .post-summary {
opacity: 0.88;
color: lighten($base-font-color, 10%);
}

@media (prefers-color-scheme: dark) {
.site-header a:hover,
.posts .post a:hover .post-meta,
.posts .post a:hover .post-title,
.posts .post a:hover .post-summary {
color: lighten($dark-mode-font-color, 20%);
}
}

.site-header {
Expand All @@ -57,7 +88,15 @@
.site-index a:hover,
.site-index a:focus,
.site-index a:active {
color: #444;
opacity: 1;
border-bottom: 2px solid #444;
border-bottom: 2px solid $base-font-color;
}

@media (prefers-color-scheme: dark) {
.site-index a:hover,
.site-index a:focus,
.site-index a:active {
opacity: 1;
border-bottom: 2px solid $dark-mode-font-color;
}
}
48 changes: 45 additions & 3 deletions _sass/_links.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ a {
rgba($link-color,.8) 18%,
rgba(0,0,0,0) 17%
);
text-shadow: white 1px 0px 0px, white -1px 0px 0px;
text-shadow: $base-bg-color 1px 0px 0px, $base-bg-color -1px 0px 0px;
}

a:hover,
Expand All @@ -21,14 +21,48 @@ a:active {
rgba($link-hover-color,.8) 17%,
rgba(0,0,0,0) 17%
);
text-shadow: white 1px 0px 0px, white -1px 0px 0px;
text-shadow: $base-bg-color 1px 0px 0px, $base-bg-color -1px 0px 0px;
}

@media (prefers-color-scheme: dark) {
a {
color: $dark-mode-link-color;
background-image: linear-gradient(to top,
rgba(0,0,0,0) 13%,
rgba($dark-mode-link-color,.8) 13%,
rgba($dark-mode-link-color,.8) 18%,
rgba(0,0,0,0) 17%
);
text-shadow: $dark-mode-bg-color 1px 0px 0px, $dark-mode-bg-color -1px 0px 0px;
}

a:hover,
a:focus,
a:active {
border: 0;
color: $dark-mode-link-hover-color;
text-decoration: none;
background-image: linear-gradient(to top,
rgba(0,0,0,0) 13%,
rgba($dark-mode-link-hover-color,.8) 13%,
rgba($dark-mode-link-hover-color,.8) 17%,
rgba(0,0,0,0) 17%
);
text-shadow: $dark-mode-bg-color 1px 0px 0px, $dark-mode-bg-color -1px 0px 0px;
}
}

a:visited {
color: $link-visited-color;
/*background-image doesn't work on :visited so unglines ensues*/
}

@media (prefers-color-scheme: dark) {
a:visited {
color: $dark-mode-link-visited-color;
}
}

// Correct issues with buttons
button,
.button {
Expand All @@ -39,11 +73,19 @@ button,
.button:hover,
.button:focus,
.button:active {
color: white;
color: $base-bg-color;
text-shadow: none;
background-image: none;
}

@media (prefers-color-scheme: dark) {
.button:hover,
.button:focus,
.button:active {
color: $dark-mode-bg-color;
}
}

.anchorjs-link {
text-shadow: none;
background-image: none;
Expand Down
30 changes: 26 additions & 4 deletions _sass/_pagination.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,27 @@
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background: #0076df33;
background: $pagination-background-color;
border-radius: 0.1875em;
border: 1px solid #f3f3f3;
color: #333333;
color: $pagination-link-color;
padding: 1em 1.5em;
}

@media (prefers-color-scheme: dark) {
.pagination a, .pagination .disabled {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background: $dark-mode-pagination-background-color;
border-radius: 0.1875em;
border: 1px solid #f3f3f3;
color: $dark-mode-pagination-link-color;
padding: 1em 1.5em;
}
}


.disabled {
opacity: 0.5;
}
Expand All @@ -30,11 +44,19 @@
}

.pagination a:hover, .pagination a:focus {
background: white;
color: #477dca;
background: $pagination-hover-background-color;
color: $pagination-link-hover-color;
border-color: #e0e0e0;
}

@media (prefers-color-scheme: dark) {
.pagination a:hover, .pagination a:focus {
background: $dark-mode-pagination-hover-background-color;
color: $dark-mode-pagination-link-hover-color;
border-color: #e0e0e0;
}
}

.pagination a:active {
background: #f7f7f7;
}
Expand Down
23 changes: 19 additions & 4 deletions _sass/_posts.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,14 @@

.posts .post {
margin-bottom: 0.75em;
border-bottom: thin solid #f3f3f3;
border-bottom: thin solid $post-index-separator-color;
}

@media (prefers-color-scheme: dark) {
.posts .post {
margin-bottom: 0.75em;
border-bottom: thin solid $dark-mode-post-index-separator-color;
}
}

.posts .post:last-child {
Expand All @@ -17,7 +24,15 @@
.post-link .post-title {
margin-top: 0;
font-weight: 600;
color: #333;
color: $post-link-color;
}

@media (prefers-color-scheme: dark) {
.post-link .post-title {
margin-top: 0;
font-weight: 600;
color: $dark-mode-post-link-color;
}
}

.post-footer {
Expand All @@ -30,7 +45,7 @@
.post-footer .avatar {
margin: 2rem 0;
width: 100px;
border-radius: 50%;
border-radius: 50
}

.meta,
Expand All @@ -39,7 +54,7 @@
font-weight: 300;
margin: 0;
padding: .25em 0;
/*color: #7a7a7a;*/
/*color: #7a7a7a; // or $post-meta-color */
font-style: italic;
}

Expand Down
2 changes: 2 additions & 0 deletions _sass/_tables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,5 @@ table {
border-top: 2px solid #333;
}
}

//TODO dark mode
8 changes: 7 additions & 1 deletion _sass/_typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,16 @@ abbr {
}

p {
color: #333;
color: $base-font-color;
line-height: 1.75;
}

@media (prefers-color-scheme: dark) {
p {
color: $dark-mode-font-color;
}
}

small,
.small {
font-size: 0.707rem;
Expand Down
Loading

0 comments on commit b542274

Please sign in to comment.