如何在 ExtJS 7 - Classic 中为 material 主题自定义深色模式

Question

我正在尝试为我的应用程序设置深色模式，并且我已经查阅了 material 主题、深色模式、时尚的所有文档和博客文章。我可以使用 Fashion set Variables 函数将我的应用程序变暗。

但是如何自定义我的应用程序更改为哪些深色？例如：

我希望我的 body 背景为灰色，而不是全黑。
我有一个 header 是红色的，在深色模式下，红色 header 和黑色背景，看起来很刺眼。所以我想将 header 颜色更改为更柔和的红色或其他颜色。

但我无法找到一种方法来更改在深色模式下应用的深色。有谁知道我怎样才能做到这一点？

Answer 1

请查看主题-material for classic toolkit 以查看所有可用变量

在使用深色模式时，您可以使用“if”mixin 轻松创建条件颜色

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

您可以创建一个扩展 material 的新客户主题，或者将主题变量覆盖到您的 Application.scss 文件中

这里有一些有用的“颜色相关”sass 您可以修改的变量

$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);

有用的链接

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

Answer 2

不确定在经典工具包中是否有任何区别，但在现代工具包中，您可以这样定义 SASS 变量（我们将其放入 \sass\var.scss）：

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

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

然后在您的 (S)CSS 文件中像这样使用它：

background: $foo;

切换主题使用

Ext.theme.Material.setDarkMode()

如何在 ExtJS 7 - Classic 中为 material 主题自定义深色模式

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

javascript

extjs

sencha-architect

material-design