Skip to content

Commit d31b161

Browse files
plgdplgd
committed
created DarkMode
1 parent 6198f6a commit d31b161

File tree

12 files changed

+236
-37
lines changed

12 files changed

+236
-37
lines changed

‎_config.yml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
### Site Settings ###
22
title : Pierre Diénot
3-
description : >-
4-
Ingénieur en Procédés Industriels, Spécialisé en Énergie et Environnement.
3+
description : Ingénieur en Procédés Industriels, Spécialisé en Énergie et Environnement.
54
baseurl : ""
65
repository : plgd/plgd.github.io
76
remote_theme : plgd/plgd.github.io

‎_includes/about/timeline.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,4 @@ <h6 class="date">{{ item.from }} — {{ item.to }}</h6>
3333

3434
{% endfor %}
3535
</div>
36-
</div>
36+
</div>

‎_includes/landing.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</div>
1010
</div>
1111

12-
<p class="text-muted wow animated slideInUp" data-wow-delay=".15s">{{ site.description }}</p>
12+
<p class="text-muted wow animated slideInUp" data-wow-delay=".15s"><h8>{{ site.description }}</h8></p>
1313
<p class="text-muted wow animated slideInUp" data-wow-delay=".15s">
1414
<a class="text-center">{% include elements/button.html link="/mon-profil" text='Voir mon Profil' %}</a>
1515
</p>

‎_includes/navbar.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
88

99
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
1010
<div class="navbar-nav ml-auto">
11+
<article>
12+
13+
<a href="{{page.url}}" id="theme-toggle" onclick="modeSwitcher()" style="cursor: pointer;"></a>
14+
15+
</article>
1116

1217
{%- assign html_pages = site.html_pages | sort: 'weight' -%}
1318
{%- assign filtered_pages = "" | split: "" -%}

‎_layouts/default.html

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
<!DOCTYPE html>
22

3-
<!--
4-
portfolYOU Jekyll theme by Youssef Raafat
5-
Free for personal and commercial use under the MIT license
6-
https://github.com/YoussefRaafatNasry/portfolYOU
7-
-->
8-
93
<html lang="en" class="h-100">
104

115
{% include head.html %}
@@ -14,13 +8,17 @@
148

159
<main class="flex-shrink-0 container mt-5">
1610
{% include navbar.html %}
11+
1712
{{ content }}
1813
</main>
1914

2015
{% include footer.html %}
2116
{% include analytics.html %}
2217
{% include scripts.html %}
2318

19+
20+
<script src="/assets/js/mode-switcher.js"></script>
21+
2422
</body>
2523

26-
</html>
24+
</html>

‎_site/articles/tags.html

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
<!DOCTYPE html>
22

3-
<!--
4-
portfolYOU Jekyll theme by Youssef Raafat
5-
Free for personal and commercial use under the MIT license
6-
https://github.com/YoussefRaafatNasry/portfolYOU
7-
-->
8-
93
<html lang="en" class="h-100">
104

115
<head>
@@ -45,14 +39,20 @@
4539
</button>
4640

4741
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
48-
<div class="navbar-nav ml-auto"><a class="nav-item nav-link " href="/mon-profil/"></a>
42+
<div class="navbar-nav ml-auto">
43+
<article>
44+
45+
<a href="/articles/tags" id="theme-toggle" onclick="modeSwitcher()" style="cursor: pointer;"></a>
46+
47+
</article><a class="nav-item nav-link " href="/mon-profil/"></a>
4948

5049

5150

5251
</div>
5352
</div>
5453

5554
</nav>
55+
5656
<div class="col-lg-10 mx-auto mt-5 post">
5757
<!-- Collect tags from all posts --><!-- List tags & related posts -->
5858

@@ -112,6 +112,9 @@
112112
})
113113
</script>
114114

115+
116+
<script src="/assets/js/mode-switcher.js"></script>
117+
115118
</body>
116119

117-
</html>
120+
</html>

‎_site/assets/css/style.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -568,3 +568,23 @@ body { font-family: "Poppins", sans-serif; }
568568
.timeline-body .timeline-item:after { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 4px solid #007bff; background-color: #f8f9fa; position: absolute; left: -12px; top: 8px; z-index: 10; }
569569
.timeline-body .timeline-item .content { margin: 40px; padding-bottom: 20px; border-bottom: 1px dashed #343a40; }
570570
.timeline-body .timeline-item .content .date { margin-top: -5px; margin-bottom: 15px; color: #6c757d; }
571+
572+
html, html[data-theme="light"] { --link-color: rgb(0, 0, 0); --main-background-color: hsl(0, 0%, 95%); --main-text-color: hsl(0, 0%, 20%); }
573+
574+
html[data-theme="dark"] { --link-color: rgb(255, 255, 255); --main-background-color: hsl(0, 0%, 15%); --main-text-color: hsl(0, 0%, 90%); }
575+
576+
@media (prefers-color-scheme: dark) { html, html[data-theme="dark"] { --link-color: rgb(255, 255, 255); --main-background-color: hsl(0, 0%, 15%); --main-text-color: hsl(0, 0%, 90%); }
577+
html[data-theme="light"] { --link-color: rgb(0, 0, 0); --main-background-color: hsl(0, 0%, 95%); --main-text-color: hsl(0, 0%, 20%); } }
578+
body { background-color: var(--main-background-color); color: var(--main-text-color); }
579+
580+
a { color: var(--link-color); }
581+
582+
article { max-width: 650px; margin: 0em; }
583+
584+
h5 { color: var(--link-color); }
585+
586+
h8 { color: var(--link-color); }
587+
588+
div { background-color: var(--main-background-color); }
589+
590+
div.timeline-body { background-color: var(--main-background-color); }

‎_site/assets/js/mode-switcher.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
let systemInitiatedDark = window.matchMedia("(prefers-color-scheme: dark)");
2+
let theme = sessionStorage.getItem('theme');
3+
4+
if (systemInitiatedDark.matches) {
5+
document.getElementById("theme-toggle").innerHTML = "Light Mode";
6+
} else {
7+
document.getElementById("theme-toggle").innerHTML = "Dark Mode";
8+
}
9+
10+
function prefersColorTest(systemInitiatedDark) {
11+
if (systemInitiatedDark.matches) {
12+
document.documentElement.setAttribute('data-theme', 'dark');
13+
document.getElementById("theme-toggle").innerHTML = "Light Mode";
14+
sessionStorage.setItem('theme', '');
15+
} else {
16+
document.documentElement.setAttribute('data-theme', 'light');
17+
document.getElementById("theme-toggle").innerHTML = "Dark Mode";
18+
sessionStorage.setItem('theme', '');
19+
}
20+
}
21+
systemInitiatedDark.addListener(prefersColorTest);
22+
23+
24+
function modeSwitcher() {
25+
let theme = sessionStorage.getItem('theme');
26+
if (theme === "dark") {
27+
document.documentElement.setAttribute('data-theme', 'light');
28+
sessionStorage.setItem('theme', 'light');
29+
document.getElementById("theme-toggle").innerHTML = "Dark Mode";
30+
} else if (theme === "light") {
31+
document.documentElement.setAttribute('data-theme', 'dark');
32+
sessionStorage.setItem('theme', 'dark');
33+
document.getElementById("theme-toggle").innerHTML = "Light Mode";
34+
} else if (systemInitiatedDark.matches) {
35+
document.documentElement.setAttribute('data-theme', 'light');
36+
sessionStorage.setItem('theme', 'light');
37+
document.getElementById("theme-toggle").innerHTML = "Dark Mode";
38+
} else {
39+
document.documentElement.setAttribute('data-theme', 'dark');
40+
sessionStorage.setItem('theme', 'dark');
41+
document.getElementById("theme-toggle").innerHTML = "Light Mode";
42+
}
43+
}
44+
45+
if (theme === "dark") {
46+
document.documentElement.setAttribute('data-theme', 'dark');
47+
sessionStorage.setItem('theme', 'dark');
48+
document.getElementById("theme-toggle").innerHTML = "Light Mode";
49+
} else if (theme === "light") {
50+
document.documentElement.setAttribute('data-theme', 'light');
51+
sessionStorage.setItem('theme', 'light');
52+
document.getElementById("theme-toggle").innerHTML = "Dark Mode";
53+
}

‎_site/index.html

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
<!DOCTYPE html>
22

3-
<!--
4-
portfolYOU Jekyll theme by Youssef Raafat
5-
Free for personal and commercial use under the MIT license
6-
https://github.com/YoussefRaafatNasry/portfolYOU
7-
-->
8-
93
<html lang="en" class="h-100">
104

115
<head>
@@ -45,14 +39,20 @@
4539
</button>
4640

4741
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
48-
<div class="navbar-nav ml-auto"><a class="nav-item nav-link " href="/mon-profil/"></a>
42+
<div class="navbar-nav ml-auto">
43+
<article>
44+
45+
<a href="/" id="theme-toggle" onclick="modeSwitcher()" style="cursor: pointer;"></a>
46+
47+
</article><a class="nav-item nav-link " href="/mon-profil/"></a>
4948

5049

5150

5251
</div>
5352
</div>
5453

5554
</nav>
55+
5656
<div class="row justify-content-center align-items-center p-4">
5757
<div class="col-lg-4 col-md-6 text-center mt-4">
5858

@@ -64,7 +64,7 @@
6464
</div>
6565
</div>
6666

67-
<p class="text-muted wow animated slideInUp" data-wow-delay=".15s">Ingénieur en Procédés Industriels, Spécialisé en Énergie et Environnement.</p>
67+
<p class="text-muted wow animated slideInUp" data-wow-delay=".15s"><h8>Ingénieur en Procédés Industriels, Spécialisé en Énergie et Environnement.</h8></p>
6868
<p class="text-muted wow animated slideInUp" data-wow-delay=".15s">
6969
<a class="text-center"><a class="m-1 btn btn-outline-primary btn-2 " href="/mon-profil">
7070
Voir mon Profil
@@ -129,6 +129,9 @@
129129
})
130130
</script>
131131

132+
133+
<script src="/assets/js/mode-switcher.js"></script>
134+
132135
</body>
133136

134-
</html>
137+
</html>

‎_site/mon-profil/index.html

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
<!DOCTYPE html>
22

3-
<!--
4-
portfolYOU Jekyll theme by Youssef Raafat
5-
Free for personal and commercial use under the MIT license
6-
https://github.com/YoussefRaafatNasry/portfolYOU
7-
-->
8-
93
<html lang="en" class="h-100">
104

115
<head>
@@ -46,14 +40,19 @@
4640

4741
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
4842
<div class="navbar-nav ml-auto">
49-
<a class="nav-item nav-link active" href="/mon-profil/"></a>
43+
<article>
44+
45+
<a href="/mon-profil/" id="theme-toggle" onclick="modeSwitcher()" style="cursor: pointer;"></a>
46+
47+
</article><a class="nav-item nav-link active" href="/mon-profil/"></a>
5048

5149

5250

5351
</div>
5452
</div>
5553

5654
</nav>
55+
5756
<div class="col-lg-10 mx-auto mt-5 post">
5857
<h1 id="mon-profil"><strong>Mon Profil</strong></h1>
5958

@@ -196,6 +195,7 @@ <h6 class="date">Février — Aout 2018 (6 mois)</h6>
196195

197196
</div>
198197
</div>
198+
199199
</div>
200200

201201
<div class="row">
@@ -315,6 +315,9 @@ <h6 class="date">6 mois — 2017</h6>
315315
})
316316
</script>
317317

318+
319+
<script src="/assets/js/mode-switcher.js"></script>
320+
318321
</body>
319322

320-
</html>
323+
</html>

0 commit comments

Comments
 (0)