Mailspring/app/internal_packages/ui-ubuntu/styles/ui-variables.less

// All themes need a file called `ui-variables` that extends from the base
// variables and overrides colors, padding, etc. Other plugins import
// `ui-variables` to make their custom CSS react to the current theme.
@import 'base/ui-variables';

@accent-primary: #f07746;
@accent-primary-dark: darken(#f07746, 1%);

@border-color-divider: #e2e2e2;
@border-color-secondary: lighten(@background-secondary, 10%);

@toolbar-background-color: #41403b;
@light: rgb(246, 246, 246);

.sheet-container {
  .sheet-toolbar {
    .btn-toolbar img.content-mask {
      background-color: @light;
    }

    .sheet-toolbar-container {
      background-image: -webkit-linear-gradient(
        top,
        lighten(@toolbar-background-color, 6%),
        darken(@toolbar-background-color, 5%)
      );
      box-shadow: none;
      .btn {
        background: lighten(@toolbar-background-color, 4%);
      }
      .btn.btn-toolbar {
        color: @light;
      }
      .toolbar-activity .activity-toolbar-icon {
        background: @light;
      }
    }
  }

  .sheet-toolbar .item-back img.content-mask,
  .sheet-toolbar .toolbar-menu-control img.content-mask {
    background-color: @light;
  }

  .sheet-toolbar .item-back .item-back-title {
    color: @light;
  }

  .sheet-toolbar .selection-bar {
    .absolute {
      border-color: lighten(@toolbar-background-color, 5%);
      background-color: darken(@toolbar-background-color, 8%);

      .inner {
        .centered {
          color: @light;
        }
      }
    }
  }
}

.btn-icon img.content-mask {
  background-color: @light;
  color: @light;
}

.btn-icon img.content-mask:hover {
  background-color: @accent-primary;
}

body.is-blurred .sheet-container {
  .sheet-toolbar {
    .sheet-toolbar-container {
      background-image: -webkit-linear-gradient(
        top,
        darken(@toolbar-background-color, 5%),
        darken(@toolbar-background-color, 5%)
      );
    }
  }
}