Themes

Text and colour combinations that divide up sections of the site.

Please note that the pink and blue themes have been deprecated and support for them has ceased from version 58.0.0

How we design them

We have 3 themes to pick from:

White background with black text
Black background with white text
Wild sand background with black text (note: this also has a background texture)

Note: All combinations meet the AA accessibility standard.

How to use them

Using utility classes

.gg-t-white
.gg-t-black
.gg-t-wild-sand

Using the mixins

.el {
  @include theme(black);
}

.el {
  @include theme(white);
}

.el {
  @include theme(wild-sand);
}

How they look

View demo

320 x 568

View code

    <div class="gg-t-white">
  <section class="gg-o-page-section">
    <p>white theme and a <a href="#" class="gg-u-link">link</a></p>
  </section>
</div>
<div class="gg-t-wild-sand">
  <section class="gg-o-page-section">
    <p>wild-sand theme and a <a href="#" class="gg-u-link">link</a></p>
  </section>
</div>
<div class="gg-t-black">
  <section class="gg-o-page-section">
    <p>black theme and a <a href="#" class="gg-u-link">link</a></p>
  </section>
</div>