BreizhHardware/lefrenchmathproject
1
0
Fork 0
mirror of https://github.com/BreizhHardware/lefrenchmathproject.git synced 2026-01-18 16:37:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

Rework css avec dark mode et light mode

Browse Source
This commit is contained in:
Félix MARQUET
2024-09-06 13:12:22 +02:00
parent 5da66b21bb
commit bbad4df37e
1 changed files with 74 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
_layouts/default.html
View File

@@ -39,6 +39,16 @@
overflow-y: auto;
transition: transform 0.3s ease;
}
body.dark-mode .toc{
background-color: #333;
color: white;
}
body.dark-mode .page-link {
color: white;
}
.toc.collapsed {
transform: translateX(-100%);
}
@@ -98,6 +108,45 @@
display: none;
}
}
body.light-mode {
background-color: white;
color: black;
}
body.dark-mode {
background-color: #333;
color: white;
}
body.dark-mode:visited {
color: #ccc;
}
/* Styles existants */
.site-title, .site-title:visited {
color: #424242;
}
/* Styles pour le mode sombre */
body.dark-mode .site-title,
body.dark-mode .site-title:visited {
color: white;
}
.theme-toggle-button {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1000;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
border-radius: 50%;
font-size: 20px;
}
</style>
<body>
@@ -118,6 +167,8 @@
</div>
</main>
<button id="theme-toggle-button" class="theme-toggle-button">🌙</button>
{%- include footer.html -%}
<script>
@@ -168,6 +219,29 @@
currentLevel = level;
});
});
document.addEventListener("DOMContentLoaded", function () {
const toggleButton = document.getElementById("theme-toggle-button");
const currentTheme = localStorage.getItem("theme") || "light";
document.body.classList.add(currentTheme + "-mode");
toggleButton.addEventListener("click", function () {
if (document.body.classList.contains("light-mode")) {
document.body.classList.remove("light-mode");
document.body.classList.add("dark-mode");
localStorage.setItem("theme", "dark");
toggleButton.textContent = "☀️";
} else {
document.body.classList.remove("dark-mode");
document.body.classList.add("light-mode");
localStorage.setItem("theme", "light");
toggleButton.textContent = "🌙";
}
});
// Set the initial button text based on the current theme
toggleButton.textContent = currentTheme === "light" ? "🌙" : "☀️";
});
</script>
</body>