Theming with theme overrides

Theme override file

The Digital Framework has a file called theme-variables.scss, this file consists of variables the allow you to change the colour of anything within the framework. There are 2 main sections of the theme-variables file, global variables and individual variables:

Global Variables

These variables make it easy to change the overall look and feel of your project.

// Global variables
// ---------------------------
// Change the theme global colours

// Theme colours
// -----------------

$slb-theme-primary:                                         colour(blue) !default;
$slb-theme-primary-alt:                                     colour(blue, alt) !default;
$slb-theme-primary-dark:                                    colour(blue, dark) !default;
$slb-theme-primary-pale:                                    colour(blue, pale) !default;
$slb-theme-primary-tint:                                    colour(blue, tint) !default;
$slb-theme-secondary:                                       colour(yellow) !default;
$slb-theme-secondary-alt:                                   colour(yellow, alt) !default;
$slb-theme-secondary-dark:                                  colour(yellow, dark) !default;
$slb-theme-secondary-pale:                                  colour(yellow, pale) !default;
$slb-theme-secondary-tint:                                  colour(yellow, tint) !default;

// source: digital-framework\src\scss\_theme-variables.scss

Individual variables

This is a snippet of the breadcrumb individual variables, every component can be found here in alphabetical order.

As you can see many of the breadcrumbs variables link up to the global theme variables above, this is the same for most components to ensure the global variables change the overall look and feel whilst giving you the ability to change components individually.

// Component variables
// ---------------------------
// Change the theme individual component colours

// Breadcrumb
// -----------------
$slb-breadcrumb-content-bg:                                 $slb-theme-secondary !default;
$slb-breadcrumb-border:                                     $slb-breadcrumb-bg !default;
$slb-breadcrumb-bg-alt:                                     transparent !default;
$slb-breadcrumb-text:                                       $slb-theme-primary !default;
$slb-breadcrumb-hover-text:                                 $slb-breadcrumb-text !default;
// source: digital-framework\src\scss\_theme-variables.scss

Inside the component file

Each variable is named as intuitive as possible to avoid confusion, so to find the element for the variable $slb-breadcrumb-border, go to the breadcrumb file and it will be border of the breadcrumb block element. And to find $slb-breadcrumb-content-bg, find the breadcrumb content elements background colour. see below:

.#{$ns}-breadcrumb {
    @include rem (border-top, 7px solid $slb-breadcrumb-border);
    ...
        &__content {
            ...
            &:before {
                background-color: $slb-breadcrumb-content-bg;
            }
        }
} // source: digital-framework\src\scss\components\_breadcrumb.scss

How to use the theme variables

Example - Theming Standardlife.co.uk

In this example standardlife.co.uk's website will be getting themed with the framework.

The couk website uses all default branding colours apart from the breadcrumb.

Theming with the framework

There are 2 ways of theming the Digital Framework, using the frameworks maps/mixins and using custom colour values.

Using Digital Framework's maps/mixins

In order to use the Standard Life colours in the framework you must import the project in sections with your overrides below the variables file but above the theme-variables file.

Here is the example for the couk project where the breadcrumbs background is overwritten to blue alt and the text to white. note how the variable overrides are above the theme-variables file but below the variables file, this is because the variables file holds the map for the Standard Life colours.

@import "../../../node_modules/@web-dev/digital-framework/src/scss/frameworks/bootstrap";
@import "../../../node_modules/@web-dev/digital-framework/src/scss/utilities/utilities";
@import "../../../node_modules/@web-dev/digital-framework/src/scss/variables";

// Variable Overrides
// -----------------

$slb-breadcrumb-bg:    colour(blue, alt);
$slb-breadcrumb-text:  colour(white);

@import "../../../node_modules/@web-dev/digital-framework/src/scss/theme-variables";
@import "../../../node_modules/@web-dev/digital-framework/src/scss/components/components";

Using custom colour values

In this example, the use of the colour() mixin is not needed which means you can just import the full framework and put the variables overrides at the top of the file, before the framework.

// Variable Overrides
// -----------------

$slb-breadcrumb-bg:    #147cb3;
$slb-breadcrumb-text:  #ffffff;

@import "../../../node_modules/@web-dev/digital-framework/src/scss/digital-framework";