Dark Theme CSS

Para tener un botón que cambie el CSS de colores oscuros a claros y viceversa, y que además al cambiar de página se mantengan esos colores, podemos hacer lo siguiente:

Color oscuro por defecto

1. Añadir el botón, por ejemplo 
<a id="theme-toggle"></a>
2. Añadir el Javascript, por ejemplo: 
// Function to load the theme from local storage and update the UI
function loadTheme() {
    var storedTheme = localStorage.getItem('theme') || 'dark'; // Get the theme from local storage or default to 'dark'
    document.documentElement.setAttribute('data-theme', storedTheme); // Set the theme on the document
    updateButton(storedTheme); // Update the button text based on the theme
}

// Function to update the button text based on the current theme
function updateButton(currentTheme) {
    document.getElementById('theme-toggle').textContent = currentTheme === 'dark' ? '🔅' : '🌑';
}

// Set up the event listener for the theme toggle button
document.getElementById('theme-toggle').addEventListener('click', function() {
    var button = this;
    var currentTheme = document.documentElement.getAttribute('data-theme') || 'dark'; // Check the current theme, default to 'dark' if none is set
    
    // Toggle between 'light' and 'dark'
    var newTheme = currentTheme === 'light' ? 'dark' : 'light';
    
    // Set the new theme
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme); // Save the new theme to local storage

    // Update the button text based on the new theme
    updateButton(newTheme);
});

// When the document is ready, load the theme
document.addEventListener('DOMContentLoaded', loadTheme);
3. Añadir el CSS, por ejemplo: 
:root {
    /* Light theme colors */
    --background-color: #ffffff;  /* white background */
    --text-color: #000000;        /* black text */
  }
  
  [data-theme="light"] {
    /* Dark theme colors */
    --background-color: #333333;  /* dark grey background */
    --text-color: #ffffff;        /* white text */
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
  }

Color claro por defecto

1. Añadir el botón, por ejemplo 
<a class="btn" id="theme-toggle">🔅</a>
2. Añadir el Javascript, por ejemplo: 
// Function to load the theme from local storage and update the UI
function loadTheme() {
    var storedTheme = localStorage.getItem('theme') || 'light'; // Get the theme from local storage or default to 'dark'
    document.documentElement.setAttribute('data-theme', storedTheme); // Set the theme on the document
    updateButton(storedTheme); // Update the button text based on the theme
}

// Function to update the button text based on the current theme
function updateButton(currentTheme) {
    document.getElementById('theme-toggle').textContent = currentTheme === 'light' ? '◩' : '◩';
}

// Set up the event listener for the theme toggle button
document.getElementById('theme-toggle').addEventListener('click', function() {
    var button = this;
    var currentTheme = document.documentElement.getAttribute('data-theme') || 'dark'; // Check the current theme, default to 'dark' if none is set
    
    // Toggle between 'light' and 'dark'
    var newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    
    // Set the new theme
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme); // Save the new theme to local storage

    // Update the button text based on the new theme
    updateButton(newTheme);
});

// When the document is ready, load the theme
document.addEventListener('DOMContentLoaded', loadTheme);
3. Añadir el CSS, por ejemplo: 
:root {
    /* Light theme colors */
    --background-color: #ffffff;  /* white background */
    --text-color: #000000;        /* black text */
  }
  
  [data-theme="dark"] {
    /* Dark theme colors */
    --background-color: #333333;  /* dark grey background */
    --text-color: #ffffff;        /* white text */
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
  }