greg/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout darkmode JS

Browse Source
This commit is contained in:
Debian Live user 2024-04-18 11:54:17 +00:00
parent a000da234d
commit 19d5c33e11
3 changed files with 86 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
index.html
View File

@ -1,8 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
<link rel="stylesheet" href="./static/css/style.css">
<script rel="javascript/text" href="./static/js/script.js"></script>
<!-- <script src="./static/js/script.js"></script> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<!-- NAVBAR -->
@ -68,6 +70,21 @@
<br>
<!-- Toggle Switch -->
<div class="switch">
<input type="checkbox" id="switch" /><br>
<label for="switch">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
<span class="ball"></span>
</label>
</div>
<br>
<div class="content">
<h1>LES DEVELOPPEURS</h1>
<p>Voici la team</p>
<!-- CARDS -->
<div class="columns is-mobile is-multiline is-centered">
<!-- CARD 1 -->
@ -96,12 +113,13 @@
<p class="subtitle is-6">@dev1</p>
</div>
</div>
<div class="content">
J'aime Bulma! <a>@bulmaio</a>. <a href="#">#css</a>
<p>J'aime Bulma!
<a>@bulmaio</a>. <a href="#">#css</a>
<a href="#">#responsive</a>
<br />
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</p>
</div>
</div>
</div>
@ -135,10 +153,12 @@
</div>
<div class="content">
Salut le monde. <a>@bulmaio</a>. <a href="#">#css</a>
<p>Salut le monde.
<a>@bulmaio</a>. <a href="#">#css</a>
<a href="#">#responsive</a>
<br />
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</p>
</div>
</div>
</div>
@ -170,12 +190,12 @@
<p class="subtitle is-6">@dev3</p>
</div>
</div>
<div class="content">
yo!. <a>@bulmaio</a>. <a href="#">#css</a>
<p>yo!.
<a>@bulmaio</a>. <a href="#">#css</a>
<a href="#">#responsive</a>
<br />
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</p>
</div>
</div>
</div>
@ -195,5 +215,13 @@
</div>
</footer>
<script>
const switchTheme = document.querySelector("#switch");
switchTheme.addEventListener("click", function () {
document.body.classList.toggle("dark-mode");
});
</script>
</body>
</html
</html>

28
static/css/style.css
View File

@ -9,3 +9,31 @@
.hero-body {
background-color: yellow;
}
.switch {
text-align: center;
}
/* DARK MODE */
:root {
--bg-color: #fff;
--primary-text-color: #222;
--secondary-text-color: #616060;
}
body {
background: var(--bg-color);
}
.content {
color: var(--primary-text-color);
text-align: center;
}
.content p {
color: var(--secondary-text-color);
}
.dark-mode {
--bg-color: #3e4c59;
--primary-text-color: #fff;
--secondary-text-color: #ddd;
}

9
static/js/script.js
View File

@ -9,4 +9,13 @@ $(document).ready(function() {
$(".navbar-menu").toggleClass("is-active");
});
}
);
document.addEventListener("DOMContentLoaded", function() {
const switchTheme = document.querySelector("#switch");
switchTheme.addEventListener("click", function () {
document.body.classList.toggle("dark-mode");
});
});