I am working with others to develop a light and dark theme for a fake-website. We wanted to potentially add multiple color themes to switch between so we went with a dropdown box. However, making a selection doesn’t appear to be doing anything. Anyone got any ideas? I am working in a css file that is called in ever other pages css, a settings html file, and darkmode js file.
CSS:
:root{
--base-color: white;
--secondary-color: black;
--third-color: #808080;
}
.darkmode{
--base-color: black;
--secondary-color: white;
--third-color: gray;
}
.general-text{
color: var(--secondary-color);
}
.special-text{
color: var(--base-color);
}
html:
<!DOCTYPE html>
<html>
<head>
<title>Settings</title>
<link rel="stylesheet" href="/html/css/settings.css">
<script type="html/js" src="/html/js/darkmode.js" defer></script>
</head>
<body class="darkmode">
<%include file="navbar.html"/>
<div class="settings-container">
<h1>Settings</h1>
<div class="setting">
<div class="special-text">
<label for="dark-mode-select">Dark Mode:</label>
</div>
<select id="dark-mode-select" onchange="changeColor()">
<option value="light" id="light">Light</option>
<option value="dark" id="dark">Dark</option>
</select>
</div>
<div class="setting">
<label for="font-size-slider">Font Size:</label>
<input type="range" id="font-size-slider" min="1" max="100" value="50">
<span id="font-size-value">50</span>
</div>
<div class="setting">
<div class="special-text">
<label for="profanity-filter">Profanity Filter:</label>
<input type="checkbox" id="profanity-filter">
</div>
</div>
<div class="button-container">
<button id="apply-settings">Apply</button>
</div>
</div>
<!----Delete Account---->
<!----confirmation dialogue for deletion---->
<button id="delete-account-btn">Delete Account</button>
<div id="delete-account-modal" class="delete-modal">
<div class="delete-modal-content">
<p>Are you sure you want to delete your account?</p>
<button id="confirm-delete">Yes, Delete</button>
<button id="cancel-delete">Cancel</button>
</div>
</div>
<!----End of Delete Account---->
<script src="/html/js/settings.js" defer></script>
</body>
</html>
js:
function changeColor(){
//alert("colorchange")
let darkmode = localStorage.getItem('darkmode')
//const themeChange = document.getElementById('dark-mode-select')
const themeChangeDark = document.getElementById('dark').selected
const themeChangeLight = document.getElementById('light').selected
const enableDarkmode = () => {
document.body.classList.add('darkmode')
localStorage.setItem('darkmode', 'active')
}
const disableDarkmode = () => {
document.body.classList.remove('darkmode')
localStorage.setItem('darkmode', null)
}
if(darkmode === "active") enableDarkmode()
if(themeChangeDark == true){
//alert("Dark")
darkmode = localStorage.getItem('darkmode')
enableDarkmode()
} else if(themeChangeLight == true){
//alert("Light")
darkmode = localStorage.getItem('darkmode')
disableDarkmode()
}
}
I have tried what is featured above, (the settings file is only paritally done by me), but it seems like the changeColor() function is never called. I want it so when the user selects one of the color options, the .darkmode class is put in place and changes the current color scheme of the website.