Overriding scss variables with Angular Material - css

Question

I have the following scss file being imported into my Angular Project
#import '~#angular/material/theming';
#import "./mat-palette.scss";
#include mat-core();
$ombi-app-primary: mat-palette($ombi-primary, 500);
$ombi-app-accent : mat-palette($ombi-accent, A200, A100, A400);
$background: white;
$ombi-app-warn : mat-palette($mat-deep-orange);
$ombi-app-theme: mat-light-theme($ombi-app-primary, $ombi-app-accent, $ombi-app-warn);
#include angular-material-theme($ombi-app-theme);
// Define an alternate dark theme.
$ombi-dark-app-primary: mat-palette($mat-grey, 800);
$ombi-dark-app-accent: mat-palette($mat-amber, A200, A100, A400);
$ombi-dark-app-warn: mat-palette($mat-deep-orange);
$dark-theme: mat-dark-theme($ombi-dark-app-primary, $ombi-dark-app-accent, $ombi-dark-app-warn);
$primary: mat-color($ombi-app-primary);
$accent: mat-color($ombi-app-accent);
$warn: mat-color($ombi-app-warn);
.dark {
#include angular-material-theme($dark-theme);
$panel: mat-color(mat-palette($mat-grey, 800));
$primary: mat-color($ombi-dark-app-primary);
$accent: mat-color($ombi-dark-app-accent);
$warn: mat-color($ombi-dark-app-warn);
$background: #424242;
}
Now when the .dark class is applied to the body I expect it to apply the variables inside the .dark section above.
I am importing this file into other scss files so I can use the variables e.g. $background.
So when the .dark class is applied, it seems that $background is set to white and not #424242 and I cannot work out why.
Here is an example on how I am importing it:
#import "~styles/Styles.scss";
.details {
background: $background;
}