在Yii2.0.55中实现后台主题切换需四步：1. 将theme-blue.css、theme-dark.css置于@webroot/css/themes/目录，命名规范且无@import；2. 在main.php的<body>标签中动态写入session中的theme类名，默认theme-blue；3. 通过JS调用/site/set-theme保存选择并刷新页面，确保AssetBundle重载CSS；4. 在AppAsset.php中动态注册对应CSS路径，并校验控制器中传入的主题合法性以防XSS。
在Yii2.0.55项目中为后台界面添加可切换的主题皮肤，需绕过框架默认的静态资源加载机制，直接干预视图层的CSS注入逻辑与body类名控制，否则点击切换后页面样式无响应或出现闪烁。
确认主题CSS文件存放位置与命名规范
进入@webroot/css/themes/目录，确保已存在至少两套独立CSS文件：theme-blue.css、theme-dark.css。文件名必须以theme-开头且全小写，中间不含空格或特殊符号，否则后续JS匹配失败。
每套CSS文件内不得包含@import语句，所有样式必须为扁平化定义；例如theme-dark.css应直接设置body { background: #1a1a1a; color: #e0e0e0; }，而非依赖外部变量。
在布局视图中注入动态主题类名
打开@app/views/layouts/main.php，定位到<body>标签起始处，在其内部添加PHP逻辑：
立即学习“前端免费学习笔记（深入）”；
<body class="= Yii::$app->session->get('theme', 'theme-blue') ?>"></body>
这行代码会从用户会话中读取当前选中的主题标识符，并作为class写入body标签。若会话中未设置，则默认使用theme-blue——该值必须与CSS文件名前缀严格一致（不含.css后缀）。
编写前端切换脚本并绑定事件
在main.php底部</body>之前插入以下JavaScript代码块：
<script>function switchTheme(theme) {fetch("/site/set-theme?theme=" + theme).then(() => {document.body.className = theme;location.reload();});}</script>
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
该函数向/site/set-theme发起GET请求保存主题选择，随后强制刷新页面。注意：不能仅靠JS修改className而不刷新，因为Yii2.0.55的AssetBundle机制在首次渲染后不会重新解析CSS依赖关系，导致新主题样式不生效。
在需要放置切换按钮的位置（如顶部导航栏右侧），插入HTML：
<button onclick="switchTheme('theme-blue')">蓝色</button><button onclick="switchTheme('theme-dark')">深色</button>
创建主题保存控制器动作
打开@app/controllers/SiteController.php，在public function actions()之后新增方法：
public function actionSetTheme() { $theme = Yii::$app->request->get('theme'); if (in_array($theme, ['theme-blue', 'theme-dark'])) { Yii::$app->session->set('theme', $theme); } return $this->asJson(['status' => 'ok']); }
此动作接收前端传来的主题标识，校验合法性后存入session。【必须校验】否则攻击者可通过构造URL任意写入非法class名，引发XSS风险。
注册主题CSS资源到AssetBundle
打开@app/assets/AppAsset.php，找到public $css数组，在末尾追加动态路径：
'css/themes/' . Yii::$app->session->get('theme', 'theme-blue') . '.css',
这行代码确保每次页面渲染时，AssetBundle都会加载当前会话中指定的主题CSS文件。若此处遗漏，即使body有正确class，样式表也不会被引入，主题切换形同虚设。
