<body class="dark-mode">
  <button class="theme-btn">
    Toggle theme
  </button>
  <div class="box card">
    <div class="box__top">
      <div class="box__circle"></div>
      <div class="box__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div> 
    </div> 
  </div>
</body>
:root {
  --color-foreground: #000000;
  --color-foreground-dim: #4a4a4a;
  --color-foreground-inverted: #ffffff;

  --color-background-1: #ffffff;
  --color-background-1-dark: #ededed;
  --color-background-1-light: #ffffff;

  --color-background-2: #fafafa;
  --color-background-2-dark: #f7f7f7;
  --color-background-2-light: #fefefe;
  
  --color-background-3: #eeeeee;
  --color-background-3-dark: #e6e6e6;
  --color-background-3-light: #f5f5f5;
  
  --color-primary: #1976d2;
  --color-primary-dark: #1565c0;
  --color-primary-light: #42a5f5;
}

body.dark-mode {
  --color-foreground: #ffffff;
  --color-foreground-dim: #c8c8c8;
  --color-foreground-inverted: #000000;

  --color-background-1: #0f0f0f;
  --color-background-1-dark: #0a0a0a;
  --color-background-1-light: #161616;

  --color-background-2: #161616;
  --color-background-2-dark: #0f0f0f;
  --color-background-2-light: #171717;

  --color-background-3: #1c1c1c;
  --color-background-3-dark: #161616;
  --color-background-3-light: #1f1f1f;

  --color-primary: #4281c9;
  --color-primary-dark: #3468b7;
  --color-primary-light: #7bb1f9;
}

$color-foreground: var(--color-foreground);
$color-foreground-dim: var(--color-foreground-dim);
$color-foreground-inverted: var(--color-foreground-inverted);

$color-background-1: var(--color-background-1);
$color-background-1-dark: var(--color-background-1-dark);
$color-background-1-light: var(--color-background-1-light);

$color-background-2: var(--color-background-2);
$color-background-2-dark: var(--color-background-2-dark);
$color-background-2-light: var(--color-background-2-light);

$color-background-3: var(--color-background-3);
$color-background-3-dark: var(--color-background-3-dark);
$color-background-3-light: var(--color-background-3-light);

$color-primary: var(--color-primary);
$color-primary-dark: var(--color-primary-dark);
$color-primary-light: var(--color-primary-light);

@mixin light-theme {
  @at-root .light-mode #{&} {
    @content;
  }
}

@mixin dark-theme {
  @at-root .dark-mode #{&} {
    @content;
  }
}

// For CSS modules
// @mixin dark-theme {
//   @at-root :global(.dark-mode) & {
//     @content;
//   }
// }

html {
  font-size: 62.5%; // 10px
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  transition: all .15s ease-in-out;
  font-size: 1.6rem;
  word-break: break-word;
}

body {
  color: $color-foreground;
  background: $color-background-1;
  min-height: 100vh;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

button {
  color: $color-foreground;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: 0.5px;
  background: $color-background-2;
  border: 1px solid $color-foreground;
  border-radius: 1rem;
  padding: 1rem 1.5rem;
  
  &:hover {
    color: $color-background-1;
    background: $color-foreground;
    cursor: pointer;
  }
}

.card {
  border-radius: 1.8rem;
}

.theme-btn {
  display: flex;
  margin: 0 auto;
}

.box {
  width: min(70rem, 90%);
  padding: 3rem;
  align-self: center;
  background: $color-background-2;
  
  &:hover {
    background: $color-background-2-light;
    
    @include light-theme() {
      background: $color-background-2-dark;
    }
  }
  
  &__top {
    display: flex;
    gap: 3rem;
    width: 100%;
    min-height: 8rem;
    
    @media (max-width: 400px) {
      flex-wrap: wrap;
    }
  }

  &__circle {
    flex-shrink: 0;
    background: $color-background-3;
    border-radius: 100rem;
    width: 8rem;
    height: 8rem;
    
    @media (max-width: 400px) {
      margin: 0 auto;
    }
    
    &:hover {
      background: $color-primary;
    }
  }

  &__text {
    padding: 1rem 0;
    color: $color-foreground-dim;
    line-height: calc(1.9rem * 1.17);
  }
}
View Compiled 
const body = document.querySelector('body');
const themeBtn = document.querySelector('.theme-btn');

themeBtn.addEventListener('click', () => {
  if (body.classList.contains('dark-mode')) {
    body.classList.remove('dark-mode');
    body.classList.add('light-mode');
  } else {
    body.classList.remove('light-mode');
    body.classList.add('dark-mode');
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.