html[color-scheme="light"] {
  --header-bg-color: var(--bg-color);
  --popup-bg-color: #fbfbfb;
  --box-shadow-color: rgb(227, 227, 227);
  --bg-color: #ffffff;
  --light-gray: #cacaca;
  --primary-color: #4894ff;
  --secondary-text-color: rgb(100, 100, 100);
  --secondary-color: #fbbc05;
  --result-input-border: 1px solid var(--light-gray);
  --text-box-bg: #f2f2f2;
  --check-btn-face: #ffffff;
  /* --box-shadow-1: 1px 1px 1px 1.6px rgba(207, 207, 207, 0.394), */
  /* 1px 1px 2px 1px rgba(207, 207, 207, 0.257); */
  --invalid-bg: rgb(255, 223, 223);
  --invalid-text: rgb(242, 0, 0);
  --hover-bg-color: rgb(246, 246, 246);
  --on-text-box-hover-bg-color: rgb(233, 233, 233);
  --settings-hover-bg-color: rgb(237, 243, 244);
  --curtain-color: rgba(20, 20, 20, 0.44);
  --material-red: rgb(255, 42, 42);
  --material-white: #fff;
  --material-gray: gray;
}

html[color-scheme="dark"] {
  --header-bg-color: var(--bg-color);
  --popup-bg-color: rgb(41, 41, 41);
  --bg-color: #1b1b1b;
  --light-gray: #5f5f5f;
  --primary-color: #164b87;
  --result-input-border: none;
  --text-box-bg: #2f2f2f;
  --check-btn-face: #d7d7d7;
  --box-shadow-1: none;
  --primary-text-color: #e0e0e0;
  --secondary-text-color: #9b9b9b;
  --invalid-bg: rgb(114, 66, 66);
  --invalid-text: rgb(250, 198, 198);
  --hover-bg-color: rgba(255, 255, 255, 0.13);
  --on-text-box-hover-bg-color: rgb(72, 72, 72);
  --settings-hover-bg-color: #303a3e;
  --box-shadow-color: rgb(18, 66, 90);
  --curtain-color: rgba(20, 20, 20, 0.749);
  --material-red: rgb(159, 17, 17);
  --material-white: var(--primary-text-color);
  --material-gray: gray;
}