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

user_5145783 0
Viewed 654

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?

sencha-architect material-design extjs javascript
2 Answers

Please look theme-material for classic toolkit to see all variables available

While working with dark-mode you can easly create conditional colors by using "if" mixin

  $my-var: dynamic(if($dark-mode, #ffffff, #111111));

You can create a new custome theme extending material, or override theme vars into your Application.scss file

Here are some usefull "colors-related" sass vars you can modify

$dark-mode: dynamic(true);

$base-color: dynamic(material-color($base-color-name, '500'));
$base-highlight-color: dynamic(material-color($base-color-name, '300'));
$base-light-color: dynamic(material-color($base-color-name, '100'));
$base-dark-color: dynamic(material-color($base-color-name, '700'));

// TODO: Added explicit darken method with 0%. Fix Fashion complication 
// Fashion do not brings those functions in css-vars.js if in conditional statement 
//which do not execute
// with initial value. Here, initial darkmode value is false.
$base-pressed-color: dynamic(darken(if($dark-mode, darken($base-color, 15%), 
lighten($base-color, 15%)), 0%));
$base-focused-color: dynamic(material-color($base-color-name, '400'));
$base-invisible-color: dynamic(rgba($base-color, 0));
$base-foreground-color: dynamic(material-foreground-color($base-color-name));

$accent-color: dynamic(material-color($accent-color-name, '500'));
$accent-light-color: dynamic(material-color($accent-color-name, '100'));
$accent-dark-color: dynamic(material-color($accent-color-name, '700'));
$accent-pressed-color: dynamic(if($dark-mode, darken($accent-color, 15%), lighten($accent-color, 15%)));
$accent-invisible-color: dynamic(rgba($accent-color, 0));
$accent-foreground-color: dynamic(material-foreground-color($accent-color-name));

$confirm-color: dynamic(material-color('light-green', '600'));
$confirm-pressed-color: dynamic(if($dark-mode, darken($confirm-color, 15%), lighten($confirm-color, 15%)));

$alert-color: dynamic(material-color('red', '800'));
$alert-pressed-color: dynamic(if($dark-mode, darken($alert-color, 15%), lighten($alert-color, 15%)));

$color: dynamic(if($dark-mode, #ffffff, #111111));
$reverse-color: dynamic(if($dark-mode, #222, #fff));
 
$panel-header-color: dynamic(#ffffff);
$window-header-color: dynamic(#111111);

$focus-font-color: dynamic(#ffffff);

$highlight-color: dynamic(rgba($color, .54));
$disabled-color: dynamic(rgba($color, .38));
$reverse-disabled-color: dynamic(rgba($reverse-color, .38));
$divider-color: dynamic(mix($color, $reverse-color, 12%));

$selected-background-color: dynamic(if($dark-mode, $base-dark-color, material-color('grey', '300')));
$hovered-background-color: dynamic(if($dark-mode, #4d4d4d, material-color('grey', '200')));

$header-background-color: dynamic(if($dark-mode, material-color('grey', '800'), material-color('grey', '100')));

$faded-color: dynamic(if($dark-mode, #4d4d4d, #e1e1e1));

$background-color: dynamic(if($dark-mode, #303030, #fafafa));
$alt-background-color: dynamic(if($dark-mode, #3a3a3a, #f5f5f5));

$reverse-background-color: dynamic(if($dark-mode, #fafafa, #303030));
$reverse-alt-background-color: dynamic(if($dark-mode, #f5f5f5, #3a3a3a));

// Used for subtle overlays on top of items (picker bar, etc)
$overlay-color: dynamic(if($dark-mode, rgba(#fff, .03), rgba(#000, .03)));

// Used to update pressed state BG color for buttons
$pressed-color: dynamic(#0c7ce6);

Usefull links

https://docs.sencha.com/extjs/7.3.1/guides/core_concepts/classic_theming.html https://docs.sencha.com/extjs/7.3.1/guides/core_concepts/material_theme.html https://docs.sencha.com/extjs/7.3.1/guides/core_concepts/theming.html

user_39804940

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()
user_26670650
Related