<button id="themeToggle">Dark Mode</button>

<div class="bg">
  <p class="primary-text">Primary Text</p>
  <p class="secondary-text">Secondary Text</p>
</div>
:root,
[data-theme='light'] {
    --primary-font-color: #111827;
    --secondary-font-color: #374151;
    --bg-color: #f9f9f9;
    --divider-color: rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] {
    --primary-font-color: #ffffff;
    --secondary-font-color: #d1d5db;
    --bg-color: #181818;
    --divider-color: rgba(255, 255, 255, 0.1);
}

.primary-text {
  color: var(--primary-font-color)
}

.secondary-text {
  color: var(--secondary-font-color)
}

.bg {
  padding: 8px;
  width: 200px;
  height: 100px;
  background: var(--bg-color)
}
const themeToggleButton = document.getElementById('themeToggle');

themeToggleButton.addEventListener('click', function() {
    const currentTheme = document.documentElement.getAttribute('data-theme');

    if (currentTheme === 'dark') {
        document.documentElement.setAttribute('data-theme', 'light');
        themeToggleButton.innerText = 'Dark Mode';
    } else {
        document.documentElement.setAttribute('data-theme', 'dark');
        themeToggleButton.innerText = 'Light Mode';
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.