JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="wrapper">
  <div class="theme-switcher">
    <button id="lightThemeButton" class="theme-button">Light Theme</button>
    <button id="darkThemeButton" class="theme-button">Dark Theme</button>
  </div>
  <div class="content">

    <section class="container" id="EuroBytes">

      <p class="text-align-center">
        <strong>WORK IN PROGRESS</strong>
      </p>

      <h1>Privacy Policy</h1>

      <h4>Last updated: May 2, 2024</h4>
    </section>

    <section class="container" id="Who">

      <h2>Who We Are?</h2>

      <p>
        <strong>
          EuroBytes
        </strong> a Tailored application hosting website.
      </p>

    </section>

  </div>

  <div style="clear:both;"></div>

  <footer>
    <p style="margin: 0px;padding: 0px;">

      <a title="EuroBytes EU" href="/">EuroBytes EU</a> | EuroBytes EU theme by
      <a title="Author" rel="author" href="https://gitlab.com/blade1989">Imri Paloja</a> |

      This website uses cookies. By using this website, you agree to its use of cookies.

      Information: <a href="/privacy-policy">Privacy</a>, <a href="/termsofuse">Terms Of Use</a>.
      &copy; 2024
    </p>
  </footer>

</div>

CSS

/* Default light theme */
:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

/* Dark theme */
[data-theme="dark"] {
  --background-color: #000000;
  --text-color: #ffffff;
}

/* Apply the variables */
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

JavaScript

// Function to switch theme
function switchTheme(theme) {
  if (theme === 'dark') {
    document.documentElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme', 'dark'); // Save theme preference to localStorage
  } else {
    document.documentElement.setAttribute('data-theme', 'light');
    localStorage.setItem('theme', 'light'); // Save theme preference to localStorage
  }
}

// Example: Switching to dark theme
document.getElementById('darkThemeButton').addEventListener('click', function() {
  switchTheme('dark');
});

// Example: Switching to light theme
document.getElementById('lightThemeButton').addEventListener('click', function() {
  switchTheme('light');
});


// Load theme preference from localStorage on page load
window.addEventListener('load', function() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
  } else {
    document.documentElement.setAttribute('data-theme', 'light'); // Default theme
  }
});