theme to localstorage + toggles on all pages

This commit is contained in:
aze
2025-09-05 21:53:54 +02:00
parent 8043d4f4d1
commit 149bbe7167
3 changed files with 23 additions and 0 deletions

View File

@@ -37,8 +37,12 @@
<a href="https://host.saturn.gay/">HOSTING</a> <a href="https://host.saturn.gay/">HOSTING</a>
</div> </div>
<div class="rbottom"> <div class="rbottom">
<div class="theme-switch">
<span id="themeToggleText">DARK</span>
</div>
<p>© 2022 - 2025 SATURN</p> <p>© 2022 - 2025 SATURN</p>
<p>ALL RIGHTS RESERVED</p> <p>ALL RIGHTS RESERVED</p>
</div> </div>
<script src="assets/js/darkmode.js"></script>
</body> </body>
</html> </html>

View File

@@ -2,6 +2,19 @@ document.addEventListener('DOMContentLoaded', () => {
const toggleText = document.getElementById('themeToggleText'); const toggleText = document.getElementById('themeToggleText');
const body = document.body; const body = document.body;
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
body.classList.add('dark-mode');
document.documentElement.style.setProperty('--bg-color', '#000');
document.documentElement.style.setProperty('--text-color', '#fff');
toggleText.textContent = 'LIGHT';
} else {
body.classList.remove('dark-mode');
document.documentElement.style.setProperty('--bg-color', '#fff');
document.documentElement.style.setProperty('--text-color', '#000');
toggleText.textContent = 'DARK';
}
toggleText.addEventListener('click', () => { toggleText.addEventListener('click', () => {
body.classList.toggle('dark-mode'); body.classList.toggle('dark-mode');
@@ -9,10 +22,12 @@ document.addEventListener('DOMContentLoaded', () => {
document.documentElement.style.setProperty('--bg-color', '#000'); document.documentElement.style.setProperty('--bg-color', '#000');
document.documentElement.style.setProperty('--text-color', '#fff'); document.documentElement.style.setProperty('--text-color', '#fff');
toggleText.textContent = 'LIGHT'; toggleText.textContent = 'LIGHT';
localStorage.setItem('theme', 'dark');
} else { } else {
document.documentElement.style.setProperty('--bg-color', '#fff'); document.documentElement.style.setProperty('--bg-color', '#fff');
document.documentElement.style.setProperty('--text-color', '#000'); document.documentElement.style.setProperty('--text-color', '#000');
toggleText.textContent = 'DARK'; toggleText.textContent = 'DARK';
localStorage.setItem('theme', 'light');
} }
}); });
}); });

View File

@@ -24,8 +24,12 @@
<a href="https://host.saturn.gay/">HOSTING</a> <a href="https://host.saturn.gay/">HOSTING</a>
</div> </div>
<div class="rbottom"> <div class="rbottom">
<div class="theme-switch">
<span id="themeToggleText">DARK</span>
</div>
<p>© 2022 - 2025 SATURN</p> <p>© 2022 - 2025 SATURN</p>
<p>ALL RIGHTS RESERVED</p> <p>ALL RIGHTS RESERVED</p>
</div> </div>
<script src="assets/js/darkmode.js"></script>
</body> </body>
</html> </html>