如何在 ExtJS 7 中为 Material 主题自定义暗模式 - 经典

问题描述

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

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

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

但我无法找到一种方法来更改深色模式下应用的深色。有谁知道我如何实现这一目标？

解决方法

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

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

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

您可以创建一个新的客户主题扩展材料，或将主题变量覆盖到您的 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,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,lighten($confirm-color,15%)));

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

$color: dynamic(if($dark-mode,#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,'200')));

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

$faded-color: dynamic(if($dark-mode,#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

,

不确定经典工具包是否有任何区别，但在现代工具包中您可以像这样定义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()