如何在ExtJS 6.6经典工具包中实现主题切换器（浅色/深色模式）？

Question

我正在使用 Classic 工具包开发 ExtJS 6.6 应用程序，目前将 Triton 主题设置为默认主题。我想添加允许用户在亮/暗模式之间或应用程序内其他预定义主题之间切换的功能。尽管搜索了文档和论坛，我还没有找到关于如何在 ExtJS 6.6 中实现这一目标的明确指南或示例。

它可以是两个主题之间的切换，也可以是像 sencha 示例中那样的组合框： ExtJS 主题查看器

这是我迄今为止尝试过的：

1. 我研究了动态加载与主题相关的不同 CSS 文件，如下所示： 如何切换extjs主题？
2. 我考虑过使用 SASS 变量来切换样式，但不知道如何在运行时动态应用更改。

有人在 ExtJS 中实现了类似的功能吗<= 6.6 or can offer insights into the best approach to take? Any advice or code snippets would be greatly appreciated.

Answer 1

创建两个主题。

将“其他”主题添加到

app.json

"css": [{
        // orignal
    }, {
        "path": "./resources/DarkTheme.css"
    }]

构建您的应用程序并找到两个不同 css 文件的 id。

/**
 * All css ids will be equal to the filename
 * Typically the light theme will be `AppName-all`
 */
init: function() {
    const links = document.getElementsByTagName('link');

    Ext.Array.each(links, function(link) {
        if (link.type === 'text/css') {
            const regex = /^(.*[\\\/])?(\.*.*?)(\.[^.]+?|)$/,
                fileName = link.href.match(regex);

            link.id = fileName;
        }
    })
},

switchTheme: function(isDark) {
    document.getElementById('DarkTheme').disabled = !isDark;
    document.getElementById('lightThemeID').disabled = isDark;
}