Skip to content

Commit b542274

Browse files
andrey-lepekhinandrey-lepekhin
committed
Added native dark mode support
I've found all the places that need to be fixed using commit to Pixyll theme johno/pixyll@72a15dc
1 parent 6bef5c1 commit b542274

13 files changed

Lines changed: 244 additions & 31 deletions

‎_sass/_base.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,15 @@ MIT License http://opensource.org/licenses/MIT
1616
html, body {
1717
height: auto;
1818
min-height: 100%;
19+
background-color: $base-bg-color;
20+
color: $base-font-color;
21+
}
22+
23+
@media (prefers-color-scheme: dark) {
24+
html, body {
25+
background-color: $dark-gray;
26+
color: $dark-mode-font-color;
27+
}
1928
}
2029

2130
img {

‎_sass/_blockquotes.scss‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,29 @@
11
blockquote {
2-
border-left: 5px solid #7a7a7a;
2+
border-left: 5px solid $blockquote-color;
33
/*font-style: italic;*/
44
margin-left: $space-1;
55
padding: $space-1;
66
}
77

88
blockquote footer {
9-
background-color: #fff;
9+
background-color: $blockquote-bg-color;
1010
border-color: transparent;
11-
color: #7a7a7a;
11+
color: $blockquote-color;
1212
font-size: .85rem;
1313
font-style: normal;
1414
text-align: left;
1515
padding: 0;
1616
}
1717

18+
@media (prefers-color-scheme: dark) {
19+
blockquote {
20+
border-left: 5px solid $dark-mode-font-color;
21+
}
22+
blockquote footer {
23+
// TODO dark mode
24+
}
25+
}
26+
1827
blockquote p:last-of-type {
1928
margin-bottom: 0rem;
2029
}

‎_sass/_code.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ code {
1010
}
1111

1212
code {
13-
color: #7a7a7a;
13+
color: #7a7a7a; // TODO dark mode
1414
}
1515

1616
pre {

‎_sass/_footer.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,10 @@ footer {
2727
padding: $footer-padding;
2828
text-align: center;
2929
}
30+
31+
@media (prefers-color-scheme: dark) {
32+
footer {
33+
background-color: $dark-mode-footer-bg-color;
34+
}
35+
36+
}

‎_sass/_header.scss‎

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,18 @@
55
}
66

77
.site-header a {
8-
color: #333;
8+
color: $base-font-color;
99
font-size: $h3;
1010
font-weight: 300;
1111
background-image: none;
1212
}
1313

14+
@media (prefers-color-scheme: dark) {
15+
.site-header a {
16+
color: $dark-mode-font-color;
17+
}
18+
}
19+
1420
.site-header .site-title {
1521
font-size: $h2;
1622
}
@@ -20,15 +26,31 @@
2026
}
2127

2228
.site-header nav a {
23-
color: #666;
29+
color: $nav-link-color;
30+
}
31+
32+
@media (prefers-color-scheme: dark) {
33+
.site-header nav a {
34+
color: $dark-mode-nav-link-color;
35+
}
2436
}
2537

2638
.site-header nav a:hover,
2739
.site-header nav a:focus,
2840
.site-header nav a:active {
29-
color: #444;
41+
color: $nav-link-color;
3042
opacity: 1;
31-
border-bottom: 2px solid #444;
43+
border-bottom: 2px solid $nav-link-color;
44+
}
45+
46+
@media (prefers-color-scheme: dark) {
47+
.site-header nav a:hover,
48+
.site-header nav a:focus,
49+
.site-header nav a:active {
50+
color: lighten($dark-mode-nav-link-color, 30%);
51+
opacity: 1;
52+
border-bottom: $dark-mode-nav-active-border-bottom;
53+
}
3254
}
3355

3456
.site-nav a + a {
@@ -39,7 +61,16 @@
3961
.posts .post a:hover .post-meta,
4062
.posts .post a:hover .post-title,
4163
.posts .post a:hover .post-summary {
42-
opacity: 0.88;
64+
color: lighten($base-font-color, 10%);
65+
}
66+
67+
@media (prefers-color-scheme: dark) {
68+
.site-header a:hover,
69+
.posts .post a:hover .post-meta,
70+
.posts .post a:hover .post-title,
71+
.posts .post a:hover .post-summary {
72+
color: lighten($dark-mode-font-color, 20%);
73+
}
4374
}
4475

4576
.site-header {
@@ -57,7 +88,15 @@
5788
.site-index a:hover,
5889
.site-index a:focus,
5990
.site-index a:active {
60-
color: #444;
6191
opacity: 1;
62-
border-bottom: 2px solid #444;
92+
border-bottom: 2px solid $base-font-color;
93+
}
94+
95+
@media (prefers-color-scheme: dark) {
96+
.site-index a:hover,
97+
.site-index a:focus,
98+
.site-index a:active {
99+
opacity: 1;
100+
border-bottom: 2px solid $dark-mode-font-color;
101+
}
63102
}

‎_sass/_links.scss‎

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ a {
66
rgba($link-color,.8) 18%,
77
rgba(0,0,0,0) 17%
88
);
9-
text-shadow: white 1px 0px 0px, white -1px 0px 0px;
9+
text-shadow: $base-bg-color 1px 0px 0px, $base-bg-color -1px 0px 0px;
1010
}
1111

1212
a:hover,
@@ -21,14 +21,48 @@ a:active {
2121
rgba($link-hover-color,.8) 17%,
2222
rgba(0,0,0,0) 17%
2323
);
24-
text-shadow: white 1px 0px 0px, white -1px 0px 0px;
24+
text-shadow: $base-bg-color 1px 0px 0px, $base-bg-color -1px 0px 0px;
25+
}
26+
27+
@media (prefers-color-scheme: dark) {
28+
a {
29+
color: $dark-mode-link-color;
30+
background-image: linear-gradient(to top,
31+
rgba(0,0,0,0) 13%,
32+
rgba($dark-mode-link-color,.8) 13%,
33+
rgba($dark-mode-link-color,.8) 18%,
34+
rgba(0,0,0,0) 17%
35+
);
36+
text-shadow: $dark-mode-bg-color 1px 0px 0px, $dark-mode-bg-color -1px 0px 0px;
37+
}
38+
39+
a:hover,
40+
a:focus,
41+
a:active {
42+
border: 0;
43+
color: $dark-mode-link-hover-color;
44+
text-decoration: none;
45+
background-image: linear-gradient(to top,
46+
rgba(0,0,0,0) 13%,
47+
rgba($dark-mode-link-hover-color,.8) 13%,
48+
rgba($dark-mode-link-hover-color,.8) 17%,
49+
rgba(0,0,0,0) 17%
50+
);
51+
text-shadow: $dark-mode-bg-color 1px 0px 0px, $dark-mode-bg-color -1px 0px 0px;
52+
}
2553
}
2654

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

60+
@media (prefers-color-scheme: dark) {
61+
a:visited {
62+
color: $dark-mode-link-visited-color;
63+
}
64+
}
65+
3266
// Correct issues with buttons
3367
button,
3468
.button {
@@ -39,11 +73,19 @@ button,
3973
.button:hover,
4074
.button:focus,
4175
.button:active {
42-
color: white;
76+
color: $base-bg-color;
4377
text-shadow: none;
4478
background-image: none;
4579
}
4680

81+
@media (prefers-color-scheme: dark) {
82+
.button:hover,
83+
.button:focus,
84+
.button:active {
85+
color: $dark-mode-bg-color;
86+
}
87+
}
88+
4789
.anchorjs-link {
4890
text-shadow: none;
4991
background-image: none;

‎_sass/_pagination.scss‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,27 @@
99
-webkit-transition: all 0.2s ease-in-out;
1010
-moz-transition: all 0.2s ease-in-out;
1111
transition: all 0.2s ease-in-out;
12-
background: #0076df33;
12+
background: $pagination-background-color;
1313
border-radius: 0.1875em;
1414
border: 1px solid #f3f3f3;
15-
color: #333333;
15+
color: $pagination-link-color;
1616
padding: 1em 1.5em;
1717
}
1818

19+
@media (prefers-color-scheme: dark) {
20+
.pagination a, .pagination .disabled {
21+
-webkit-transition: all 0.2s ease-in-out;
22+
-moz-transition: all 0.2s ease-in-out;
23+
transition: all 0.2s ease-in-out;
24+
background: $dark-mode-pagination-background-color;
25+
border-radius: 0.1875em;
26+
border: 1px solid #f3f3f3;
27+
color: $dark-mode-pagination-link-color;
28+
padding: 1em 1.5em;
29+
}
30+
}
31+
32+
1933
.disabled {
2034
opacity: 0.5;
2135
}
@@ -30,11 +44,19 @@
3044
}
3145

3246
.pagination a:hover, .pagination a:focus {
33-
background: white;
34-
color: #477dca;
47+
background: $pagination-hover-background-color;
48+
color: $pagination-link-hover-color;
3549
border-color: #e0e0e0;
3650
}
3751

52+
@media (prefers-color-scheme: dark) {
53+
.pagination a:hover, .pagination a:focus {
54+
background: $dark-mode-pagination-hover-background-color;
55+
color: $dark-mode-pagination-link-hover-color;
56+
border-color: #e0e0e0;
57+
}
58+
}
59+
3860
.pagination a:active {
3961
background: #f7f7f7;
4062
}

‎_sass/_posts.scss‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,14 @@
55

66
.posts .post {
77
margin-bottom: 0.75em;
8-
border-bottom: thin solid #f3f3f3;
8+
border-bottom: thin solid $post-index-separator-color;
9+
}
10+
11+
@media (prefers-color-scheme: dark) {
12+
.posts .post {
13+
margin-bottom: 0.75em;
14+
border-bottom: thin solid $dark-mode-post-index-separator-color;
15+
}
916
}
1017

1118
.posts .post:last-child {
@@ -17,7 +24,15 @@
1724
.post-link .post-title {
1825
margin-top: 0;
1926
font-weight: 600;
20-
color: #333;
27+
color: $post-link-color;
28+
}
29+
30+
@media (prefers-color-scheme: dark) {
31+
.post-link .post-title {
32+
margin-top: 0;
33+
font-weight: 600;
34+
color: $dark-mode-post-link-color;
35+
}
2136
}
2237

2338
.post-footer {
@@ -30,7 +45,7 @@
3045
.post-footer .avatar {
3146
margin: 2rem 0;
3247
width: 100px;
33-
border-radius: 50%;
48+
border-radius: 50
3449
}
3550

3651
.meta,
@@ -39,7 +54,7 @@
3954
font-weight: 300;
4055
margin: 0;
4156
padding: .25em 0;
42-
/*color: #7a7a7a;*/
57+
/*color: #7a7a7a; // or $post-meta-color */
4358
font-style: italic;
4459
}
4560

‎_sass/_tables.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,5 @@ table {
4343
border-top: 2px solid #333;
4444
}
4545
}
46+
47+
//TODO dark mode

‎_sass/_typography.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,16 @@ abbr {
88
}
99

1010
p {
11-
color: #333;
11+
color: $base-font-color;
1212
line-height: 1.75;
1313
}
1414

15+
@media (prefers-color-scheme: dark) {
16+
p {
17+
color: $dark-mode-font-color;
18+
}
19+
}
20+
1521
small,
1622
.small {
1723
font-size: 0.707rem;

0 commit comments

Comments
 (0)