html {
  --topnav-bg-color: #f8f6f2;
  --page-bg-color: #f3f3f3;
  --pane-bg-color: white;
  --pane2-bg-color: #fbfbfa;
  --text-color: #464646;
  --text-color-secondary: rgba(70, 70, 70, 0.8);
  --text-color-placeholder: rgba(70, 70, 70, 0.5);
  --color-primary-opacity-5: rgba(209, 187, 158, 0.5);
  --icon-color: #d1bb9e;
}

/**
==========
dark
==========
 */
html.dark {
  --topnav-bg-color: #414141;
  --page-bg-color: #373737;
  --pane-bg-color: #2c2c2c;
  --pane2-bg-color: #3a3a39;
  --text-color: #ececec;
  --text-color-secondary: rgba(236, 236, 236, 0.8);
  --text-color-placeholder: rgba(236, 236, 236, 0.5);
  --color-primary-opacity-5: rgba(209, 187, 158, 0.5);
  --icon-color: #2c2c2c;

  body,
  input {
    color: white;
  }
}