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

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

但我如何定制我的应用程序更改为什么颜色？ 例如：

• 我希望我的身体背景是灰色的，而不是完全黑色的
• 我有一个标题是红色的，在黑暗模式下，红色标题和黑色背景，看起来很难在眼睛上。因此，我想将标题颜色更改为柔和的红色或其他颜色

---

但我无法找到一种方法来改变在黑暗模式下应用的黑暗颜色。有人知道我如何做到这一点吗？

请查看classic toolkit的主题材料，查看所有可用变量

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

您可以创建新的自定义主题扩展材质，或将主题变量覆盖到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);

有用链接

---

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

然后在CSS文件中这样使用它：

background: $foo;

要切换主题，请使用

Ext.theme.Material.setDarkMode()

---

谢谢，但当黑暗模式打开时，我无法更改颜色。我正在尝试使用条件暗模式修改材质主题变量“$toolbar background color”。我试着把它放在主题文件夹的sass/var/Component.scss中，但没有成功。我到底需要在哪里用“暗模式混合”定义这个变量？即使在使用Ext.theme.Material.setDarkMode（true）切换暗模式时，它也始终设置为颜色#111111。谢谢，这很有效！我看了这些文件，没有发现任何关于这个的东西。你能告诉我这些信息的来源吗？@是的，文档中没有这样的信息，但是你可以检查主题文件，例如@sencha/ext-modern-theme-material/sass/src/Component。scss@Serget诺维科夫：我检查过了，现在更合理了。一个相关的问题：我也看到材料图标的东西，但我无法理解它的意思？（另外，我不是前端/SASS开发人员）。有没有一种简单的方法可以将材质图标也用作图标？

background: $foo;

Ext.theme.Material.setDarkMode()