$main-theme-color: #444; $main-bg-color: #202020; $body-bg-color: darken($main-bg-color, 5%); $anchor-color: #999; $main-text-color: #FFF; $border-color: lighten($body-bg-color, 10%); $secondary-text-color: white; $toast-border: #fafafa; $toast-bg: #333; $focus-outline: lighten($main-theme-color, 50%); $compose-background: lighten($main-theme-color, 52%); @import "_base.scss"; @import "_dark.scss"; @import "_dark_navbar.scss"; @import "_dark_scrollbars.scss"; :root { // like base.scss, but with $anchor-color instead of $main-theme-color // --action-button-fill-color: #{lighten($anchor-color, 18%)}; --action-button-fill-color-hover: #{lighten($anchor-color, 22%)}; --action-button-fill-color-active: #{lighten($anchor-color, 5%)}; --action-button-fill-color-pressed: #{darken($anchor-color, 7%)}; --action-button-fill-color-pressed-hover: #{darken($anchor-color, 2%)}; --action-button-fill-color-pressed-active: #{darken($anchor-color, 15%)}; --nav-indicator-bg: #{$main-theme-color}; // special override on the nav indicator color }