How to customize dark mode for material theme in ExtJS 7 - Classic

Im trying to have a dark mode for my application, and I've looked up all the documentation and blog posts for material theme, dark mode, Fashion. I can turn my application dark using the Fashion set Variables function.

But how do I customize what dark colors my applications changes to? For example:

• I want my body background to be gray in color, not fully black.
• I have a header which is red in color, and in dark mode with red header and black background, it looks very hard on the eyes. So I want to change the header color to a softer red color or something else.

But I am unable to find a way to change what dark colors are applied in dark mode. Does anyone know how I can achieve this?

Not sure if there any difference in classic toolkit, but in modern toolkit you can define SASS variable like this (we put it into \sass\var.scss):

$foo: dynamic(if($dark-mode, #111111, #FFFFFF));

@if ($enable-css-variables) {
  #{$css-variable-selector} {
    --foo: export;
  }
}

and than use it like this in your (S)CSS files:

background: $foo;

To switch theme use

Ext.theme.Material.setDarkMode()