<h1>Hello World</h1>
    <h2>Welcome to my Dark Mode Test</h2>
      Here is some text to convert to dark mode
    <img alt="test" src="https://livecodestream.dev/featured.png" width="100px" />
    <br />
    <button onclick="toggleTheme('dark');">Dark</button>
    <button onclick="toggleTheme('light');">Light Mode</button>
html {
    transition: color 300ms, background-color 300ms;

html[data-theme='dark'] {
    background: #000;
    filter: invert(1) hue-rotate(180deg)

html[data-theme='dark'] img {
  filter: invert(1) hue-rotate(180deg)

h1 {
  color: #2961ba;

h2 {
  color: #ba6129;
const htmlEl = document.getElementsByTagName('html')[0];

const toggleTheme = (theme) => {
    htmlEl.dataset.theme = theme;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.