在 Yii2 Starter Kit 的后台应用中，基于一套主题，调整其样式，以与设计一致

1、上一篇：http://www.shuijingwanwq.com/2017/11/30/2084/

2、现有的默认界面，如图1

图1

3、设计的UI界面，需要如此实现，如图2

图2

4、复制：\vendor\bower\admin-lte\build\less\variables.less 至：\backend\web\themes\default\css\variables.less，清空其中的所有内容

5、新建：\backend\web\themes\default\css\_all-skins.less，如图3

图3

@admin-lte-path: "../../../../../vendor/bower/admin-lte";
@import "@{admin-lte-path}/build/less/skins/_all-skins.less";
@import "variables.less";

6、新建：\backend\web\themes\default\css\AdminLTE.less，如图4

图4

@admin-lte-path: "../../../../../vendor/bower/admin-lte";
@import "@{admin-lte-path}/build/less/AdminLTE.less";
@import "variables.less";

7、新建：\backend\assets\AdminLte.php，继承至 \common\assets\AdminLte，设置$css为空数组，因为需要设置less变量，重新生成对应的CSS文件，所以默认的CSS文件需要去掉，如图5

图5

namespace backend\assets;

class AdminLte extends \common\assets\AdminLte
{
    public $css = [
    ];
}

8、基于第5、6步骤，已经自动编译出对应的CSS文件，参考网址：http://www.shuijingwanwq.com/2017/12/07/2108/ ，如图6

图6

9、编辑：\backend\assets\BackendAsset.php，调整该资源包CSS文件的数组，如图7

图7

    public $css = [
        'css/AdminLTE.css',
        'css/_all-skins.css',
        'css/style.css'
    ];

10、分析侧边栏背景颜色，在 \vendor\bower\admin-lte\dist\css\skins\_all-skins.min.css 中设置的，如图8

图8

11、获取设计UI的侧边栏背景颜色，如图9

图9

12、在 \vendor\bower\admin-lte\build\less\variables.less 中搜索 #222d32，如图10

图10

13、将 @sidebar-dark-bg: #222d32; 复制至 \backend\web\themes\default\css\variables.less，调整为：@sidebar-dark-bg: #293e50;，其他几个变量类似地调整，如图11

图11

14、查看调整后的界面，侧边栏背景颜色、顶栏背景颜色、侧边栏宽度(从230px变化为280px)，皆已经发生变化了，且与设计一致，如图12

图12

15、查看源代码，AdminLTE.css、_all-skins.css，已经实现主题化了，如图13

图13

16、除了基于less变量全部重新编译为全新的CSS文件，还有另外一种主题化的方案，便是提取出对应的使用了需要调整的less变量的less代码，仅编译部分需要覆盖的代码，不过此种方案，需要分析源代码，提取是存在一定的难度的了。因此，建议采用全部重新编译的方案。