:root {
  --color-white: #fff;
  --color-black: #000;
  --color-dark-gray: rgba(0, 0, 0, 0.5);
  --color-gray: #8a898e;
  --color-light-gray: #e9e9eb;
  --color-red: #e73555;
  --color-dark-blue: #2571d9;
  --color-blue: #459aff;
  --color-purple: #a55fff;

  --background-color: #faf9fe;
  --border-color: rgba(0, 0, 0, 0.1);

  --header-color: rgba(255, 255, 255, 0.8);
  --date-color: rgba(0, 0, 0, 0.68);
  --content-more-color: rgba(0, 0, 0, 0.3);
  --category-p-color: #0000004d;
  --modal-color: rgba(255, 255, 255, 0.8);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-white: #000;
    --color-black: #fff;
    --color-dark-gray: rgba(255, 255, 255, 0.5);

    --header-color: rgba(0, 0, 0, 0.8);
    --content-more-color: rgba(255, 255, 255, 0.3);
    --date-color: rgba(255, 255, 255, 0.3);
    --background-color: #0f1113;
    --border-color: rgba(255, 255, 255, 0.2);
    --color-light-gray: #4c4c4c;
    --category-p-color: #fff;
    --modal-color: rgba(76, 76, 76, 0.8);
  }
}