Ability to use custom theme (SCSS)

[hatsforclowns]

Summary

Currently, we are only able to theme the app using one of three presets (white, dark and g10).

Although it is possible to introduce custom styles in index.scss, this feels like a rather counter-intuitive workaround as opposed to editing the theme tokens directly.

It would be great if we could write custom themes according to this schema and use these instead of the presets, if desired.

Apologies if there's already a way of doing this and I've simply missed it.

Justification

The limited number of theme presets and inability(?) to edit tokens directly either in a preset/custom theme makes it difficult to efficiently apply alternative styles to the theme.

Desired UX and success metrics

Alongside the existing documentation for configuring the theme, users should be:

• informed that they have the ability to create a custom theme using the existing Carbon tokens (i.e. $background, $interactive)
• provided with instructions or a recipe for how this theme can be used in their Gatsby app

Must-have functionality

The ability to supersede a preset theme with a custom one, or to granually supersede individual tokens.

Specific timeline issues / requests

None.

Available extra resources

Testing, documentation.