主题与颜色

切换主题

Dcat Admin支持主题切换功能，目前内置了四种主题色：indigo、blue、blue-light、green，可通过配置参数admin.layout.color进行切换。

{tip} v1.3.0版本新增配色blue-dark

打开配置文件config/admin.php

  1.      'layout' => [
  2.          'color' => 'blue',
  4.          ...
  5.      ],
  7.      ...

部分主题色预览

主题与颜色 - 图1 主题与颜色 - 图2

自定义主题配色

{tip} Since v1.3.0 - 需要注意的是，如果自定义了主题之后，每次更新新版本，都需要重新编译一次你的自定义主题！！！

开发者可以通过这个功能随意添加自己想要的主题配色，在使用这个功能之前需要先安装NodeJs，没安装的同学前往http://nodejs.cn/下载安装即可。

安装完NodeJs之后可打开命令行运行npm -v测试一下是否安装成功。

  1. npm -v

如果正常返回版本号，则说明已安装成功，同时建议使用淘宝镜像

  1. npm config set registry https://registry.npm.taobao.org

然后运行以下命令编译自定义主题的文件，只需输入主题的名称和主题颜色代码(十六进制)即可。 这里我们以生成一个orange主题为例

{tip} 这个命令第一次运行时需要较长时间，请耐心等待。如果运行失败，请尝试给vendor目录写权限。

  1. php artisan admin:minify orange --color fbbd08 --publish

上面的命令的意思是生成一个orange主题，颜色代码为#fbbd08，并且生成之后自动发布静态资源。如果编译成功，命令行会输出以下内容

  1. ...
  3.  DONE  Compiled successfully in 48001ms8:24:28 PM
  6.                                               Asset      Size  Chunks
  7.                Chunk Names
  8.                /resources/dist/adminlte/adminlte.js  29.7 KiB       0  [emitted]
  9.                /resources/dist/adminlte/adminlte
  10.            /resources/dist/adminlte/adminlte.js.map  87.8 KiB       0  [emitted]
  11.  [dev]         /resources/dist/adminlte/adminlte
  12.                /resources/dist/dcat/extra/action.js   3.7 KiB       1  [emitted]
  13.                /resources/dist/dcat/extra/action
  14.            /resources/dist/dcat/extra/action.js.map  12.9 KiB       1  [emitted]
  15.  [dev]         /resources/dist/dcat/extra/action
  16.           /resources/dist/dcat/extra/grid-extend.js  4.87 KiB       2  [emitted]
  17.                /resources/dist/dcat/extra/grid-extend
  18.       /resources/dist/dcat/extra/grid-extend.js.map  21.7 KiB       2  [emitted]
  19.  [dev]         /resources/dist/dcat/extra/grid-extend
  20.     /resources/dist/dcat/extra/resource-selector.js   5.8 KiB       3  [emitted]
  21.                /resources/dist/dcat/extra/resource-selector
  22. /resources/dist/dcat/extra/resource-selector.js.map    24 KiB       3  [emitted]
  23.  [dev]         /resources/dist/dcat/extra/resource-selector
  24.                /resources/dist/dcat/extra/upload.js  17.2 KiB       4  [emitted]
  25.                /resources/dist/dcat/extra/upload
  26.            /resources/dist/dcat/extra/upload.js.map  66.8 KiB       4  [emitted]
  27.  [dev]         /resources/dist/dcat/extra/upload
  28.                 /resources/dist/dcat/js/dcat-app.js  88.8 KiB       5  [emitted]
  29.                /resources/dist/dcat/js/dcat-app
  30.             /resources/dist/dcat/js/dcat-app.js.map   164 KiB       5  [emitted]
  31.  [dev]         /resources/dist/dcat/js/dcat-app
  32.         resources/dist/adminlte/adminlte-orange.css   656 KiB       0  [emitted]
  33.         [big]  /resources/dist/adminlte/adminlte
  34.         resources/dist/dcat/css/dcat-app-orange.css    43 KiB       0  [emitted]
  35.                /resources/dist/adminlte/adminlte
  36.       resources/dist/dcat/extra/markdown-orange.css  1.72 KiB       0  [emitted]
  37.                /resources/dist/adminlte/adminlte
  38.           resources/dist/dcat/extra/step-orange.css  8.56 KiB       0  [emitted]
  39.                /resources/dist/adminlte/adminlte
  40.         resources/dist/dcat/extra/upload-orange.css  6.42 KiB       0  [emitted]
  41.                /resources/dist/adminlte/adminlte
  44. Copied Directory [\dcat-admin\resources\dist] To [\public\vendors\dcat-admin]
  45. Publishing complete.
  46. Compiled views cleared!

主题文件编译成功之后，还需要在app/Admin/bootstrap.php中加入以下代码

  1. Dcat\Admin\Color::extend('orange', [
  2.     'primary'        => '#fbbd08',
  3.     'primary-darker' => '#fbbd08',
  4.     'link'           => '#fbbd08',
  5. ]);

最后把你的配置参数admin.layout.color的值设置为orange就行了。

深色模式

{tip} Since v1.5.0

主题与颜色 - 图3

启用切换按钮

通过配置参数 admin.layout.dark_mode_switch 可以启用或禁用深色模式切换开关。开启后会在页面顶部导航栏中增加一个开关按钮，点击可以切换深色和明亮模式，并且会把状态保存在localStorage中。

  1.      'layout' => [
  2.          'dark_mode_switch' => true,
  4.          ...
  5.      ],
  7.      ...

效果如下 主题与颜色 - 图4

默认深色

打开配置文件config/admin.php，写入

  1.      'layout' => [
  2.          'body_class' => 'dark-mode',
  4.          ...
  5.      ],
  7.      ...

菜单样式

{tip} Since v1.7.0

通过配置参数 admin.layout.sidebar_style 可以配置菜单样式（如果配置文件中不存在这个参数则可以手动添加），支持三个值 light、primary、dark，默认为 light

{tip} sidebar_dark参数即将被废弃！sidebar_style参数会覆盖sidebar_dark参数，只有当sidebar_style不存在时sidebar_dark才会生效！！！

  1.      'layout' => [
  2.           // 支持 light、primary、dark
  3.          'sidebar_style' => 'light',
  5.          ...
  6.      ],
  8.      ...

light 效果

主题与颜色 - 图5

primary 效果

主题与颜色 - 图6

主题与颜色 - 图7

菜单布局

{tip} Since v1.7.0

添加 sidebar-separate 到 admin.layout.body_class 参数中即可

  1.      'layout' => [
  2.          'body_class' => 'sidebar-separate',
  4.          ...
  5.      ],
  7.      ...

效果

主题与颜色 - 图8 主题与颜色 - 图9

PHP颜色管理

Dcat Admin内置了颜色管理模块，此功能可以很方便的配合主题切换功能，让页面颜色与主题色相适应！

通过 Dcat\Admin\Admin::color() 这个服务可以很轻松的获取常用颜色（可参考颜色表与样式）。

获取内置颜色

通过Color::get或魔术方法可以获取颜色代码，当通过Color::get获取的颜色不存在时，会返回参数的原始值。

  1. <?php
  2. use Dcat\Admin\Admin;
  4. // get 方法获取颜色
  5. echo Admin::color()->get('primary'); // 输出 #5c6bc6
  8. // 通过魔术方法获取颜色
  9. echo Admin::color()->primary(); // 输出 #5c6bc6

颜色淡化

通过Color::lighten方法或魔术方法可以获取淡化后的颜色的16进制颜色代码。

Color::lighten方法接收两个参数：

  • $name string 颜色别名
  • $amt int 颜色偏差值，值越大颜色越淡
  1. echo Admin::color()->lighten('primary', 10); // 输出 #6675d0
  3. // 也可以这样使用，注意这里的参数要传负数
  4. echo Admin::color()->primary(-10); // 输出 #6675d0

也支持直接传颜色代码

  1. echo Admin::color()->lighten('#5c6bc6', 10); // 输出 #6675d0

颜色深化

通过Color::darken方法或魔术方法可以获取深化后的颜色的16进制颜色代码。

Color::darken方法接收两个参数：

  • $name string 颜色别名
  • $amt int 颜色偏差值，值越大颜色越深
  1. echo Admin::color()->darken('primary', 10); // 输出 #5261bc
  3. // 也可以这样使用
  4. echo Admin::color()->primary(10); // 输出 #5261bc

也支持直接传颜色代码

  1. echo Admin::color()->darken('#5c6bc6', 10); // 输出 #5261bc

颜色透明化

通过Color::alpha方法可以设置颜色的透明度。

Color::alpha方法接收两个参数：

  • $name string 颜色别名
  • $alpha float 透明度，0 ~ 1之间的值，值越小透明度越高
  1. echo Admin::color()->alpha('primary', 0.1); // 输出 rgba(92, 107, 198, 0.1)

也支持直接传颜色代码

  1. echo Admin::color()->alpha('5c6bc6', 0.1); // 输出 rgba(92, 107, 198, 0.1)

获取所有内置颜色

通过Color::all方法可以获取所有内置颜色的16进制代码，此方法返回一个数组

  1. $allColors = Admin::color()->all();

JS颜色管理

JS模块中同样也包含颜色管理功能，通过Dcat.color对象可以像在PHP代码中一样管理颜色。

获取内置颜色

在JS代码中可以通过以下三种方式获取颜色代码

  1. Admin::script(
  2. <<<JS
  3.     // 方式1
  4.     var primary = Dcat.color.primary;
  6.     // 方式2
  7.     var primary = Dcat.color['primary'];
  9.     // 方式3
  10.     var primary = Dcat.color.get('primary');
  12.     console.log(primary);  // 打印 #5c6bc6
  13. JS
  14. );

颜色淡化

通过Dcat.color.lighten方法或魔术方法可以获取淡化后的颜色的16进制颜色代码。

color.lighten方法接收两个参数：

  • name string 颜色别名
  • amt int 颜色偏差值，值越大颜色越淡
  1. Admin::script(
  2.     <<<JS
  3.     var primary = Dcat.color.lighten('primary', 10)
  5.     console.log(primary); // 输出 #6675d0
  6. JS    
  7. );

也支持直接传颜色代码

  1. var primary = Dcat.color.lighten('5c6bc6', 10);
  3. console.log(primary); // 输出 #6675d0

颜色深化

通过Dcat.color.darken方法或魔术方法可以获取深化后的颜色的16进制颜色代码。

color.darken方法接收两个参数：

  • name string 颜色别名
  • amt int 颜色偏差值，值越大颜色越深
  1. Admin::script(
  2.     <<<JS
  3.     var primary = Dcat.color.darken('primary', 10)
  5.     console.log(primary); // 输出 #5261bc
  6. JS    
  7. );

也支持直接传颜色代码

  1. var primary = Dcat.color.darken('5c6bc6', 10)
  3. console.log(primary); // 输出 #5261bc

颜色透明化

通过Dcat.color.alpha方法可以设置颜色的透明度。

color.alpha方法接收两个参数：

  • $name string 颜色别名
  • $alpha float 透明度，0 ~ 1之间的值，值越小透明度越高
  1. Admin::script(
  2.     <<<JS
  3.     var primary = Dcat.color.alpha('primary', 0.1)
  5.     console.log(primary); // 输出 rgba(92, 107, 198, 0.1)
  6. JS    
  7. );

也支持直接传颜色代码

  1. var primary = Dcat.color.alpha('#5c6bc6', 0.1)
  3. console.log(primary); // 输出 rgba(92, 107, 198, 0.1)

获取所有内置颜色

通过Dcat.color.all方法可以获取所有内置颜色的16进制代码，此方法返回一个键值对对象。

  1. var allColors = Dcat.color.all();

颜色表与样式

Dcat Admin前端是采用bootstrap4编写的，因此首先要学习Bootstrap4 颜色(Color)样式的使用，这里不再赘述相关内容。

以下是Dcat Admin中常用颜色样式表，其中以.bg-* 开头的样式是背景色，以.text- 开头的样式是文本颜色

.text-primary .bg-primary primary/indigo
.text-primary-darker indigo-darker 

  1.     <div class="color-section white" style="background: #5b69bc">
  2.         purple
  3.     </div>
  5.     <div class="color-section white" style="background: #7367f0">
  6.         cyan
  7.     </div>
  8.     <div class="color-section white" style="background: #6355ee">
  9.         cyan-darker
  10.     </div>
  12.     <div class="color-section white" style="background: #3085d6">
  13.         <code>.text-info</code> <code>.bg-info</code> blue/info
  14.     </div>
  15.     <div class="color-section white" style="background: #236bb0">
  16.         <code>.text-blue-darker</code> blue-darker
  17.     </div>
  18.     <div class="color-section white" style="background: #007ee5">
  19.         <code>.text-blue-1</code> <code>.bg-blue-1</code> blue1
  20.     </div>
  21.     <div class="color-section white" style="background: #4199de">
  22.         <code>.text-blue-2</code> <code>.bg-blue-2</code> blue2
  23.     </div>
  25.     <div class="color-section white" style="background: #59a9f8">
  26.         <code>.text-custom</code> <code>.bg-custom</code> custom
  27.     </div>
  29.     <div class="color-section white" style="background: #21b978">
  30.         <code>.text-success</code> <code>.bg-success</code> green/success
  31.     </div>
  32.     <div class="color-section white" style="background: #ea5455">
  33.         <code>.text-danger</code> <code>.bg-danger</code> danger/red
  34.     </div>
  35.     <div class="color-section white" style="background: #bd4147">
  36.         <code>.text-danger-darker</code> red-darker
  37.     </div>
  40.     <div class="color-section white" style="background: #dda451">
  41.         <code>.text-warning</code> <code>.bg-warning</code> warning/orange
  42.     </div>
  45.     <div class="color-section white" style="background: #ffcc80">
  46.         <code>.text-orange-1</code> <code>.bg-orange-1</code> orange1
  47.     </div>
  48.     <div class="color-section white" style="background: #F99037">
  49.         <code>.text-orange-2</code> <code>.bg-orange-2</code> orange2
  50.     </div>
  51.     <div class="color-section white" style="background: #edc30e">
  52.         <code>.text-yellow</code> <code>.bg-yellow</code> yellow
  53.     </div>
  55.     <div class="color-section white" style="background: #ff8acc">
  56.         <code>.text-pink</code> <code>.bg-pink</code> pink
  57.     </div>
  60.     <div class="color-section white" style="background: #01847f">
  61.         <code>.text-tear</code> <code>.bg-tear</code> tear
  62.     </div>
  63.     <div class="color-section white" style="background: #00b5b5">
  64.         <code>.text-tear-1</code> <code>.bg-tear-1</code> tear1
  65.     </div>
  68.     <div class="color-section white" style="background: #22292f">
  69.         dark
  70.     </div>
  72.     <div class="color-section white" style="background: #b9c3cd">
  73.         <code>.text-gray</code> <code>.bg-gray</code> gray
  74.     </div>
  75.     <div class="color-section white" style="background: #f7f7f9;color: #666">
  76.         <code>.text-light</code> <code>.bg-light</code> light
  77.     </div>
  78.     <div class="color-section white" style="background: #f6fbff;color: #666">
  79.         <code>.text-dark20</code> <code>.bg-dark20</code> dark20
  80.     </div>
  81.     <div class="color-section white" style="background: #f4f7fa;color: #666">
  82.         <code>.text-dark30</code> <code>.bg-dark30</code> dark30
  83.     </div>
  84.     <div class="color-section white" style="background: #e7eef7;color: #666">
  85.         <code>.text-dark35</code> <code>.bg-dark35</code> dark35
  86.     </div>
  88.     <div class="color-section white" style="background: #ebf0f3;color: #666">
  89.         <code>.text-dark40</code> <code>.bg-dark40</code> dark40
  90.     </div>
  91.     <div class="color-section white" style="background: #d3dde5;color: #666">
  92.         <code>.text-dark50</code> <code>.bg-dark50</code> dark50
  93.     </div>
  94.     <div class="color-section white" style="background: #bacad6">
  95.         <code>.text-dark60</code> <code>.bg-dark60</code> dark60
  96.     </div>
  97.     <div class="color-section white" style="background: #b3b9bf">
  98.         <code>.text-dark70</code> <code>.bg-dark70</code> dark70
  99.     </div>
  100.     <div class="color-section white" style="background: #7c858e">
  101.         <code>.text-dark80</code> <code>.bg-dark80</code> dark80
  102.     </div>
  103.     <div class="color-section white" style="background: #5c7089">
  104.         <code>.text-dark85</code> <code>.bg-dark85</code> dark85
  105.     </div>
  106.     <div class="color-section white" style="background: #252d37">
  107.         dark90
  108.     </div>
  109.     <div class="color-section white" style="background: #414750">
  110.         font字体颜色
  111.     </div>
  112.     <div class="color-section white" style="background: #f1f1f1;color: #666">
  113.         gray-bg
  114.     </div>
  115.     <div class="color-section white" style="background: #ebeff2;color: #666">
  116.         border
  117.     </div>
  118.     <div class="color-section white" style="background: #d9d9d9;color: #666">
  119.         input-border
  120.     </div>
  121. </section>