/* Thanks to https://alexandersandberg.com/articles/creating-a-website-theme-switcher-with-css-only */
:root {
  /* Light mode */
  --light-text: #222430;
  --light-bg: #f5f6f7;
  --light-theme: #1f9aff;
  --light-gray: #707070;

  /* Dark mode */
  --dark-text: #f7f7f7;
  --dark-bg: #222430;
  --dark-theme: #bd93f9;
  --dark-gray: #838383;

  /* Default mode */
  --text-color: var(--dark-text);
  --bg-color: var(--dark-bg);
  --theme-color: var(--dark-theme);
  --gray-color: var(--dark-gray);
}

#theme-switch:checked ~ #page {
  --text-color: var(--light-text);
  --bg-color: var(--light-bg);
  --theme-color: var(--light-theme);
  --gray-color: var(--light-gray);
}

#theme-switch:checked ~ #divbodyholder {
  --text-color: var(--light-text);
  --bg-color: var(--light-bg);
  --theme-color: var(--light-theme);
  --gray-color: var(--light-gray);
}

:root {
  /* Light mode */
  --light-switch-text: "тёмный|dark";

  /* Dark mode */
  --dark-switch-text: "светлый|light";

  /* Default mode */
  --switch-text: var(--dark-switch-text);
}

#theme-switch:checked ~ #page {
  --switch-text: var(--light-switch-text);
}

#theme-switch:checked ~ #divbodyholder {
  --switch-text: var(--light-switch-text);
}

#switch-label::after {
  content: var(--switch-text);
}

#theme-switch {
  position: absolute !important;
  height: 0px;
  width: 0px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --switch-text: var(--dark-switch-text);
    --text-color: var(--dark-text);
    --bg-color: var(--dark-bg);
    --theme-color: var(--dark-theme);
    --gray-color: var(--dark-gray);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --switch-text: var(--light-switch-text);
    --text-color: var(--light-text);
    --bg-color: var(--light-bg);
    --theme-color: var(--light-theme);
    --gray-color: var(--light-gray);
  }
}