如何在ExtJS 7-Classic中自定义材质主题的暗模式

Question

我试图为我的应用程序设置一个黑暗模式，我已经查阅了所有的文档和博客文章，以了解材料主题、黑暗模式、时尚。我可以使用Fashion set Variables函数使我的应用程序变暗。

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

• 我希望我的身体背景是灰色的，而不是全黑的
• 我有一个红色的页眉，在红色页眉和黑色背景的深色模式下，它看起来很难在眼睛上看到。所以我想把标题的颜色改成更柔和的红色或其他颜色

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

Answer 1

不确定经典工具包中是否有任何差异，但在现代工具包中，您可以这样定义SASS变量(我们将其放入\sas\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()

Answer 2

请查看经典工具包的主题材料，以查看所有可用的变量

在使用深色模式时，您可以使用"；如果"；混合

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

您可以创建一个新的自定义主题扩展材料，或者将主题变量覆盖到Application.scss文件中

这里有一些有用的"；"颜色相关"；你可以修改

$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.htmlhttps://docs.sencha.com/extjs/7.3.1/guides/core_concepts/material_theme.htmlhttps://docs.sencha.com/extjs/7.3.1/guides/core_concepts/theming.html