phatnguyenuit · December 9, 2021 07:13 · phatnguyenuit · Dec 9, 2021
diff --git a/dark-mode.html b/dark-mode.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple dark mode implementation with CSS Variables</title>
    <link rel="stylesheet" type="text/css" href="./theme.css" />
    <style>
      p {
        color: var(--text-color);
        background-color: var(--bg-color);
      }
      
      /**
      p {
        color: inherit;
        background-color: inherit;
      }
      */
    </style>
  </head>
  <body>
    <button for="modeToggle" id="modeToggle">Enable dark mode?</button>
    <p>
      Excepteur commodo sunt elit ad aliquip. Eiusmod aliquip amet in
      reprehenderit qui Lorem do anim consequat eiusmod ea laborum do. Occaecat
      minim ullamco irure reprehenderit magna sint. Labore ea deserunt laboris
      nostrud minim. Eu cillum anim ea amet consectetur proident. Eiusmod et
      tempor dolor duis mollit elit fugiat ex sint cillum aliquip velit nulla.
      Ut consequat magna ea esse reprehenderit non ipsum do. Exercitation
      proident mollit laborum ullamco culpa ad nulla deserunt aute aliquip
      aliqua. Ea aute veniam irure laboris. Est non enim proident et. Id quis ad
      eu duis et qui sint. Ut ex tempor in do quis deserunt deserunt pariatur
      reprehenderit amet. Amet sint irure duis cillum. Nisi officia amet velit
      est labore sunt excepteur.
    </p>

    <script>
      const body = document.querySelector('body');
      const toggle = document.getElementById('modeToggle');

      toggle.addEventListener('click', () => {
        body.classList.toggle('dark-mode');
      });
    </script>
  </body>
 </html>
diff --git a/theme.css b/theme.css
 :root {
  --text-color: black;
  --bg-color: white;
 }

 /* body {
  color: var(--text-color);
  background-color: var(--bg-color);
 } */

 body.dark-mode {
  --text-color: white;
  --bg-color: black;
 }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Simple dark mode implementation with CSS Variables</title>
	<link rel="stylesheet" type="text/css" href="./theme.css" />
	<style>
	p {
	color: var(--text-color);
	background-color: var(--bg-color);
	}

	/**
	p {
	color: inherit;
	background-color: inherit;
	}
	*/
	</style>
	</head>
	<body>
	<button for="modeToggle" id="modeToggle">Enable dark mode?</button>
	<p>
	Excepteur commodo sunt elit ad aliquip. Eiusmod aliquip amet in
	reprehenderit qui Lorem do anim consequat eiusmod ea laborum do. Occaecat
	minim ullamco irure reprehenderit magna sint. Labore ea deserunt laboris
	nostrud minim. Eu cillum anim ea amet consectetur proident. Eiusmod et
	tempor dolor duis mollit elit fugiat ex sint cillum aliquip velit nulla.
	Ut consequat magna ea esse reprehenderit non ipsum do. Exercitation
	proident mollit laborum ullamco culpa ad nulla deserunt aute aliquip
	aliqua. Ea aute veniam irure laboris. Est non enim proident et. Id quis ad
	eu duis et qui sint. Ut ex tempor in do quis deserunt deserunt pariatur
	reprehenderit amet. Amet sint irure duis cillum. Nisi officia amet velit
	est labore sunt excepteur.
	</p>

	<script>
	const body = document.querySelector('body');
	const toggle = document.getElementById('modeToggle');

	toggle.addEventListener('click', () => {
	body.classList.toggle('dark-mode');
	});
	</script>
	</body>
	</html>
	:root {
	--text-color: black;
	--bg-color: white;
	}

	/* body {
	color: var(--text-color);
	background-color: var(--bg-color);
	} */

	body.dark-mode {
	--text-color: white;
	--bg-color: black;
	}