pinafore/scss/theme-default.scss

:root {
  $main-theme-color: royalblue; // also: crimson, forestgreen, hotpink
  $anchor-color: $main-theme-color;
  $main-text-color: #333;
  $border-color: #dadada;
  $main-bg-color: white;
  $secondary-text-color: white;

  --button-primary-bg: lighten($main-theme-color, 7%);
  --button-primary-text: $secondary-text-color;
  --button-primary-border: darken($main-theme-color, 30%);
  --button-primary-bg-active: lighten($main-theme-color, 1%);
  --button-primary-bg-hover: lighten($main-theme-color, 9%);

  --button-bg: darken($main-bg-color, 10%);
  --button-text: $main-text-color;
  --button-border: darken($border-color, 20%);
  --button-bg-active: darken($main-bg-color, 25%);
  --button-bg-hover: darken($main-bg-color, 5%);

  --input-border: $border-color;
  --anchor-text: $anchor-color;
  --main-bg: $main-bg-color;
  --body-bg: lighten($main-theme-color, 38%);
  --body-text-color: $main-text-color;
  --main-border: $border-color;

  --form-bg: darken($main-bg-color, 3%);
  --form-border: darken($border-color, 10%);

  --nav-bg: $main-theme-color;
  --nav-border: darken($main-theme-color, 10%);
  --nav-a-border: $main-theme-color;
  --nav-a-selected-border: $secondary-text-color;
  --nav-a-selected-bg: lighten($main-theme-color, 10%);
  --nav-svg-fill: $secondary-text-color;
  --nav-text-color: $secondary-text-color;

  --nav-a-selected-border-hover: $secondary-text-color;
  --nav-a-selected-bg-hover: lighten($main-theme-color, 15%);
  --nav-a-bg-hover: lighten($main-theme-color, 5%);
  --nav-a-border-hover: $main-theme-color;
  --nav-svg-fill-hover: $secondary-text-color;
  --nav-text-color-hover: $secondary-text-color;

  --action-button-fill-color: lighten($main-theme-color, 15%);
  --action-button-fill-color-hover: lighten($main-theme-color, 20%);
  --action-button-fill-color-active: lighten($main-theme-color, 5%);

  --settings-list-item-bg: $main-bg-color;
  --settings-list-item-text: $main-theme-color;
  --settings-list-item-text-hover: $main-theme-color;
  --settings-list-item-border: $border-color;
  --settings-list-item-bg-active: darken($main-bg-color, 10%);
  --settings-list-item-bg-hover: darken($main-bg-color, 2%);
}