:root {
  --background-color: #{$background-color};

  --font-color: #{$font-color};
  --link-color: #{$link-color};
  --read-color: #{$read-color};
  --confirm-button-font-color: #{$confirm-button-font-color};

  --accent-color: #{$accent-color};
  --lighter-accent-color: #{$lighter-accent-color};
  --lightest-accent-color: #{$lightest-accent-color};

  --confirm-color: #{$confirm-color};
  --danger-color: #{$danger-color};
  --warning-color: #{$warning-color};
  --info-color: #{$info-color};

  &.dark-theme {
    --background-color: #{$dark-background-color};

    --font-color: #{$dark-font-color};
    --link-color: #{$dark-link-color};
    --read-color: #{$dark-read-color};
    --confirm-button-font-color: #{$dark-confirm-button-font-color};

    --accent-color: #{$dark-accent-color};
    --lighter-accent-color: #{$dark-lighter-accent-color};
    --lightest-accent-color: #{$dark-lightest-accent-color};

    --confirm-color: #{$dark-confirm-color};
    --danger-color: #{$dark-danger-color};
    --warning-color: #{$dark-warning-color};
    --info-color: #{$dark-info-color};
  }

  color: var(--font-color);
  background-color: var(--background-color);
}
