:root {
  --background-color-dark: #333;
  --text-color-dark: #fff;
  --background-color-light: #f4f4f4;
  --text-color-light: #333;
  /* Add more theme colors as needed, defined for both dark and light states */
}

body {
  background-color: var(--background-color-dark);
  color: var(--text-color-dark);
  /* other default styles */
}

body.light-theme {
  background-color: var(--background-color-light);
  color: var(--text-color-light);
  /* other light theme overrides */
}