<main class="container">
  <h1>Click the icon to switch between light and dark mode</h1>
  <div class="toggle-container">
    <button class="theme-btn light" onclick="setTheme('light')" title="Light mode">
      <img src="https://assets.codepen.io/210284/sun.png" alt="sun">
    <button class="theme-btn dark" onclick="setTheme('dark')" title="Dark mode">
      <img src="https://assets.codepen.io/210284/moon.png" alt="moon">

    Pen by <a href="https://www.jemimaabu.com" target="_blank">Jemima Abu</a><span style="color: #D11E15"> &#9829;</span>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Alfa+Slab+One&family=Fredoka+One');

:root.light {
  --bg-color: #d6e8f5;
  --text-color: #0a1c29;
  --bg-url: url('https://assets.codepen.io/210284/day.jpg');
  --font-family: 'Fredoka One', cursive;

:root.dark {
  --bg-color: #0a1c29;
  --text-color: #45ADFE;
  --bg-url: url('https://assets.codepen.io/210284/night.jpg');
  --font-family: 'Alfa Slab One', cursive;

body {
  margin: 0;
  background-image: var(--bg-url);
  background-size: cover;
  color: var(--text-color);
  font-family: var(--font-family);

main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 0;
  height: 100vh;
  box-sizing: border-box;

h1 {
  text-align: center;
  font-weight: normal;
  background-color: var(--bg-color);
  opacity: 0.8;
  padding: 1em;
  border-radius: 2.5rem

.toggle-container {
  position: relative;

.theme-btn {
  width: 6em;
  height: 6em;
  padding: 0.5em;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  background-color: transparent;

.theme-btn img {
  height: 100%;
  width: 100%;
  object-fit: cover;

.theme-btn.light {
  display: none;

.dark .theme-btn.dark {
  display: none;

.dark .theme-btn.light {
  display: block;

footer {
  text-align: center;
  padding: 0.5rem 0;
  background-color: #eaeaea90;

footer p {
  font-size: 0.75rem;
  margin: 0.25rem 0;
  color: #221133;

footer a {
  text-decoration: none;
  color: inherit;
const setTheme = theme => document.documentElement.className = theme;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.