dark theme

The EuroBytes EU dark theme

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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.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">

      <h1>About</h1>

      <div class="float-right about-icons">
        <p>
          <i class="fa-solid fa-building"></i>
        </p>
      </div>

      <p>
        EuroBytes is a tailored application hosting company. Owned and founded by <a href="/teams/imri.html" rel="author" title="Author">Imri Paloja</a>. It first started
        as a creating website for customers website. From their it is growing to a Free and open-source software
        application hosting company.
      </p>

    </section>

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

      <h1>Mission</h1>

      <div class="float-right about-icons" title="Bullseye">
        <p>
          <i class="fa-solid fa-bullseye"></i>
        </p>
      </div>

      <p>
        The EuroBytes mission is to provide customers with enterprise <abbr title="Free and open-source software">FOSS</abbr> ready software, that they can easily use. Please
        see our


        <a href="goals.html" title="Goals - EuroBytes">
          goals
        </a>

        for further information.
      </p>

      <blockquote class="clear-both">
        <p>
          <i>
            I started EuroBytes because of my love for open-source software, and the amount of good they can
            do. Our goals are to provide enterprise ready alternatives to <abbr title="Privately owned">proprietary</abbr> software. Easily installed, easily...

CSS

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

  --default-color: rgb(188, 183, 174);
  --background-color: rgb(27, 30, 31);
  --border-color: rgb(62, 68, 70);

}

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

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


:root {

  /* 
    Some variables
  */



}


.container {
  margin-top: 1%;
}

body[class="dark-mode"] {
  background: var(--background-color);
  color: #454545;
}

section,
footer {
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  padding: 20px 30px !important;
}

footer {
  background: #FFFFFF;
  border-top: 1px solid #CCCCCC;
  padding: 20px 30px !important;
  margin-top: 1%;

}

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
  }
});