EaglercraftX-Client-Collections/EaglercraftX-Site
4
5
Fork 2
Code Issues Pull Requests Actions Projects Wiki Activity

Made darkmode actually work (V1)

Browse Source
This commit is contained in:
PrestonT500 2024-10-02 13:34:14 -07:00
parent cb003b6241
commit 6478e97894
2 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -14,14 +14,15 @@
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eruda"></script> <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script src="/js/ga4.js"></script> <script src="/js/ga4.js"></script>
<script src="/js/darkmode.js"></script> <script src="./js/darkmoderewrite.js"></script>
</head> </head>
<body> <body>
<h1>Welcome to EaglerCraftX</h1 class="title"> <h1>Welcome to EaglerCraftX</h1 class="title">
<button id="dMode">Dark Mode (Not working yet)</button> <label for="darkModeCheckbox">Dark Mode Checkbox</label>
<input type="checkbox" id="darkModeCheckbox">
<p>Site views counter:</p> <p>Site views counter:</p>

26
js/darkmoderewrite.js Normal file
View File

@ -0,0 +1,26 @@
$(document).ready(function() {
function updateDarkMode() {
var isChecked = $("#darkModeCheckbox").is(":checked");
if (isChecked) {
const body = document.querySelector('body');
body.style.backgroundColor = '#404040';
const text = document.querySelector('.footer');
text.style.backgroundColor = 'grey';
} else {
const body = document.querySelector('body');
body.style.backgroundColor = '#f1f1f1';
const text = document.querySelector('.footer');
text.style.backgroundColor = '#ddd';
}
}
$("#darkModeCheckbox").on("change", function() {
updateDarkMode();
});
updateDarkMode();
});