主题与颜色
<h1>主题与颜色</h1>
<h3>切换主题</h3>
<p><code>Dcat Admin</code>支持主题切换功能，目前内置了四种主题色：<code>indigo</code>、<code>blue</code>、<code>blue-light</code>、<code>green</code>，可通过配置参数<code>admin.layout.color</code>进行切换。</p>
<p>打开配置文件<code>config/admin.php</code></p>
<pre><code class="language-php"> 'layout' =&gt; [
'color' =&gt; 'blue',
...
],
...</code></pre>
<p>部分主题色预览</p>
<p><a href="{{public}}/assets/img/screenshots/users-blue-dark.png" target="_blank">
<img src="{{public}}/assets/img/screenshots/users-blue-dark.png" style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="100%">
</a>
<a href="{{public}}/assets/img/screenshots/users-green.png" target="_blank">
<img src="{{public}}/assets/img/screenshots/users-green.png" style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="100%">
</a></p>
<p><a name="custom"></a></p>
<h3>自定义主题配色</h3>
<p>> {tip} 需要注意的是，如果自定义了主题之后，每次更新新版本，都需要重新编译一次你的自定义主题！！！</p>
<p>开发者可以通过这个功能随意添加自己想要的主题配色，在使用这个功能之前需要先安装<a href="http://nodejs.cn/">NodeJs</a>，没安装的同学前往<a href="http://nodejs.cn/"><a href="http://nodejs.cn/">http://nodejs.cn/</a></a>下载安装即可。</p>
<p>安装完<code>NodeJs</code>之后可打开命令行运行<code>npm -v</code>测试一下是否安装成功。</p>
<pre><code class="language-bash">npm -v</code></pre>
<p>如果正常返回版本号，则说明已安装成功，同时建议使用淘宝镜像</p>
<pre><code class="language-bash">npm config set registry https://registry.npm.taobao.org</code></pre>
<p>然后运行以下命令编译自定义主题的文件，只需输入主题的名称和主题颜色代码(<code>十六进制</code>)即可。
这里我们以生成一个<code>orange</code>主题为例</p>
<p>> {tip} 这个命令第一次运行时需要较长时间，请耐心等待。如果运行失败，请尝试给<code>vendor</code>目录写权限。</p>
<pre><code class="language-bash">php artisan admin:minify orange --color fbbd08 --publish</code></pre>
<p>上面的命令的意思是生成一个<code>orange</code>主题，颜色代码为<code>#fbbd08</code>，并且生成之后自动发布静态资源。如果编译成功，命令行会输出以下内容</p>
<pre><code class="language-bash">...
DONE Compiled successfully in 48001ms8:24:28 PM
Asset Size Chunks
Chunk Names
/resources/dist/adminlte/adminlte.js 29.7 KiB 0 [emitted]
/resources/dist/adminlte/adminlte
/resources/dist/adminlte/adminlte.js.map 87.8 KiB 0 [emitted]
[dev] /resources/dist/adminlte/adminlte
/resources/dist/dcat/extra/action.js 3.7 KiB 1 [emitted]
/resources/dist/dcat/extra/action
/resources/dist/dcat/extra/action.js.map 12.9 KiB 1 [emitted]
[dev] /resources/dist/dcat/extra/action
/resources/dist/dcat/extra/grid-extend.js 4.87 KiB 2 [emitted]
/resources/dist/dcat/extra/grid-extend
/resources/dist/dcat/extra/grid-extend.js.map 21.7 KiB 2 [emitted]
[dev] /resources/dist/dcat/extra/grid-extend
/resources/dist/dcat/extra/resource-selector.js 5.8 KiB 3 [emitted]
/resources/dist/dcat/extra/resource-selector
/resources/dist/dcat/extra/resource-selector.js.map 24 KiB 3 [emitted]
[dev] /resources/dist/dcat/extra/resource-selector
/resources/dist/dcat/extra/upload.js 17.2 KiB 4 [emitted]
/resources/dist/dcat/extra/upload
/resources/dist/dcat/extra/upload.js.map 66.8 KiB 4 [emitted]
[dev] /resources/dist/dcat/extra/upload
/resources/dist/dcat/js/dcat-app.js 88.8 KiB 5 [emitted]
/resources/dist/dcat/js/dcat-app
/resources/dist/dcat/js/dcat-app.js.map 164 KiB 5 [emitted]
[dev] /resources/dist/dcat/js/dcat-app
resources/dist/adminlte/adminlte-orange.css 656 KiB 0 [emitted]
[big] /resources/dist/adminlte/adminlte
resources/dist/dcat/css/dcat-app-orange.css 43 KiB 0 [emitted]
/resources/dist/adminlte/adminlte
resources/dist/dcat/extra/markdown-orange.css 1.72 KiB 0 [emitted]
/resources/dist/adminlte/adminlte
resources/dist/dcat/extra/step-orange.css 8.56 KiB 0 [emitted]
/resources/dist/adminlte/adminlte
resources/dist/dcat/extra/upload-orange.css 6.42 KiB 0 [emitted]
/resources/dist/adminlte/adminlte
Copied Directory [\dcat-admin\resources\dist] To [\public\vendors\dcat-admin]
Publishing complete.
Compiled views cleared!</code></pre>
<p>主题文件编译成功之后，还需要在<code>app/Admin/bootstrap.php</code>中加入以下代码</p>
<pre><code class="language-php">Dcat\Admin\Color::extend('orange', [
'primary' =&gt; '#fbbd08',
'primary-darker' =&gt; '#fbbd08',
'link' =&gt; '#fbbd08',
]);</code></pre>
<p>最后把你的配置参数<code>admin.layout.color</code>的值设置为<code>orange</code>就行了。</p>
<p><a name="darkmode"></a></p>
<h3>深色模式</h3>
<p><img src="{{public}}/assets/img/screenshots/users-dark.png" alt="" /></p>
<h4>启用切换按钮</h4>
<p>通过配置参数 <code>admin.layout.dark_mode_switch</code> 可以启用或禁用深色模式切换开关。开启后会在页面顶部导航栏中增加一个开关按钮，点击可以切换深色和明亮模式，并且会把状态保存在<code>localStorage</code>中。</p>
<pre><code class="language-php"> 'layout' =&gt; [
'dark_mode_switch' =&gt; true,
...
],
...</code></pre>
<p>效果如下
<img src="{{public}}/assets/img/screenshots/dark-switch.gif" alt="" /></p>
<h4>默认深色</h4>
<p>打开配置文件<code>config/admin.php</code>，写入</p>
<pre><code class="language-php"> 'layout' =&gt; [
'body_class' =&gt; 'dark-mode',
...
],
...</code></pre>
<p><a name="sidebar"></a></p>
<h3>菜单样式</h3>
<p>通过配置参数 <code>admin.layout.sidebar_style</code> 可以配置菜单样式（如果配置文件中不存在这个参数则可以手动添加），支持三个值 <code>light</code>、<code>primary</code>、<code>dark</code>，默认为 <code>light</code></p>
<p>> {tip} <code>sidebar_dark</code>参数即将被废弃！<code>sidebar_style</code>参数会覆盖<code>sidebar_dark</code>参数，只有当<code>sidebar_style</code>不存在时<code>sidebar_dark</code>才会生效！！！</p>
<pre><code class="language-php"> 'layout' =&gt; [
// 支持 light、primary、dark
'sidebar_style' =&gt; 'light',
...
],
...</code></pre>
<p><code>light</code> 效果</p>
<p><img src="{{public}}/assets/img/users.jpg" alt="" /></p>
<p><code>primary</code> 效果</p>
<p><img src="{{public}}/assets/img/users-menu-primary.jpg" alt="" /></p>
<p><img src="{{public}}/assets/img/users-green-menu-primary.jpg" alt="" /></p>
<h3>菜单布局</h3>
<h4>顶部横向 (Horizontal)</h4>
<p>设置配置参数 <code>admin.layout.horizontal_menu</code> 的值为 <code>true</code> 开启此功能，效果如下</p>
<p><img src="https://cdn.learnku.com/uploads/images/202102/20/38389/SpmXMujJ3D.png!large" alt="" /></p>
<h4>sidebar-separate</h4>
<p>添加 <code>sidebar-separate</code> 到 <code>admin.layout.body_class</code> 参数中</p>
<pre><code class="language-php"> 'layout' =&gt; [
'body_class' =&gt; ['sidebar-separate'],
...
],
...
</code></pre>
<p>效果</p>
<p><img src="{{public}}/assets/img/users-2.jpg" alt="" />
<img src="{{public}}/assets/img/users-dark-2.jpg" alt="" /></p>
<p><a name="color"></a></p>
<h3>PHP颜色管理</h3>
<p><code>Dcat Admin</code>内置了颜色管理模块，此功能可以很方便的配合主题切换功能，让页面颜色与主题色相适应！</p>
<p>通过 <code>Dcat\Admin\Admin::color()</code> 这个服务可以很轻松的获取常用颜色（可参考<a href="theme.md#颜色表与样式">颜色表与样式</a>）。</p>
<h4>获取内置颜色</h4>
<p>通过<code>Color::get</code>或魔术方法可以获取颜色代码，当通过<code>Color::get</code>获取的颜色不存在时，会返回参数的原始值。</p>
<pre><code class="language-php">&lt;?php
use Dcat\Admin\Admin;
// get 方法获取颜色
echo Admin::color()-&gt;get('primary'); // 输出 #5c6bc6
// 通过魔术方法获取颜色
echo Admin::color()-&gt;primary(); // 输出 #5c6bc6</code></pre>
<h4>颜色淡化</h4>
<p>通过<code>Color::lighten</code>方法或魔术方法可以获取淡化后的颜色的16进制颜色代码。</p>
<p><code>Color::lighten</code>方法接收两个参数：</p>
<ul>
<li><code>$name</code> <code>string</code> 颜色别名</li>
<li><code>$amt</code> <code>int</code> 颜色偏差值，值越大颜色越<code>淡</code></li>
</ul>
<pre><code class="language-php">echo Admin::color()-&gt;lighten('primary', 10); // 输出 #6675d0
// 也可以这样使用，注意这里的参数要传负数
echo Admin::color()-&gt;primary(-10); // 输出 #6675d0</code></pre>
<p>也支持直接传颜色代码</p>
<pre><code class="language-php">echo Admin::color()-&gt;lighten('#5c6bc6', 10); // 输出 #6675d0</code></pre>
<h4>颜色深化</h4>
<p>通过<code>Color::darken</code>方法或魔术方法可以获取深化后的颜色的16进制颜色代码。</p>
<p><code>Color::darken</code>方法接收两个参数：</p>
<ul>
<li><code>$name</code> <code>string</code> 颜色别名</li>
<li><code>$amt</code> <code>int</code> 颜色偏差值，值越大颜色越<code>深</code></li>
</ul>
<pre><code class="language-php">echo Admin::color()-&gt;darken('primary', 10); // 输出 #5261bc
// 也可以这样使用
echo Admin::color()-&gt;primary(10); // 输出 #5261bc</code></pre>
<p>也支持直接传颜色代码</p>
<pre><code class="language-php">echo Admin::color()-&gt;darken('#5c6bc6', 10); // 输出 #5261bc</code></pre>
<h4>颜色透明化</h4>
<p>通过<code>Color::alpha</code>方法可以设置颜色的透明度。</p>
<p><code>Color::alpha</code>方法接收两个参数：</p>
<ul>
<li><code>$name</code> <code>string</code> 颜色别名</li>
<li><code>$alpha</code> <code>float</code> 透明度，<code>0 ~ 1</code>之间的值，值越小透明度越高</li>
</ul>
<pre><code class="language-php">echo Admin::color()-&gt;alpha('primary', 0.1); // 输出 rgba(92, 107, 198, 0.1)</code></pre>
<p>也支持直接传颜色代码</p>
<pre><code class="language-php">echo Admin::color()-&gt;alpha('5c6bc6', 0.1); // 输出 rgba(92, 107, 198, 0.1)</code></pre>
<h4>获取所有内置颜色</h4>
<p>通过<code>Color::all</code>方法可以获取所有内置颜色的16进制代码，此方法返回一个数组</p>
<pre><code class="language-php">$allColors = Admin::color()-&gt;all();</code></pre>
<h3>JS颜色管理</h3>
<p><code>JS</code>模块中同样也包含颜色管理功能，通过<code>Dcat.color</code>对象可以像在PHP代码中一样管理颜色。</p>
<h4>获取内置颜色</h4>
<p>在<code>JS</code>代码中可以通过以下三种方式获取颜色代码</p>
<pre><code class="language-php">Admin::script(
&lt;&lt;&lt;JS
// 方式1
var primary = Dcat.color.primary;
// 方式2
var primary = Dcat.color['primary'];
// 方式3
var primary = Dcat.color.get('primary');
console.log(primary); // 打印 #5c6bc6
JS
);</code></pre>
<h4>颜色淡化</h4>
<p>通过<code>Dcat.color.lighten</code>方法或魔术方法可以获取淡化后的颜色的16进制颜色代码。</p>
<p><code>color.lighten</code>方法接收两个参数：</p>
<ul>
<li><code>name</code> <code>string</code> 颜色别名</li>
<li><code>amt</code> <code>int</code> 颜色偏差值，值越大颜色越<code>淡</code></li>
</ul>
<pre><code class="language-php">Admin::script(
&lt;&lt;&lt;JS
var primary = Dcat.color.lighten('primary', 10)
console.log(primary); // 输出 #6675d0
JS
);</code></pre>
<p>也支持直接传颜色代码</p>
<pre><code class="language-js">var primary = Dcat.color.lighten('5c6bc6', 10);
console.log(primary); // 输出 #6675d0</code></pre>
<h4>颜色深化</h4>
<p>通过<code>Dcat.color.darken</code>方法或魔术方法可以获取深化后的颜色的16进制颜色代码。</p>
<p><code>color.darken</code>方法接收两个参数：</p>
<ul>
<li><code>name</code> <code>string</code> 颜色别名</li>
<li><code>amt</code> <code>int</code> 颜色偏差值，值越大颜色越<code>深</code></li>
</ul>
<pre><code class="language-php">Admin::script(
&lt;&lt;&lt;JS
var primary = Dcat.color.darken('primary', 10)
console.log(primary); // 输出 #5261bc
JS
);</code></pre>
<p>也支持直接传颜色代码</p>
<pre><code class="language-php">var primary = Dcat.color.darken('5c6bc6', 10)
console.log(primary); // 输出 #5261bc</code></pre>
<h4>颜色透明化</h4>
<p>通过<code>Dcat.color.alpha</code>方法可以设置颜色的透明度。</p>
<p><code>color.alpha</code>方法接收两个参数：</p>
<ul>
<li><code>$name</code> <code>string</code> 颜色别名</li>
<li><code>$alpha</code> <code>float</code> 透明度，<code>0 ~ 1</code>之间的值，值越小透明度越高</li>
</ul>
<pre><code class="language-php">Admin::script(
&lt;&lt;&lt;JS
var primary = Dcat.color.alpha('primary', 0.1)
console.log(primary); // 输出 rgba(92, 107, 198, 0.1)
JS
);</code></pre>
<p>也支持直接传颜色代码</p>
<pre><code class="language-php">var primary = Dcat.color.alpha('#5c6bc6', 0.1)
console.log(primary); // 输出 rgba(92, 107, 198, 0.1)</code></pre>
<h4>获取所有内置颜色</h4>
<p>通过<code>Dcat.color.all</code>方法可以获取所有内置颜色的16进制代码，此方法返回一个键值对对象。</p>
<pre><code class="language-js">var allColors = Dcat.color.all();</code></pre>
<p><a name="颜色表与样式"></a></p>
<h3>颜色表与样式</h3>
<p><code>Dcat Admin</code>前端是采用<code>bootstrap4</code>编写的，因此首先要学习<a href="https://getbootstrap.net/docs/utilities/colors/">Bootstrap4 颜色(Color)样式</a>的使用，这里不再赘述相关内容。</p>
<p>以下是<code>Dcat Admin</code>中常用颜色样式表，其中以<code>.bg-*</code> 开头的样式是背景色，以<code>.text-</code> 开头的样式是文本颜色</p>
<p><style>
.color-sections {</p>
<pre><code>}
.color-section {
width: 600px;
height: 60px;
line-height: 60px;
text-align: center;
vertical-align: middle;
/*display: inline-block;*/
margin-bottom: 5px;
}
.white {
color: #fff;
}</code></pre>
<p></style>
<section class="container color-sections" style="min-height: 500px">
<div class="color-section white" style="background: #5c6bc6">
<code>.text-primary</code> <code>.bg-primary</code> primary/indigo
</div>
<div class="color-section white" style="background: #495abf">
<code>.text-primary-darker</code> indigo-darker
</div></p>
<pre><code> &lt;div class=&quot;color-section white&quot; style=&quot;background: #5b69bc&quot;&gt;
purple
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #7367f0&quot;&gt;
cyan
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #6355ee&quot;&gt;
cyan-darker
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #3085d6&quot;&gt;
&lt;code&gt;.text-info&lt;/code&gt; &lt;code&gt;.bg-info&lt;/code&gt; blue/info
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #236bb0&quot;&gt;
&lt;code&gt;.text-blue-darker&lt;/code&gt; blue-darker
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #007ee5&quot;&gt;
&lt;code&gt;.text-blue-1&lt;/code&gt; &lt;code&gt;.bg-blue-1&lt;/code&gt; blue1
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #4199de&quot;&gt;
&lt;code&gt;.text-blue-2&lt;/code&gt; &lt;code&gt;.bg-blue-2&lt;/code&gt; blue2
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #59a9f8&quot;&gt;
&lt;code&gt;.text-custom&lt;/code&gt; &lt;code&gt;.bg-custom&lt;/code&gt; custom
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #21b978&quot;&gt;
&lt;code&gt;.text-success&lt;/code&gt; &lt;code&gt;.bg-success&lt;/code&gt; green/success
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #ea5455&quot;&gt;
&lt;code&gt;.text-danger&lt;/code&gt; &lt;code&gt;.bg-danger&lt;/code&gt; danger/red
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #bd4147&quot;&gt;
&lt;code&gt;.text-danger-darker&lt;/code&gt; red-darker
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #dda451&quot;&gt;
&lt;code&gt;.text-warning&lt;/code&gt; &lt;code&gt;.bg-warning&lt;/code&gt; warning/orange
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #ffcc80&quot;&gt;
&lt;code&gt;.text-orange-1&lt;/code&gt; &lt;code&gt;.bg-orange-1&lt;/code&gt; orange1
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #F99037&quot;&gt;
&lt;code&gt;.text-orange-2&lt;/code&gt; &lt;code&gt;.bg-orange-2&lt;/code&gt; orange2
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #edc30e&quot;&gt;
&lt;code&gt;.text-yellow&lt;/code&gt; &lt;code&gt;.bg-yellow&lt;/code&gt; yellow
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #ff8acc&quot;&gt;
&lt;code&gt;.text-pink&lt;/code&gt; &lt;code&gt;.bg-pink&lt;/code&gt; pink
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #01847f&quot;&gt;
&lt;code&gt;.text-tear&lt;/code&gt; &lt;code&gt;.bg-tear&lt;/code&gt; tear
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #00b5b5&quot;&gt;
&lt;code&gt;.text-tear-1&lt;/code&gt; &lt;code&gt;.bg-tear-1&lt;/code&gt; tear1
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #22292f&quot;&gt;
dark
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #b9c3cd&quot;&gt;
&lt;code&gt;.text-gray&lt;/code&gt; &lt;code&gt;.bg-gray&lt;/code&gt; gray
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #f7f7f9;color: #666&quot;&gt;
&lt;code&gt;.text-light&lt;/code&gt; &lt;code&gt;.bg-light&lt;/code&gt; light
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #f6fbff;color: #666&quot;&gt;
&lt;code&gt;.text-dark20&lt;/code&gt; &lt;code&gt;.bg-dark20&lt;/code&gt; dark20
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #f4f7fa;color: #666&quot;&gt;
&lt;code&gt;.text-dark30&lt;/code&gt; &lt;code&gt;.bg-dark30&lt;/code&gt; dark30
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #e7eef7;color: #666&quot;&gt;
&lt;code&gt;.text-dark35&lt;/code&gt; &lt;code&gt;.bg-dark35&lt;/code&gt; dark35
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #ebf0f3;color: #666&quot;&gt;
&lt;code&gt;.text-dark40&lt;/code&gt; &lt;code&gt;.bg-dark40&lt;/code&gt; dark40
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #d3dde5;color: #666&quot;&gt;
&lt;code&gt;.text-dark50&lt;/code&gt; &lt;code&gt;.bg-dark50&lt;/code&gt; dark50
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #bacad6&quot;&gt;
&lt;code&gt;.text-dark60&lt;/code&gt; &lt;code&gt;.bg-dark60&lt;/code&gt; dark60
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #b3b9bf&quot;&gt;
&lt;code&gt;.text-dark70&lt;/code&gt; &lt;code&gt;.bg-dark70&lt;/code&gt; dark70
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #7c858e&quot;&gt;
&lt;code&gt;.text-dark80&lt;/code&gt; &lt;code&gt;.bg-dark80&lt;/code&gt; dark80
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #5c7089&quot;&gt;
&lt;code&gt;.text-dark85&lt;/code&gt; &lt;code&gt;.bg-dark85&lt;/code&gt; dark85
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #252d37&quot;&gt;
dark90
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #414750&quot;&gt;
font字体颜色
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #f1f1f1;color: #666&quot;&gt;
gray-bg
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #ebeff2;color: #666&quot;&gt;
border
&lt;/div&gt;
&lt;div class=&quot;color-section white&quot; style=&quot;background: #d9d9d9;color: #666&quot;&gt;
input-border
&lt;/div&gt;
&lt;/section&gt;</code></pre>