Skip to content

Commit fa2a185

Browse files
bitbrainbitbrain
committed
Initial light theme including toggle
1 parent bb17553 commit fa2a185

File tree

11 files changed

+176
-22
lines changed

11 files changed

+176
-22
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ _site
33
.jekyll-metadata
44
Gemfile.lock
55
*.gem
6+
*.idea

‎_includes/footer.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
<footer class="site-footer">
22
<div class="wrapper">
3-
<div class="credits"><a href="https://github.com/bitbrain/jekyll-dash">dash</a> theme for Jekyll by <a href="https://github.com/bitbrain">bitbrain</a> made with <i class="fas fa-heart"></i></div>
3+
<div class="credits"><a href="https://github.com/bitbrain/jekyll-dash">dash</a> theme for Jekyll by <a href="https://github.com/bitbrain">bitbrain</a> made with <i class="fas fa-heart"></i>
4+
{%- include theme-toggle.html -%}
5+
</div>
46
</div>
57
</footer>
8+
9+

‎_includes/theme-toggle.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<button id="theme-toggle" onclick="modeSwitcher()"></button>
2+
<script type="text/javascript">
3+
const theme = localStorage.getItem('theme');
4+
if (theme === "dark") {
5+
document.documentElement.setAttribute('data-theme', 'dark');
6+
}
7+
const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content');
8+
9+
if (theme === "dark") {
10+
document.documentElement.setAttribute('data-theme', 'dark');
11+
document.documentElement.classList.add('theme--dark');
12+
document.documentElement.classList.remove('theme--light');
13+
document.getElementById("theme-toggle").className = 'light';
14+
} else if (theme === "light") {
15+
document.documentElement.setAttribute('data-theme', 'light');
16+
document.documentElement.classList.add('theme--light');
17+
document.documentElement.classList.remove('theme--dark');
18+
document.getElementById("theme-toggle").className = 'dark';
19+
} else if (userPrefers === "dark") {
20+
document.documentElement.setAttribute('data-theme', 'dark');
21+
document.documentElement.classList.add('theme--dark');
22+
document.documentElement.classList.remove('theme--light');
23+
window.localStorage.setItem('theme', 'dark');
24+
document.getElementById("theme-toggle").className = 'light';
25+
} else {
26+
document.documentElement.setAttribute('data-theme', 'light');
27+
document.documentElement.classList.add('theme--light');
28+
document.documentElement.classList.remove('theme--dark');
29+
window.localStorage.setItem('theme', 'light');
30+
document.getElementById("theme-toggle").className = 'dark';
31+
}
32+
33+
function modeSwitcher() {
34+
let currentMode = document.documentElement.getAttribute('data-theme');
35+
if (currentMode === "dark") {
36+
document.documentElement.setAttribute('data-theme', 'light');
37+
document.documentElement.classList.add('theme--light');
38+
document.documentElement.classList.remove('theme--dark');
39+
window.localStorage.setItem('theme', 'light');
40+
document.getElementById("theme-toggle").className = 'dark';
41+
} else {
42+
document.documentElement.setAttribute('data-theme', 'dark');
43+
document.documentElement.classList.add('theme--dark');
44+
document.documentElement.classList.remove('theme--light');
45+
window.localStorage.setItem('theme', 'dark');
46+
document.getElementById("theme-toggle").className = 'light';
47+
}
48+
}
49+
</script>

‎_layouts/default.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
</main>
1515

1616
{%- include footer.html -%}
17-
1817
<script>
1918
window.FontAwesomeConfig = {
2019
searchPseudoElements: true

‎_sass/dash.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,9 @@ $spacing-unit: 30px !default;
3636
@import
3737
"dash/fonts",
3838
"dash/icons",
39-
"dash/mixins",
4039
"dash/colors",
40+
"dash/themes",
41+
"dash/mixins",
4142
"dash/animations",
4243
"dash/base",
4344
"dash/layout",

‎_sass/dash/_base.scss‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
body {
22
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
3-
color: $color-foreground;
4-
background-color: $color-background-darker;
53
-webkit-text-size-adjust: 100%;
64
-webkit-font-feature-settings: "kern" 1;
75
-moz-font-feature-settings: "kern" 1;
@@ -11,6 +9,11 @@ body {
119
display: flex;
1210
min-height: 100vh;
1311
flex-direction: column;
12+
13+
@include themed() {
14+
background-color: t('background-color-alt');
15+
color: t('foreground-color');
16+
}
1417
}
1518

1619
body, html {
@@ -126,7 +129,9 @@ a {
126129
* Blockquotes
127130
*/
128131
blockquote {
129-
color: $color-background-dark;
132+
@include themed() {
133+
color: t('background-color');
134+
}
130135
@include relative-font-size(1.125);
131136
letter-spacing: -1px;
132137
font-style: italic;
@@ -145,7 +150,9 @@ pre,
145150
code {
146151
@include relative-font-size(0.9375);
147152
border-radius: 0.3em;
148-
background-color: $color-background-dark;
153+
@include themed() {
154+
background-color: t('background-color');
155+
}
149156
}
150157

151158
code {

‎_sass/dash/_colors.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@ $color-background-dark: #1E2227;
22
$color-background-darker: #15171A;
33
$color-foreground: #DAE4ED;
44
$color-foreground-dark: lighten($color-background-dark, 30%);
5+
6+
$color-background-light: #DAE4ED;
7+
$color-background-lighter: lighten($color-background-light, 30%);
8+
$color-foreground-dark: #1E2227;
9+
$color-foreground-darker: #15171A;
10+
511
$color-pink: #F24784;
612
$color-red: #FC4957;
713
$color-orange: #EA9D53;

‎_sass/dash/_icons.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ $icon-check: "\f00c";
66
$icon-minus: "\f068";
77
$icon-flask: "\f0c3";
88
$icon-tag: "\f02b";
9+
$icon-lightbulb: "\f02b";

‎_sass/dash/_layout.scss‎

Lines changed: 67 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@
4141
&,
4242
&:visited,
4343
&:hover {
44-
color: $color-foreground;
44+
@include themed() {
45+
color: t('foreground-color');
46+
}
4547
text-decoration: none;
4648
}
4749
}
@@ -79,14 +81,18 @@
7981

8082

8183
.post-title {
82-
color: $color-foreground;
84+
@include themed() {
85+
color: t('foreground-color');
86+
}
8387
text-align: left;
8488
}
8589

8690
.post-description {
8791
margin-top: 1em;
8892
font-size: $base-font-size * 1.15;
89-
color: $color-foreground;
93+
@include themed() {
94+
color: t('foreground-color');
95+
}
9096
white-space: nowrap;
9197
overflow: hidden;
9298
width: 100%;
@@ -115,14 +121,18 @@
115121
margin-bottom: 2em;
116122
.post-date {
117123
margin-top: 1em;
118-
color: $color-foreground-dark;
124+
@include themed() {
125+
color: t('foreground-color-alt');
126+
}
119127
font-size: 12px;
120128
margin-top: 1em;
121129
margin-left: 0.5em;
122130
}
123131

124132
strong {
125-
color: white;
133+
@include themed() {
134+
color: t('foreground-color-contrast');
135+
}
126136
}
127137

128138
img {
@@ -207,7 +217,9 @@
207217
}
208218

209219
& > .post-meta {
210-
color: $color-foreground-dark;
220+
@include themed() {
221+
color: t('foreground-color-alt');
222+
}
211223
font-size: $small-font-size;
212224
}
213225
}
@@ -223,13 +235,17 @@
223235

224236
.tag, .tag-cloud > a {
225237
color: $color-green;
226-
background-color: $color-background-dark;
238+
@include themed() {
239+
background-color: t('background-color');
240+
}
227241
padding: 0.3em 0.6em;
228242
border-radius: 0.3em;
229243
&:hover {
230244
text-decoration: none;
231245
color: lighten($color-green, 20%);
232-
background-color: lighten($color-background-dark, 5%);
246+
@include themed() {
247+
background-color: lighten(t('background-color'), 5%);
248+
}
233249
}
234250

235251
& > svg {
@@ -249,10 +265,14 @@
249265

250266
.credits {
251267
font-size: 10px;
252-
color: lighten($color-background-dark, 5%);
268+
@include themed() {
269+
color: lighten(t('background-color'), 5%);
270+
}
253271

254272
& > a {
255-
color: lighten($color-background-dark, 10%);
273+
@include themed() {
274+
color: lighten(t('background-color'), 10%);
275+
}
256276
text-decoration: underline;
257277
}
258278
}
@@ -280,16 +300,22 @@
280300

281301
& > a {
282302
color: $color-green;
283-
background-color: $color-background-dark;
303+
@include themed() {
304+
background-color: t('background-color');
305+
}
284306
&:hover {
285307
color: lighten($color-green, 20%);
286-
background-color: lighten($color-background-dark, 5%);
308+
@include themed() {
309+
background-color: lighten(t('background-color'), 5%);
310+
}
287311
}
288312
}
289313

290314
& > span {
291-
color: darken($color-foreground, 20%);
292-
background-color: darken($color-background-dark, 3%);
315+
@include themed() {
316+
color: darken(t('foreground-color'), 20%);
317+
background-color: darken(t('background-color'), 3%);
318+
}
293319
}
294320
}
295321

@@ -298,7 +324,9 @@
298324
text-align: right;
299325
display: inline-block;
300326
& > a {
301-
color: darken($color-foreground, 10%);
327+
@include themed() {
328+
color: darken(t('foreground-color'), 10%);
329+
}
302330
display: inline-block;
303331
padding-left: 0.3em;
304332
font-size: $post-link-font-size * 1.35;
@@ -339,3 +367,27 @@ ul.related-posts {
339367
}
340368
}
341369
}
370+
371+
#theme-toggle {
372+
background-color: transparent;
373+
border: none;
374+
float: right;
375+
display: inline-block;
376+
&.dark {
377+
&:before {
378+
content: $icon-flask;
379+
@include font-awesome-icon;
380+
}
381+
@include themed() {
382+
color: t('foreground-color');
383+
}
384+
}
385+
386+
&.light {
387+
&:before {
388+
content: $icon-flask;
389+
@include font-awesome-icon;
390+
}
391+
color: $color-yellow;
392+
}
393+
}

‎_sass/dash/_mixins.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,21 @@
99
display: none;
1010
-webkit-font-smoothing: antialiased;
1111
}
12+
13+
@mixin themed() {
14+
@each $theme, $map in $themes {
15+
.theme--#{$theme} & {
16+
$theme-map: () !global;
17+
@each $key, $submap in $map {
18+
$value: map-get(map-get($themes, $theme), '#{$key}');
19+
$theme-map: map-merge($theme-map, ($key: $value)) !global;
20+
}
21+
@content;
22+
$theme-map: null !global;
23+
}
24+
}
25+
}
26+
27+
@function t($key) {
28+
@return map-get($theme-map, $key);
29+
}

0 commit comments

Comments
 (0)