Struggling to create a website and stuck on implementing a dark/light theme using JavaScript. Any suggestions on an easier way to accomplish this?
Initially attempted using document.getElementsByClassName() but found it too tedious and inefficient.
Utilize custom properties to define your color scheme here.
(Remember, you'll need a variety of colors beyond this simple example)
body {
--main-bg-color: yellow;
--main-fg-color: black;
}
To create a dark mode version, override these properties in a separate stylesheet:
@media (prefers-color-scheme: dark) {
body {
--main-bg-color: black;
--main-fg-color: yellow;
}
}
If you want users to have the option to switch between light and dark modes manually, define new sets of properties with classes:
body.lightMode {
--main-bg-color: yellow;
--main-fg-color: black;
}
body.darkMode {
--main-bg-color: black;
--main-fg-color: yellow;
}
Just reference these variables when specifying color names:
h1 {
color: var(--main-bg-color);
}
To enable UI-triggered style changes, use an event handler function:
function toggleTheme() {
const body = document.body;
if (body.classList.contains("darkMode")) {
body.classList.remove("darkMode");
body.classList.add("lightMode");
} else {
body.classList.remove("lightMode");
body.classList.add("darkMode");
}
};
Below is the code I am currently using: con.query('SELECT * FROM tables', function(err, results) { if (err) throw err console.log(results[0].rawname) for(var i= 0; i <= 3; i++) { ...
I've been tackling an aggregate pipeline task for MongoDB where I need to retrieve items that do not have a specific user ID. Despite my efforts, I'm struggling to get it right. I attempted using $not, $ne, and $nin in various ways but couldn&ap ...
I have a variety of form pages in my application, all with text box elements that share the same global CSS rules like width (150px), font-family, and font-size. To streamline this, I created a global CSS type selector class for most text boxes. However, s ...
Is it possible to style this layout without specifying an exact height for "Element 1"? Code Element1 { positon: relative; width: 100%; height: auto; /* Avoiding specific height */ } Inner1 { position: absolute; top: xyz px; left: xyz px; } Inner2 { po ...
I'm in the early stages of learning javascript and jquery, so this issue might be very basic. Please bear with me. Currently, I am dynamically adding new link (a) elements to a division with the id "whatever" using the following code: $("#whatever") ...
While developing a Wordle-inspired game for my website, I decided to utilize Local Storage to store the user's progress. Everything seemed to be working smoothly until an unexpected error occurred: "Uncaught TypeError: Cannot set properties of null (s ...
Explaining this concept may be a bit challenging, so I have included a jsfiddle demo. The issue at hand involves a bootstrap nav menu that shifts to icons when not active and expands to include words when focused. When the menu is expanded, there are no sc ...
I am currently working on manipulating a dynamically generated table that has content editable td elements. The database is updated using an AJAX call within this script. $(document).ready(function(){ $("td[contenteditable=true]").blur(function(){ v ...
Currently, I am working on the add task module for my project. I need to ensure that whenever a task is added, it does not overlap with existing tasks. I have almost completed this functionality, but I have encountered a problem specifically with time over ...
I am currently preloading this page on my Next.js application: const router = useRouter(); if (!router.isFallback && !postData?.slug) { return <p>Hmm... looks like an error</p> } const formatDate = date => { const newDa ...
I utilized the jQuery validation plugin for form field validation. The goal now is to send an ajax request only when the fields are deemed valid by the jQuery validation plugin. JavaScript: $(function(){ $("#form").validate({ errorPlacement: ...
I'm attempting to update the Query Parameters in Vue without refreshing the component using Vue-Router. However, when I use the code below, it forces a component reload: this.$router.replace({query: this.filters}); Is there a way to prevent the comp ...
I am facing an issue with creating unit tests using jest. exportMyData.js const createJobTrasferSetArray = async () => { const data = exportData(); const jobTransferSet = []; try { data.forEach((element) => { const JobPathArray = el ...
Is there a way to transform white color to red using only CSS, while leaving the rest of the colors unaffected? This should be accomplished without changing any other elements. ...
I am having trouble centering my menu on the website. While other elements like images are centered, the menu seems to be off-center. Below is a snippet of the CSS code related to the menu: @charset "UTF-8"; /* CSS Document */ #nav { width:975p ...
Behold, my component definition: <DateField name={formElement.name} type="date" label={formElement.name} onChange={(date) => formik.setFieldValue(formElement.name, date)} value={formik.values[formElement.name] ...
After creating a custom component that displays AuthContext.Provider with specific values, I encountered an issue. Even though it functions correctly, when I utilize useContext within a child of the AuthProvider component, my code editor (VS Code) is unabl ...
When attempting to edit by clicking, the parent information is taken instead of creating a new VI. I was able to achieve this with angular dialog but I am unsure how to do it with components. This is done using dialog: <div class="dropdown-menu-item" ...
I am faced with a scenario where I need to handle the value of Session["actionMode"] in conjunction with a button click event. Here is what I currently have implemented in my code: protected void Button1_Click(object sender, EventArgs e) { if ((int)S ...
I'm facing a challenge with running Javascript conditionally without it being in requirejs form. The script is located on the same server/domain as the requesting page, where an ajax call needs to be made. Is there a foolproof way to ensure that an a ...