Skip to content

Commit 75d868b

Browse files
rjzupkoiirjzupkoii
committed
#137, #851, #911, #1031 dark theme that can be set via _config.yml
1 parent 2363012 commit 75d868b

File tree

9 files changed

+81
-23
lines changed

9 files changed

+81
-23
lines changed

‎_sass/_themes.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
/* ==========================================================================
2+
COMMON COLOR CODES
3+
========================================================================== */
4+
5+
/* Color codes used throughout the site */
6+
$gray : #7a8288;
7+
$dark-gray : mix(#000, $gray, 40%);
8+
$darker-gray : mix(#000, $gray, 60%);
9+
$light-gray : mix(#fff, $gray, 50%);
10+
$lighter-gray : mix(#fff, $gray, 90%);
11+
112
/* ==========================================================================
213
TYPOGRAPHY
314
========================================================================== */

‎_sass/include/_utilities.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -471,12 +471,12 @@ body:hover .visually-hidden button {
471471
========================================================================== */
472472

473473
.footnote {
474-
color: mix(#fff, $gray, 25%);
474+
color: var(--global-text-color-light);
475475
text-decoration: none;
476476
}
477477

478478
.footnotes {
479-
color: mix(#fff, $gray, 25%);
479+
color: var(--global-text-color-light);
480480

481481
ol, li, p {
482482
margin-bottom: 0;

‎_sass/layout/_base.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ html {
1010
body {
1111
/* Set via _themes.scss */
1212
color: var(--global-text-color);
13-
background-color: var(--global-gb-color);
13+
background-color: var(--global-bg-color);
1414

1515
margin: 0;
1616
padding: $masthead-height 0 0;
@@ -100,7 +100,7 @@ blockquote {
100100
padding-left: 1em;
101101
padding-right: 1em;
102102
font-style: italic;
103-
border-left: 0.25em solid var(--global-base-color);
103+
border-left: 0.25em solid var(--global-border-color);
104104

105105
cite {
106106
font-style: italic;
@@ -135,10 +135,11 @@ pre {
135135
overflow-x: auto; /* add scrollbars to wide code blocks*/
136136
}
137137

138-
p > code,
139138
a > code,
140-
li > code,
141139
figcaption > code,
140+
li > code,
141+
p > code,
142+
pre > code,
142143
td > code {
143144
padding-top: 0.1rem;
144145
padding-bottom: 0.1rem;
@@ -147,6 +148,7 @@ td > code {
147148
border: 1px solid $lighter-gray;
148149
border-radius: $border-radius;
149150
box-shadow: $box-shadow;
151+
color: var(--global-code-text-color);
150152

151153
&:before, &:after {
152154
letter-spacing: -0.2em;

‎_sass/layout/_footer.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,27 @@
44

55
.page__footer {
66
@include clearfix;
7+
background-color: var(--global-bg-color);
8+
color: var(--global-text-color-light);
9+
710
float: left;
811
margin-left: 0;
912
margin-right: 0;
1013
width: 100%;
1114
clear: both;
15+
1216
/* sticky footer fix start */
1317
position: absolute;
1418
bottom: 0em;
1519
height: auto;
1620
/* sticky footer fix end */
21+
1722
margin-top: 3em;
18-
color: mix(#fff, $gray, 25%);
23+
1924
-webkit-animation: intro 0.3s both;
2025
animation: intro 0.3s both;
2126
-webkit-animation-delay: 0.45s;
2227
animation-delay: 0.45s;
23-
background-color: $lighter-gray;
2428
border-top: 1px solid $light-gray;
2529

2630
footer {

‎_sass/layout/_masthead.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
.masthead {
66
position: fixed;
7-
background: white;
7+
background: var(--global-bg-color);
88
border-bottom: 1px solid var(--global-border-color);
99
height: $masthead-height;
1010
top: 0;

‎_sass/layout/_notices.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
background-color: mix(#fff, $notice-color, 90%);
2020
border-radius: $border-radius;
2121
box-shadow: 0 1px 1px rgba($notice-color, 0.25);
22+
color: var(--global-code-text-color);
2223

2324
h4 {
2425
margin-top: 0 !important; /* override*/

‎_sass/layout/_tables.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,29 @@ table {
88
font-family: $global-font-family;
99
font-size: $type-size-6;
1010
border-collapse: collapse;
11-
border: 1px solid $light-gray;
11+
border: 1px solid var(--global-border-color);
1212

1313
& + table {
1414
margin-top: 1em;
1515
}
1616
}
1717

1818
thead {
19-
background-color: $lighter-gray;
20-
border-bottom: 1px solid $light-gray;
19+
background-color: $light-gray;
20+
border-bottom: 1px solid var(--global-border-color);
2121
}
2222

2323
th {
2424
padding: 0.5em;
2525
font-weight: bold;
2626
text-align: left;
27-
border-right: 1px solid $light-gray;
27+
border-right: 1px solid var(--global-border-color);
2828
}
2929

3030
td {
3131
padding: 0.5em;
32-
border-bottom: 1px solid $light-gray;
33-
border-right: 1px solid $light-gray;
32+
border-bottom: 1px solid var(--global-border-color);
33+
border-right: 1px solid var(--global-border-color);
3434
}
3535

3636
tr, td, th {

‎_sass/theme/_dark.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/* ==========================================================================
2+
DARK THEME
3+
========================================================================== */
4+
5+
/* Color codes used throughout the site */
6+
$background : #474747;
7+
$background-light : mix(#fff, $background, 80%);
8+
$background-lighter : mix(#fff, $background, 90%);
9+
$text : #ffffff;
10+
$link : #0ea1c5;
11+
$link-dark : mix(#000, $link, 25%);
12+
$link-light : mix(#fff, $link, 25%);
13+
14+
/* Color codes used for the site */
15+
$danger-color : #ee5f5b;
16+
$info-color : #2f7f93;
17+
$notice-color : #7a8288;
18+
$success-color : #62c462;
19+
$warning-color : #f89406;
20+
21+
/* Other basic settings for the template */
22+
$border-radius : 4px;
23+
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
24+
$global-transition : all 0.2s ease-in-out;
25+
$navicon-width : 28px;
26+
$navicon-height : 4px;
27+
$masthead-height : 70px;
28+
$sidebar-link-max-width : 250px;
29+
$sidebar-screen-min-width : 1024px;
30+
31+
/* Default light theme for the site */
32+
:root {
33+
--global-base-color : #{$background};
34+
--global-bg-color : #{$background};
35+
--global-border-color : #{$background-light};
36+
--global-code-background-color : #fafafa;
37+
--global-code-text-color : #{$darker-gray};
38+
--global-fig-caption-color : #{$dark-gray};
39+
--global-link-color : #{$link};
40+
--global-link-color-hover : #{$link-dark};
41+
--global-link-color-visited : #{$link-light};
42+
--global-masthead-link-color : #{$text};
43+
--global-masthead-link-color-hover : #{$background-light};
44+
--global-text-color : #{$text};
45+
--global-text-color-light : #{$light-gray};
46+
--global-thead-color : #{$background-lighter};
47+
}

‎_sass/theme/_default.scss‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,6 @@
22
DEFAULT THEME
33
========================================================================== */
44

5-
/* Color codes used throughout the site */
6-
$gray : #7a8288;
7-
$dark-gray : mix(#000, $gray, 40%);
8-
$darker-gray : mix(#000, $gray, 60%);
9-
$light-gray : mix(#fff, $gray, 50%);
10-
$lighter-gray : mix(#fff, $gray, 90%);
11-
125
/* Color codes used for the site */
136
$danger-color : #ee5f5b;
147
$info-color : #2f7f93;
@@ -36,7 +29,7 @@ $sidebar-screen-min-width : 1024px;
3629
--global-link-color : #2f7f93;
3730
--global-link-color-hover : mix(#000, #2f7f93, 25%);
3831
--global-link-color-visited : mix(#fff, #2f7f93, 25%);
39-
--global-masthead-link-color : #{$gray};
32+
--global-masthead-link-color : #{$dark-gray};
4033
--global-masthead-link-color-hover : mix(#000, #{$gray}, 25%);
4134
--global-text-color : #{$dark-gray};
4235
}

0 commit comments

Comments
 (0)