Yii2.0.55主题皮肤切换配置【前端定制】-php教程-PHP中文网

在yii2.0.55中实现后台主题切换需四步：1. 将theme-blue.css、theme-dark.css置于@webroot/css/themes/目录，命名规范且无@import；2. 在main.php的标签中动态写入session中的theme类名，默认theme-blue；3. 通过js调用/site/set-theme保存选择并刷新页面，确保assetbundle重载css；4. 在appasset.php中动态注册对应css路径，并校验控制器中传入的主题合法性以防xss。

yii2.0.55主题皮肤切换配置【前端定制】

在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，定位到标签起始处，在其内部添加PHP逻辑：

这行代码会从用户会话中读取当前选中的主题标识符，并作为class写入body标签。若会话中未设置，则默认使用theme-blue——该值必须与CSS文件名前缀严格一致（不含.css后缀）。

编写前端切换脚本并绑定事件

在main.php底部之前插入以下JavaScript代码块：

<script>function switchTheme(theme) {fetch("/site/set-theme?theme=" + theme).then(() => {document.body.className = theme;location.reload();});}</script>

该函数向/site/set-theme发起GET请求保存主题选择，随后强制刷新页面。注意：不能仅靠JS修改className而不刷新，因为Yii2.0.55的AssetBundle机制在首次渲染后不会重新解析CSS依赖关系，导致新主题样式不生效。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

在需要放置切换按钮的位置（如顶部导航栏右侧），插入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风险。