-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: corrige bug graphique sur theme-switcher
- Loading branch information
1 parent
430086d
commit 7b72b7a
Showing
5 changed files
with
82 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -554,7 +554,7 @@ <h3>Contact personnel</h3> | |
|
|
||
| <script | ||
| type="module" | ||
| src="/main.ts" | ||
| src="/main.js" | ||
| ></script> | ||
| </body> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import "./assets/styles.css" | ||
| import "virtual:uno.css" | ||
|
|
||
| // Encapsulation du code dans une fonction immédiatement invoquée | ||
| ;(function () { | ||
| // Déclaration des variables | ||
| const themeSwitcher = { | ||
| button: document.querySelector(".js-theme-switcher"), | ||
| prefersDark: window.matchMedia("(prefers-color-scheme: dark)"), | ||
| currentTheme: null, | ||
| } | ||
|
|
||
| // Initialisation du thème | ||
| function initTheme() { | ||
| if (localStorage.getItem("theme-preference")) { | ||
| themeSwitcher.currentTheme = localStorage.getItem("theme-preference") | ||
| } else if (themeSwitcher.prefersDark.matches) { | ||
| themeSwitcher.currentTheme = "dark" | ||
| } else { | ||
| themeSwitcher.currentTheme = "light" | ||
| } | ||
| setTheme(themeSwitcher.currentTheme) | ||
| } | ||
|
|
||
| // Gestion du clic sur le bouton | ||
| themeSwitcher.button.addEventListener("click", function () { | ||
| themeSwitcher.currentTheme = | ||
| document.documentElement.getAttribute("data-theme-preference") === "dark" | ||
| ? "light" | ||
| : "dark" | ||
| setTheme(themeSwitcher.currentTheme) | ||
| }) | ||
|
|
||
| // Gestion du changement de préférence système | ||
| themeSwitcher.prefersDark.addEventListener("change", function (event) { | ||
| themeSwitcher.currentTheme = event.matches ? "dark" : "light" | ||
| setTheme(themeSwitcher.currentTheme) | ||
| }) | ||
|
|
||
| // Fonction pour définir le thème | ||
| function setTheme(theme) { | ||
| const pressed = theme === "dark" ? "true" : "false" | ||
| document.documentElement.setAttribute("data-theme-preference", theme) | ||
| localStorage.setItem("theme-preference", theme) | ||
| themeSwitcher.button.setAttribute("aria-pressed", pressed) | ||
| } | ||
|
|
||
| // Initialisation | ||
| initTheme() | ||
| })() |