theme to localstorage + toggles on all pages
This commit is contained in:
@@ -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>
|
||||||
@@ -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');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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>
|
||||||
Reference in New Issue
Block a user