如何在Sencha Architect构建的Extjs7.4 Modern项目中动态切换主题

方案支持用户自主选择主题，选定后页面重载即可生效，无需实现无刷新切换逻辑，完全适配Sencha Architect的构建流程，针对7.4 Modern版本验证可用。

1. Architect 端前置配置 #

• 确认项目资源面板的Themes节点下已经添加全部3个基于Neptune派生的自定义主题，记录每个主题的准确包名，例如my-neptune-default、my-neptune-dark、my-neptune-compact。
• 打开项目设置面板，找到Build Options分类，勾选Append theme to build path选项。该配置会让Architect在构建时自动把每个主题的CSS、静态资源输出到独立目录resources/themes/<主题包名>/，无需手动修改构建脚本。
• 执行一次全量构建，检查构建输出目录下的resources/themes/路径，确认3个主题对应的资源文件夹都已生成，每个文件夹内存在<主题包名>-all.css文件。
• 注意：所有自定义代码都要写入Architect对应的代码编辑面板，不要直接修改构建产物目录下的文件，否则下次构建会被覆盖。

2. 入口处主题预加载逻辑 #

为了避免页面加载时出现默认主题样式闪烁，需要在ExtJS框架加载前就读取用户的主题配置，提前加载对应主题CSS。
打开Architect中App Entry分类下的index.html编辑项，在引入ext-modern.js的script标签之前插入以下代码：

// 主题配置项，和之前记录的主题包名保持一致
const DEFAULT_THEME = 'my-neptune-default';
const VALID_THEMES = ['my-neptune-default', 'my-neptune-dark', 'my-neptune-compact'];

// 读取本地存储的用户选择，非法值自动回退到默认主题
let userTheme = localStorage.getItem('app_selected_theme') || DEFAULT_THEME;
if (!VALID_THEMES.includes(userTheme)) {
    userTheme = DEFAULT_THEME;
    localStorage.setItem('app_selected_theme', userTheme);
}

// 提前注入主题CSS
const themeLink = document.createElement('link');
themeLink.rel = 'stylesheet';
themeLink.id = 'ext-theme-style';
themeLink.href = `resources/themes/${userTheme}/${userTheme}-all.css`;
document.head.appendChild(themeLink);

// 挂载到全局方便应用内读取当前主题
window.CURRENT_THEME = userTheme;

app.json中无需修改默认theme配置，保留基础主题即可，提前注入的主题CSS会覆盖默认加载的基础主题样式，不会出现冲突。

3. 应用内主题选择逻辑 #

在设置页、个人中心等放置主题选择入口的位置，添加单选组、选择器等选择控件，选项值和VALID_THEMES里的主题包名一一对应，显示文本可自定义（如「默认浅色」「深色模式」「紧凑模式」）。
给控件绑定值变更事件，逻辑不需要调用ExtJS内置的主题切换API，仅需持久化用户选择后重载页面即可，示例代码：

onThemeSelect: function (selector, newThemeVal) {
    if (VALID_THEMES.includes(newThemeVal)) {
        localStorage.setItem('app_selected_theme', newThemeVal);
        window.location.reload();
    }
}

4. 构建&调试注意事项 #

• 每次修改自定义主题、新增主题后，必须执行全量构建（Architect点击Build All或命令行执行sencha app build），避免增量构建遗漏主题资源。
• 开发阶段使用sencha app watch调试时该逻辑同样生效，无需额外配置，watch模式会自动同步主题文件变更。
• 如果切换后出现部分组件样式异常，先检查自定义派生主题是否正确继承Neptune基类、是否缺失依赖的Sass资源，再打开浏览器控制台检查对应主题的CSS文件是否正常加载（状态码200）。

该方案不需要引入额外第三方依赖，所有逻辑基于原生JS和ExtJS默认能力实现，构建后产物路径完全符合Sencha Architect的输出规则，不会出现升级、构建后失效的问题。

内容的提问来源于stack exchange，提问作者David