dark-mode-switch | Add a dark-mode theme toggle with a Bootstrap Custom Switch | Theme library

I was attempting to design a dark-mode switch for a webpage, and I am not sure if I implemented it in the most efficient manner. I basically created a extra copy (the files ending in "2") for each of the files for each section of the webpage, and changed the color attributes in the functions for those copies. I would then return either the original functions if the dark-mode status was not triggered or return the slightly modified ones if it was. I was wondering if there was a better method of creating a dark-mode switch rather than the brute-force approach I used. The Landing() function was inspired by https://medium.com/heuristics/react-dark-mode-switch-in-material-ui-dashboard-82fcf1cded66.

Im quite new to HTML/CSS/JS... I have a light/dark mode toggle switch that activates dark mode on my asp.net core site. Everything works fine and i am using localhost to save the dark/light theme on page refresh or load. The problem is my toggle switch keeps reverting back to light mode. Ive tried a few options and i cant seem to figure out what needs to be done to keep the toggle switch in the correct position on page load.

Here is my code

HTML checkbox:

I'm trying to use the value of localStorage to display one of two Twitter feeds, one for a light mode theme, the other for dark mode. It works, but I have to refresh the webpage for the correct CSS - either twitter-dark-display-none or twitter-light-display-none - to work.

Using jQuery(document).ready(function () doesn't help.

The Fiddle: https://jsfiddle.net/zpsf5q3x/2/ But the sample tweets don't show due to JSFiddle limits on displaying third party frames. And, localstorage may not work there, either.

Fiddle calls two external libraries: https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css and https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js

HTML:

Note the data-theme="dark" in the first block.

I can't figure out how to change the "checked" background color of this Bootstrap 4 toggle switch. It uses an extra library to toggle dark and light mode – Here on github – but that works. All I want to do is change the background color of the active checkbox, which is by default blue. Does it default to blue from the Bootstrap CSS? This answer Change Bootstrap 4 checkbox background color doesn't work for me; it changes the unchecked color, but I can't grep from it how to change the checked color.

Fiddle here

My code here:

I have implemented a dark/light mode switch in my app using the guide here on this thread. Sample code below:

I am working on a macOS app where I want to give users the ability to switch between light and dark mode.

For iOS apps, this can be done by simply overriding the UserInterfaceStyle of UIWindow. Like so:

I have been trying to find out how to call my function that is inside a function that is started on page load to set darkmode.

If anyone could help me with this I would be very grateful.

Here is my js file:

I have a Dark Mode switch. Imported from https://github.com/coliff/dark-mode-switch

It works really good but I had 2 problems.

Firstly, the NavBar Brand text wasn't changing.

Easily fixed with