diff --git a/index.html b/index.html index 550fb6c..2d58e62 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,10 @@ + - + + @@ -68,6 +70,21 @@
+ +
+
+ +
+ +
+ +
+

LES DEVELOPPEURS

+

Voici la team

@@ -96,12 +113,13 @@

@dev1

-
- J'aime Bulma! @bulmaio. #css +

J'aime Bulma! + @bulmaio. #css #responsive
+

@@ -135,10 +153,12 @@
- Salut le monde. @bulmaio. #css +

Salut le monde. + @bulmaio. #css #responsive
+

@@ -170,30 +190,38 @@

@dev3

- -
- yo!. @bulmaio. #css +

yo!. + @bulmaio. #css #responsive
+

- + - + - - + const switchTheme = document.querySelector("#switch"); + + switchTheme.addEventListener("click", function () { + document.body.classList.toggle("dark-mode"); + }); + + + + \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 3ecd901..bf9a390 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -8,4 +8,32 @@ .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; } \ No newline at end of file diff --git a/static/js/script.js b/static/js/script.js index c14dd2e..07d74d7 100644 --- a/static/js/script.js +++ b/static/js/script.js @@ -9,4 +9,13 @@ $(document).ready(function() { $(".navbar-menu").toggleClass("is-active"); }); - }); \ No newline at end of file + } +); + +document.addEventListener("DOMContentLoaded", function() { + const switchTheme = document.querySelector("#switch"); + + switchTheme.addEventListener("click", function () { + document.body.classList.toggle("dark-mode"); + }); +});