Custom Teams theming with fluentui/-react-northstar - theming

Question

Docs for fluentui-react-northstar theming can be found here.
I am struggling to understand how to make use of a custom theme. It seems I need one provider for the Teams base theme, and then a nested one for my own theme (which may well be wrong)
<Provider theme={teamsTheme}>
<Provider theme={myTheme}>
But I only want to make a few changes to the base theme, for example making the brand colour red. The documentation doesn't really explain how to make use of it.
For example, the docs show this:
const theme = {
siteVariables: {
brand: 'darkred',
...
but this does nothing to change the primary colour in the app...
Any pointers would be greatly appreciated.
NOTE: I originally went to post this question on the github page, but it said questions should be asked here

Answer 1

After a bit of trial and error, I found that this works:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Button, Provider, mergeThemes, teamsTheme } from '#fluentui/react-northstar';
const customTheme = {
siteVariables: {
colorScheme: {
brand: {
'background': 'darkred',
}
}
}
}
ReactDOM.render(
<Provider theme={mergeThemes(teamsTheme, customTheme)}>
<Button primary content="Hello" />
</Provider>
,
document.getElementById('app'),
)
Gives this: