How we conspired with the color wheel…

amber color theming …for better content recognition! Something I’ve been wanting to implement for a while is various colors for elements on our lists. Why? Well, lists are:

  • The easiest way for us to give people access to info in our database
  • …and therefore something we have a lot of
  • Inherently visually boring (uniform and repetitive)

amber color theming
This means that we have a lot of resources that our staff will reference (sometimes side by side) that will either all look the same because of their style consistency, or they will be distinguishable because they pull styles from different CSSĀ eras. It would be much better to have thematically consistent styles, and develop conventions for components such as legends, descriptions, tooltips, labels, links, so that people can seamlessly navigate our resources.

amber color theming
To deal with this problem, I’m introducing color themes to our amber styles pool. The theme colors will apply to navigational components like panel/table headers and typography headers. The idea is to help someone instantly process the identity of a list or application, even if it has a very similar structure to another one they have on screen.

amber color theming I implemented this by creating a Sass mixin that generates all the variables for a theme, and a partial that contains only the selectors effected by a theme. The variables must be set to global to overwrite default ones.

@mixin generate-theme-colors($base-hue) {
  $theme-base: $base-hue !global;
  $theme-light-accent: saturate(lighten($theme-base, 20), 1) !global;
  $theme-dark-accent: darken($theme-base, 3) !global;
  $theme-med: saturate(lighten($theme-base, 10), 1) !global;
  $theme-light: saturate(lighten($theme-base, 20), 1) !global;
}

Then I nested them in a theme class (presumably used on the body tag).

.warm-one {
  @include generate-theme-colors(#543236);
  @import "themed-components";
}

amber color theming

Viola! A CSS set has been created for each theme.