src/styles/_variables.scss
// colors
$color-gray-athens: #e4e7ea;
$color-gray-athens-light: #f1f2f5;
$color-gray-abbey: #4d5055;
$color-gray-outer-space: #35393c;
$color-gray-outer-space-light: lighten($color-gray-outer-space, 20%);
$color-gray-porcelain: #e9ebec;
$color-gray-shark: #252629;
$color-gray-shark-light: #2e3133;
$color-blue-dodger: #448aff;
$color-blue-mariner: #366ad3;
$color-blue-mariner-light: #2274e1;

// light theme
@mixin popup-theme-light() {
  --card-color: black;
  --card-background-color: #{$color-gray-athens};
  --tab_selected-background: white;
  --tab_hover-background: #{$color-gray-athens-light};
  --tab__timeoutIndicator-background: #{$color-blue-dodger};
  --tab__icon_noFavIcon-fill: #{$color-gray-abbey};
}

// dark theme
@mixin popup-theme-dark() {
  --card-color: #{$color-gray-porcelain};
  --card-background-color: #{$color-gray-shark};
  --tab_selected-background: #{$color-gray-outer-space};
  --tab_hover-background: #{$color-gray-shark-light};
  --tab__timeoutIndicator-background: #{$color-blue-dodger};
  --tab__icon_noFavIcon-fill: white;
}
