Ensure the dark mode switch CSS remains consistent when navigating to different pages

Question

Ensure the dark mode switch CSS remains consistent when navigating to different pages

I have been working on a code to toggle between dark and light mode on a webpage. While it works fine within the current page, the issue arises when I navigate to another page or refresh the current one - the mode resets back to default (light). How can I make the webpage remember the mode I choose? Below is the simple code snippet I am using to switch between CSS styles.

TOGGLE BUTTON

<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;" onclick="darkswitchoff()"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" onclick="darkswitchoon()"></i>

SCRIPT

<script>
$(document).ready(function(){
    $('.middle').click(function() {
        $('.inactive, .active').toggle();
  });
});
</script>

<script>
function darkswitchoff() {
    document.getElementById('mainstylesheet').href='/assets/css/main.css';
}

function darkswitchoon() {
    document.getElementById('mainstylesheet').href='/assets/css/main-dark.css';
}
</script>

javascript html jquery css

Answer 1

Answer №1

In order to maintain the state throughout your application, one simple approach is to make use of cookies instead of relying on additional libraries.

<script>
document.cookie = "isDark=true";
</script>

By storing a value in a cookie, you can easily retrieve it later to enable dark mode. Just remember that cookies store data as strings. For example, if you only want to track whether the user prefers dark mode:

<script>
if(document.cookie){
//Code to Enable Dark Mode
}
</script>

Alternatively, a more robust solution would be to implement a library such as Redux, which offers a sophisticated "store" for managing various types of app data.

Answer 2

In order to maintain the state throughout your application, one simple approach is to make use of cookies instead of relying on additional libraries.

<script>
document.cookie = "isDark=true";
</script>

By storing a value in a cookie, you can easily retrieve it later to enable dark mode. Just remember that cookies store data as strings. For example, if you only want to track whether the user prefers dark mode:

<script>
if(document.cookie){
//Code to Enable Dark Mode
}
</script>

Alternatively, a more robust solution would be to implement a library such as Redux, which offers a sophisticated "store" for managing various types of app data.

Answer 3

Answer №2

To ensure the dark mode stylesheet is loaded, it's recommended to store this setting in either a Cookie or localStorage. If the Cookie is already set or the setting is found in localStorage, the dark mode stylesheet will be automatically loaded.

Answer 4

To ensure the dark mode stylesheet is loaded, it's recommended to store this setting in either a Cookie or localStorage. If the Cookie is already set or the setting is found in localStorage, the dark mode stylesheet will be automatically loaded.

Answer 5

Answer №3

Unfortunately, the code provided here will not work properly. However, you can access the working version through this dark-mode link.

const toggleSwitch = document.querySelector(
  '.theme-switch input[type="checkbox"]'
);
const currentTheme = localStorage.getItem("theme");

if (currentTheme) {
  document.documentElement.setAttribute("data-theme", currentTheme);

  if (currentTheme === "dark") {
    toggleSwitch.checked = true;
  }
}

function switchTheme(event) {
  if (event.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
    localStorage.setItem("theme", "light");
  }
}

toggleSwitch.addEventListener("change", switchTheme, false);

@import url("https://fonts.googleapis.com/css?family=Lato:400,400italic,700|Sansita+One");
/** CSS styles **/

<div class="theme-switch-wrapper">
  <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="slider round"></div>
  </label>
</div>

<section>
  /** Article content **/
</section>

Answer 6

Unfortunately, the code provided here will not work properly. However, you can access the working version through this dark-mode link.

const toggleSwitch = document.querySelector(
  '.theme-switch input[type="checkbox"]'
);
const currentTheme = localStorage.getItem("theme");

if (currentTheme) {
  document.documentElement.setAttribute("data-theme", currentTheme);

  if (currentTheme === "dark") {
    toggleSwitch.checked = true;
  }
}

function switchTheme(event) {
  if (event.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
    localStorage.setItem("theme", "light");
  }
}

toggleSwitch.addEventListener("change", switchTheme, false);

@import url("https://fonts.googleapis.com/css?family=Lato:400,400italic,700|Sansita+One");
/** CSS styles **/

<div class="theme-switch-wrapper">
  <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="slider round"></div>
  </label>
</div>

<section>
  /** Article content **/
</section>

Ensure the dark mode switch CSS remains consistent when navigating to different pages

Answer №1

Answer №2

Answer №3

Similar questions

Issue with Dismiss Button Display in Bootstrap Alert

How to send arguments to a callback function in Next.JS

The issue I'm facing is that the ng-click functionality in Angular JS is not functioning properly when the

Setting React's PUBLIC_URL dynamically at runtime can be accomplished by manipulating the process.env.PUBLIC

Scope variable changes are not being acknowledged by the directive

`I'm experiencing issues with my AJAX call when using Django`

Moving labels to the left side of the nodes in a Sankey diagram

Send variable to jQuery from a div element

Instructions for instructing Codeception to finalize the selection from a dropdown list without the need to click on a submit button

Trouble with webpage design persists following recent modifications

I am looking to configure a specific MUI dropdown to appear below a particular field

Exploring the World of ASP MVC and Jquery ajax Search

The issue at hand is that certain Views within Dot net are unable to reach the CSS and JavaScript files

No data is being retrieved by SWR

Implement a feature in JS/HTML where clicking on a button shifts a specific section of a row from one table to another while simultaneously deleting the remaining

Encountered an error: Trying to access 'location' property from undefined in express app

How to perfectly center a text box in HTML

Tips for safeguarding AJAX or javascript-based web applications

I am facing difficulties when trying to map the data using react js/axios

Automatically setting the checkbox for each unique ID based on database values for the specified hobby