主题颜色功能

update

resources/assets/dcat/js/dcat-app.js

@@ -23,6 +23,7 @@ import Loading from './extensions/Loading'
 import PreviewImage from './extensions/PreviewImage'
 import AssetsLoader from './extensions/AssetsLoader'
 import Slider from './extensions/Slider'
+import Color from './extensions/Color'
 
 import Menu from './bootstrappers/Menu'
 import Footer from './bootstrappers/Footer'
@@ -50,6 +51,8 @@ function extend (Dcat) {
     new PreviewImage(Dcat);
     // 静态资源加载器
     new AssetsLoader(Dcat);
+    // 颜色管理
+    new Color(Dcat);
 
     // 加载进度条
     Dcat.NP = NProgress;

resources/assets/dcat/js/extensions/Color.js

@@ -0,0 +1,69 @@
+
+export default class Color {
+    constructor(Dcat) {
+        let colors = Dcat.config.colors || {},
+            _this = this;
+
+        // 颜色转亮
+        colors.lighten = _this.lighten.bind(_this);
+
+        // 颜色转暗
+        colors.darken = (color, amt) => {
+            return _this.lighten(color, -amt)
+        };
+
+        // 颜色透明度设置
+        colors.alpha = (color, alpha) => {
+            let results = colors.toRBG(color);
+
+            return `rgba(${results[0]}, ${results[1]}, ${results[2]}, ${alpha})`;
+        };
+
+        // 16进制颜色转化成10进制
+        colors.toRBG = (color, amt) => {
+            if (color[0] === '#') {
+                color = color.slice(1);
+            }
+
+            return _this.toRBG(color, amt);
+        };
+
+        Dcat.color = colors;
+    }
+
+    lighten(color, amt) {
+        let hasPrefix = false;
+
+        if (color[0] === '#') {
+            color = color.slice(1);
+
+            hasPrefix = true;
+        }
+
+        let colors = this.toRBG(color, amt);
+
+        return (hasPrefix ? '#' : '') + (colors[2] | (colors[1] << 8) | (colors[0] << 16)).toString(16);
+    }
+
+    toRBG(color, amt) {
+        let format = (value) => {
+            if (value > 255) {
+                return 255;
+            }
+            if (value < 0) {
+                return 0;
+            }
+
+            return value;
+        };
+
+        amt = amt || 0;
+
+        let num = parseInt(color, 16),
+            red = format((num >> 16) + amt),
+            blue = format(((num >> 8) & 0x00FF) + amt),
+            green = format((num & 0x0000FF) + amt);
+
+        return [red, blue, green]
+    }
+}

resources/assets/dcat/sass/_variables.scss

@@ -1,80 +0,0 @@
-// 自定义颜色
-$custom: #59a9f8;
-
-// 深红
-$red-darker: #bd4147;
-
-
-// 蓝色
-$blue: #3085d6;
-$blue-darker: #236bb0;
-$blue-20: #c3dcf3;
-$blue-30: #b3d2f0;
-$blue-40: #a3c9ed;
-$blue-50: #92bfe9;
-$blue-60: #82b5e6;
-$blue-70: #71ace3;
-$blue-80: #61a2e0;
-$blue-90: #5198dc;
-$blue-95: #408fd9;
-// 渐变蓝色
-$blue-linear-gradient: linear-gradient(118deg, rgba($blue, 1), rgba($blue, 0.7));
-
-
-// 深色
-$dark20: #f6fbff;
-$dark30: #f4f7fa;
-$dark40: #ebf0f3;
-$dark50: #d3dde5;
-$dark60: #bacad6;
-$dark65: #8aa5b9;
-$dark70: #b3b9bf;
-$dark80: #7c858e;
-$dark85: #5c7089;
-$dark90: #252d37;
-
-
-// 主色
-$primary-darker: #6355ee;
-$primary-20: #f7f6fe;
-$primary-30: #e6e4fc;
-$primary-40: #d6d2fb;
-$primary-50: #c5c0f9;
-$primary-60: #b5aef7;
-$primary-70: #a49df5;
-$primary-80: #948bf4;
-$primary-90: #8379f2;
-// 渐变主色
-$primary-linear-gradient: linear-gradient(118deg, rgba($primary, 1), rgba($primary, 0.7));
-
-// 字体颜色
-$font-color: #414750;
-
-// body背景颜色
-//$body-background: #f9fafc;
-$body-background: $dark30;
-
-// 灰背景色
-$gray-background: #f1f1f1;
-
-// 常用阴影颜色
-$shadow: 0 2px 4px 0 rgba(0,0,0,.08);
-$shadow-100: 0 3px 1px -2px rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.05), 0 1px 5px 1px rgba(0,0,0,.05);
-$shadow-200: 0 3px 1px -2px rgba(0,0,0,.1), 0 2px 2px 0 rgba(0,0,0,.1), 0 1px 5px 1px rgba(0,0,0,.1);
-
-// 按钮阴影颜色
-$btn-shadow: $shadow-100;
-$btn-shadow-hover: $shadow-200;
-$btn-group-btn-shadow: 0 2px 0 0 rgba(0,0,0,.08);
-
-// 菜单阴影
-$menu-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
-
-// 常用边框颜色
-$border-color: #eee;
-
-// 表单边框颜色
-$input-border-color: #d9d9d9;
-
-// 常用分割线颜色
-$divider-color: #f4f4f4;

resources/assets/dcat/sass/components/_form.scss

@@ -80,7 +80,7 @@ select.form-control:not([multiple=multiple]) {
   box-shadow: $shadow;
 }
 .select2-container--default .select2-results__option[aria-selected=true] {
-  background-color: $gray-background!important;
+  background-color: $gray-bg!important;
 }
 .select2-container--default .select2-results__option--highlighted[aria-selected] {
   background-color: $dark40!important;

resources/assets/dcat/sass/components/_grid.scss

@@ -43,7 +43,7 @@
 .quick-create {
   td {
     padding-left: 45px;
-    background-color: $gray-background;
+    background-color: $gray-bg;
     vertical-align: middle;
     border-radius: .5rem;
   }

resources/assets/dcat/sass/dcat-app.scss

@@ -7,8 +7,7 @@
 //  Author URL: https://github.com/jqhph
 // ================================================================================================
 
-@import "../../sass/core/variables/variables";
-@import "./variables";
+@import "variables/variables";
 
 // 进度条
 @import "./nprogress/NProgress";
@@ -17,7 +16,7 @@
 @import "./sweetalert/sweetalert2";
 
 html body {
-  background-color: $body-background;
+  background-color: $body-bg;
   color: $font-color;
 }
 

resources/assets/dcat/sass/variables/_colors.scss

@@ -0,0 +1,51 @@
+// 自定义颜色
+$custom: #59a9f8;
+
+$dark: #22292f;
+$white: #fff;
+$white50: hsla(0,0%,100%,.5);
+
+// 淡黄色
+$orange-1: #ffcc80;
+
+// 深红
+$red-darker: #bd4147;
+
+// 深主题色
+$primary-darker: darken($primary, 5%);
+
+// 蓝色
+$blue: #3085d6;
+$blue-darker: #236bb0;
+
+// 其他蓝色
+$blue-1: #007ee5;
+$blue-2: #4199de;
+
+$pink: #ff8acc;
+
+// cyan
+$cyan-darker: #6355ee;
+
+
+// 深色
+$dark20: #f6fbff;
+$dark30: #f4f7fa;
+$dark40: #ebf0f3;
+$dark50: #d3dde5;
+$dark60: #bacad6;
+$dark65: #8aa5b9;
+$dark70: #b3b9bf;
+$dark80: #7c858e;
+$dark85: #5c7089;
+$dark90: #252d37;
+
+// 字体颜色
+$font-color: #414750;
+
+// body背景颜色
+//$body-bg: #f9fafc;
+$body-bg: $dark30;
+
+// 灰背景色
+$gray-bg: #f1f1f1;

resources/assets/dcat/sass/variables/_variables.scss

@@ -0,0 +1,27 @@
+
+// 继承
+@import "../../../sass/core/variables/variables";
+@import "./colors";
+
+
+// 常用阴影颜色
+$shadow: 0 2px 4px 0 rgba(0,0,0,.08);
+$shadow-100: 0 3px 1px -2px rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.05), 0 1px 5px 1px rgba(0,0,0,.05);
+$shadow-200: 0 3px 1px -2px rgba(0,0,0,.1), 0 2px 2px 0 rgba(0,0,0,.1), 0 1px 5px 1px rgba(0,0,0,.1);
+
+// 按钮阴影颜色
+$btn-shadow: $shadow-100;
+$btn-shadow-hover: $shadow-200;
+$btn-group-btn-shadow: 0 2px 0 0 rgba(0,0,0,.08);
+
+// 菜单阴影
+$menu-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
+
+// 常用边框颜色
+$border-color: #eee;
+
+// 表单边框颜色
+$input-border-color: #d9d9d9;
+
+// 常用分割线颜色
+$divider-color: #f4f4f4;

resources/dist/dcat/css/dcat-app.css

@@ -2048,7 +2048,7 @@ table.data-thumb-view.dataTable tbody td {
 
 .grid-column-header a:hover,
 .grid-column-header a.active {
-  color: #6355ee;
+  color: #495abf;
 }
 
 .grid-sort {

resources/dist/dcat/js/dcat-app.js

@@ -654,10 +654,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _extensions_PreviewImage__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./extensions/PreviewImage */ "./resources/assets/dcat/js/extensions/PreviewImage.js");
 /* harmony import */ var _extensions_AssetsLoader__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./extensions/AssetsLoader */ "./resources/assets/dcat/js/extensions/AssetsLoader.js");
 /* harmony import */ var _extensions_Slider__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./extensions/Slider */ "./resources/assets/dcat/js/extensions/Slider.js");
-/* harmony import */ var _bootstrappers_Menu__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./bootstrappers/Menu */ "./resources/assets/dcat/js/bootstrappers/Menu.js");
-/* harmony import */ var _bootstrappers_Footer__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./bootstrappers/Footer */ "./resources/assets/dcat/js/bootstrappers/Footer.js");
-/* harmony import */ var _bootstrappers_Pjax__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./bootstrappers/Pjax */ "./resources/assets/dcat/js/bootstrappers/Pjax.js");
-/* harmony import */ var _bootstrappers_DataActions__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./bootstrappers/DataActions */ "./resources/assets/dcat/js/bootstrappers/DataActions.js");
+/* harmony import */ var _extensions_Color__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./extensions/Color */ "./resources/assets/dcat/js/extensions/Color.js");
+/* harmony import */ var _bootstrappers_Menu__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./bootstrappers/Menu */ "./resources/assets/dcat/js/bootstrappers/Menu.js");
+/* harmony import */ var _bootstrappers_Footer__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./bootstrappers/Footer */ "./resources/assets/dcat/js/bootstrappers/Footer.js");
+/* harmony import */ var _bootstrappers_Pjax__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./bootstrappers/Pjax */ "./resources/assets/dcat/js/bootstrappers/Pjax.js");
+/* harmony import */ var _bootstrappers_DataActions__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./bootstrappers/DataActions */ "./resources/assets/dcat/js/bootstrappers/DataActions.js");
 /*=========================================================================================
   File Name: app.js
   Description: Dcat Admin JS脚本.
@@ -684,6 +685,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 var win = window,
     $ = jQuery; // 扩展Dcat对象
 
@@ -703,7 +705,9 @@ function extend(Dcat) {
 
   new _extensions_PreviewImage__WEBPACK_IMPORTED_MODULE_11__["default"](Dcat); // 静态资源加载器
 
-  new _extensions_AssetsLoader__WEBPACK_IMPORTED_MODULE_12__["default"](Dcat); // 加载进度条
+  new _extensions_AssetsLoader__WEBPACK_IMPORTED_MODULE_12__["default"](Dcat); // 颜色管理
+
+  new _extensions_Color__WEBPACK_IMPORTED_MODULE_14__["default"](Dcat); // 加载进度条
 
   Dcat.NP = _nprogress_NProgress_min__WEBPACK_IMPORTED_MODULE_1___default.a; // 行选择器
 
@@ -749,16 +753,16 @@ function listen(Dcat) {
     }); //////////////////////////////////////////////////////////
     // 菜单点击选中效果
 
-    new _bootstrappers_Menu__WEBPACK_IMPORTED_MODULE_14__["default"](Dcat); // 返回顶部按钮
+    new _bootstrappers_Menu__WEBPACK_IMPORTED_MODULE_15__["default"](Dcat); // 返回顶部按钮
 
-    new _bootstrappers_Footer__WEBPACK_IMPORTED_MODULE_15__["default"](Dcat);
+    new _bootstrappers_Footer__WEBPACK_IMPORTED_MODULE_16__["default"](Dcat);
   }); // 每个请求都初始化
 
   Dcat.bootingEveryRequest(function () {
     // pjax初始化功能
-    new _bootstrappers_Pjax__WEBPACK_IMPORTED_MODULE_16__["default"](Dcat); // data-action 动作绑定(包括删除、批量删除等操作)
+    new _bootstrappers_Pjax__WEBPACK_IMPORTED_MODULE_17__["default"](Dcat); // data-action 动作绑定(包括删除、批量删除等操作)
 
-    new _bootstrappers_DataActions__WEBPACK_IMPORTED_MODULE_17__["default"](Dcat);
+    new _bootstrappers_DataActions__WEBPACK_IMPORTED_MODULE_18__["default"](Dcat);
   });
 } // 开始初始化
 
@@ -987,6 +991,98 @@ var AssetsLoader = /*#__PURE__*/function () {
 
 
 
+/***/ }),
+
+/***/ "./resources/assets/dcat/js/extensions/Color.js":
+/*!******************************************************!*\
+  !*** ./resources/assets/dcat/js/extensions/Color.js ***!
+  \******************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Color; });
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+var Color = /*#__PURE__*/function () {
+  function Color(Dcat) {
+    _classCallCheck(this, Color);
+
+    var colors = Dcat.config.colors || {},
+        _this = this; // 颜色转亮
+
+
+    colors.lighten = _this.lighten.bind(_this); // 颜色转暗
+
+    colors.darken = function (color, amt) {
+      return _this.lighten(color, -amt);
+    }; // 颜色透明度设置
+
+
+    colors.alpha = function (color, alpha) {
+      var results = colors.toRBG(color);
+      return "rgba(".concat(results[0], ", ").concat(results[1], ", ").concat(results[2], ", ").concat(alpha, ")");
+    }; // 16进制颜色转化成10进制
+
+
+    colors.toRBG = function (color, amt) {
+      if (color[0] === '#') {
+        color = color.slice(1);
+      }
+
+      return _this.toRBG(color, amt);
+    };
+
+    Dcat.color = colors;
+  }
+
+  _createClass(Color, [{
+    key: "lighten",
+    value: function lighten(color, amt) {
+      var hasPrefix = false;
+
+      if (color[0] === '#') {
+        color = color.slice(1);
+        hasPrefix = true;
+      }
+
+      var colors = this.toRBG(color, amt);
+      return (hasPrefix ? '#' : '') + (colors[2] | colors[1] << 8 | colors[0] << 16).toString(16);
+    }
+  }, {
+    key: "toRBG",
+    value: function toRBG(color, amt) {
+      var format = function format(value) {
+        if (value > 255) {
+          return 255;
+        }
+
+        if (value < 0) {
+          return 0;
+        }
+
+        return value;
+      };
+
+      amt = amt || 0;
+      var num = parseInt(color, 16),
+          red = format((num >> 16) + amt),
+          blue = format((num >> 8 & 0x00FF) + amt),
+          green = format((num & 0x0000FF) + amt);
+      return [red, blue, green];
+    }
+  }]);
+
+  return Color;
+}();
+
+
+
 /***/ }),
 
 /***/ "./resources/assets/dcat/js/extensions/Debounce.js":

resources/views/form/done-step.blade.php

@@ -5,7 +5,7 @@
         padding: 24px 0 8px;
     }
     .la-done-step .st-icon {
-        color: {{ \Dcat\Admin\Widgets\Color::success() }};
+        color: {{ Dcat\Admin\Admin::color()->success() }};
         font-size: 72px;
         text-align:center;
     }

resources/views/grid/selector.blade.php

@@ -35,7 +35,7 @@
         text-decoration: none;
     }
     .grid-selector .select-options a.active {
-        color: {{ \Dcat\Admin\Widgets\Color::primaryDark() }};
+        color: {{ \Dcat\Admin\Admin::color()->primaryDarker() }};
         font-weight: bold;
     }
     .grid-selector li .add {
@@ -48,7 +48,7 @@
         visibility: hidden;
     }
     .grid-selector ul:hover .clear {
-        color: {{ \Dcat\Admin\Widgets\Color::dangerDark() }};
+        color: {{ \Dcat\Admin\Admin::color()->redDarker() }};
         visibility: visible;
     }
 </style>

src/Admin.php

@@ -76,6 +76,14 @@ class Admin
         return sprintf('Dcat Admin <comment>version</comment> <info>%s</info>', static::VERSION);
     }
 
+    /**
+     * @return Color
+     */
+    public static function color()
+    {
+        return app('admin.color');
+    }
+
     /**
      * Left sider-bar menu.
      *

src/AdminServiceProvider.php

@@ -207,6 +207,7 @@ class AdminServiceProvider extends ServiceProvider
     protected function registerServices()
     {
         $this->app->singleton('admin.assets', Assets::class);
+        $this->app->singleton('admin.color', Color::class);
         $this->app->singleton('admin.sections', SectionManager::class);
         $this->app->singleton('admin.navbar', Navbar::class);
         $this->app->singleton('admin.menu', Menu::class);

src/Color.php

@@ -0,0 +1,287 @@
+<?php
+
+namespace Dcat\Admin;
+
+use Dcat\Admin\Support\Helper;
+
+/**
+ * Class Color
+ *
+ * @package Dcat\Admin
+ *
+ * @method string primary(int $amt = 0)
+ * @method string primaryDarker(int $amt = 0)
+ * @method string link(int $amt = 0)
+ * @method string info(int $amt = 0)
+ * @method string success(int $amt = 0)
+ * @method string danger(int $amt = 0)
+ * @method string warning(int $amt = 0)
+ * @method string indigo(int $amt = 0)
+ * @method string blue(int $amt = 0)
+ * @method string red(int $amt = 0)
+ * @method string orange(int $amt = 0)
+ * @method string green(int $amt = 0)
+ * @method string cyan(int $amt = 0)
+ * @method string purple(int $amt = 0)
+ * @method string custom(int $amt = 0)
+ * @method string pink(int $amt = 0)
+ * @method string dark(int $amt = 0)
+ * @method string white(int $amt = 0)
+ * @method string white50(int $amt = 0)
+ * @method string blue1(int $amt = 0)
+ * @method string blue2(int $amt = 0)
+ * @method string orange1(int $amt = 0)
+ * @method string indigoDarker(int $amt = 0)
+ * @method string redDarker(int $amt = 0)
+ * @method string blueDarker(int $amt = 0)
+ * @method string cyanDarker(int $amt = 0)
+ * @method string dark20(int $amt = 0)
+ * @method string dark30(int $amt = 0)
+ * @method string dark40(int $amt = 0)
+ * @method string dark50(int $amt = 0)
+ * @method string dark60(int $amt = 0)
+ * @method string dark70(int $amt = 0)
+ * @method string dark80(int $amt = 0)
+ * @method string dark90(int $amt = 0)
+ * @method string dark90half(int $amt = 0)
+ * @method string font(int $amt = 0)
+ * @method string grayBg(int $amt = 0)
+ */
+class Color
+{
+    /**
+     * 颜色
+     *
+     * @var array
+     */
+    protected static $colors = [
+        'cyan' => [
+            'css' => [
+
+            ],
+            'colors' => [
+                'primary'        => 'cyan',
+                'primary-darker' => 'cyan-darker',
+                'link'           => 'cyan-darker',
+            ],
+        ],
+        'indigo' => [
+            'css' => [
+
+            ],
+            'colors' => [
+                'primary'        => 'indigo',
+                'primary-darker' => 'indigo-darker',
+                'link'           => 'indigo-darker',
+            ],
+        ],
+    ];
+
+    /**
+     * 默认颜色
+     *
+     * @var array
+     */
+    protected static $default = [
+        'info'    => 'blue',
+        'success' => 'green',
+        'danger'  => 'red',
+        'warning' => 'orange',
+        'indigo'  => '#5c6bc6',
+        'blue'    => '#3085d6',
+        'red'     => '#ea5455',
+        'orange'  => '#ff9f43',
+        'green'   => '#21b978',
+        'cyan'    => '#7367f0',
+        'purple'  => '#5b69bc',
+        'custom'  => '#59a9f8',
+        'pink'    => '#ff8acc',
+        'dark'    => '#22292f',
+        'white'   => '#fff',
+        'white50' => 'hsla(0,0%,100%,.5)',
+
+         // 其他蓝色
+        'blue-1' => '#007ee5',
+        'blue-2' => '#4199de',
+
+        // 淡黄色
+        'orange-1' => '#ffcc80',
+
+        'indigo-darker' => '#495abf',
+        'red-darker'    => '#bd4147',
+        'blue-darker'   => '#236bb0',
+        'cyan-darker'   => '#6355ee',
+
+        // 深色
+        'dark20' => '#f6fbff',
+        'dark30' => '#f4f7fa',
+        'dark40' => '#ebf0f3',
+        'dark50' => '#d3dde5',
+        'dark60' => '#bacad6',
+        'dark70' => '#b3b9bf',
+        'dark80' => '#7c858e',
+        'dark85' => '#5c7089',
+        'dark90' => '#252d37',
+
+        // 文本通用颜色
+        'font' => '#414750',
+
+        // 灰色背景
+        'gray-bg' => '#f1f1f1',
+    ];
+
+    /**
+     * 主题名称.
+     *
+     * @var string
+     */
+    protected $name;
+
+    /**
+     * @var array
+     */
+    protected $currentColors = [];
+
+    /**
+     * Color constructor.
+     *
+     * @param string $name
+     */
+    public function __construct($name = null)
+    {
+        $this->name = ($name ?: config('admin.layout.color')) ?: 'indigo';
+
+        $this->currentColors = array_merge(
+            static::$default,
+            static::$colors[$this->name]['colors'] ?? []
+        );
+    }
+
+    /**
+     * @return string
+     */
+    public function name()
+    {
+        return $this->name;
+    }
+
+    /**
+     * 获取css文件路径.
+     *
+     * @return array
+     */
+    public function css()
+    {
+        return static::$colors[$this->name]['css'];
+    }
+
+    /**
+     * 获取颜色.
+     *
+     * @param array  $colorName
+     * @param string $default
+     *
+     * @return string
+     */
+    public function get(string $colorName, string $default = null)
+    {
+        $result = $this->currentColors[$colorName] ?? $default;
+
+        if ($result && ! empty($this->currentColors[$result])) {
+            return $this->get($result);
+        }
+
+        return $result;
+    }
+
+    /**
+     * 获取所有颜色.
+     *
+     * @return array
+     */
+    public function all()
+    {
+        return $this->currentColors;
+    }
+
+    /**
+     * 颜色转亮.
+     *
+     * @param string $color
+     * @param int    $amt
+     *
+     * @return string
+     */
+    public function lighten(string $color, int $amt)
+    {
+        return Helper::colorLighten(
+            $this->get($color) ?: $color,
+            $amt
+        );
+    }
+
+    /**
+     * 颜色转暗.
+     *
+     * @param string $color
+     * @param int    $amt
+     *
+     * @return string
+     */
+    public function darken(string $color, int $amt)
+    {
+        return Helper::colorDarken(
+            $this->get($color) ?: $color,
+            $amt
+        );
+    }
+
+    /**
+     * 颜色透明度转化.
+     *
+     * @param string       $color
+     * @param float|string $alpha
+     *
+     * @return string
+     */
+    public function alpha(string $color, $alpha)
+    {
+        return Helper::colorAlpha(
+            $this->get($color) ?: $color,
+            $alpha
+        );
+    }
+
+    /**
+     * 获取颜色.
+     *
+     * @param string $method
+     * @param array $arguments
+     *
+     * @return string
+     */
+    public function __call(string $method, array $arguments = [])
+    {
+        return $this->darken(
+            Helper::slug($method),
+            $arguments[0] ?? 0
+        );
+    }
+
+    /**
+     * 扩展颜色.
+     *
+     * @param string       $name
+     * @param string|array $skinPath
+     * @param array        $colors
+     *
+     * @return void
+     */
+    public static function extend(string $name, $skinPath, array $colors)
+    {
+        static::$colors[$name] = [
+            'css'    => array_filter((array) $skinPath),
+            'colors' => $colors,
+        ];
+    }
+}

src/Form/Field/SelectResource.php

@@ -5,7 +5,6 @@ namespace Dcat\Admin\Form\Field;
 use Dcat\Admin\Admin;
 use Dcat\Admin\Form\Field;
 use Dcat\Admin\Support\Helper;
-use Dcat\Admin\Widgets\Color;
 use Illuminate\Contracts\Support\Arrayable;
 
 class SelectResource extends Field
@@ -194,10 +193,10 @@ JS
     protected function setupStyle()
     {
         if (! $this->maxItem || $this->maxItem > 1) {
-            $primayDark = Color::primarydark();
+            $primayDarker = Admin::color()->primaryDarker();
 
             Admin::style(
-                ".select-resource .nav li a{padding:8px 10px;font-size:13px;font-weight:bold;color:{$primayDark}}.select-resource .nav li a.red{cursor:pointer}.select-resource .nav-stacked>li{border-bottom:1px solid #eee;background: #fff;}.select-resource .nav {border: 1px solid #eee;margin-bottom:5px;}"
+                ".select-resource .nav li a{padding:8px 10px;font-size:13px;font-weight:bold;color:{$primayDarker}}.select-resource .nav li a.red{cursor:pointer}.select-resource .nav-stacked>li{border-bottom:1px solid #eee;background: #fff;}.select-resource .nav {border: 1px solid #eee;margin-bottom:5px;}"
             );
         }
     }

src/Form/Field/SwitchField.php

@@ -4,43 +4,42 @@ namespace Dcat\Admin\Form\Field;
 
 use Dcat\Admin\Admin;
 use Dcat\Admin\Form\Field;
-use Dcat\Admin\Widgets\Color;
 
 class SwitchField extends Field
 {
     public function primary()
     {
-        return $this->color(Color::primary());
+        return $this->color(Admin::color()->primary());
     }
 
     public function green()
     {
-        return $this->color(Color::success());
+        return $this->color(Admin::color()->success());
     }
 
     public function custom()
     {
-        return $this->color(Color::custom());
+        return $this->color(Admin::color()->custom());
     }
 
     public function yellow()
     {
-        return $this->color(Color::warning());
+        return $this->color(Admin::color()->warning());
     }
 
     public function red()
     {
-        return $this->color(Color::danger());
+        return $this->color(Admin::color()->danger());
     }
 
     public function purple()
     {
-        return $this->color(Color::purple());
+        return $this->color(Admin::color()->purple());
     }
 
     public function blue()
     {
-        return $this->color(Color::blue());
+        return $this->color(Admin::color()->blue());
     }
 
     /**

src/Grid/Displayers/DropdownActions.php

@@ -8,7 +8,6 @@ use Dcat\Admin\Grid\Actions\Edit;
 use Dcat\Admin\Grid\Actions\QuickEdit;
 use Dcat\Admin\Grid\Actions\Show;
 use Dcat\Admin\Support\Helper;
-use Dcat\Admin\Widgets\Color;
 
 class DropdownActions extends Actions
 {
@@ -39,7 +38,7 @@ class DropdownActions extends Actions
      */
     protected function addScript()
     {
-        $background = Color::dark20();
+        $background = Admin::color()->dark20();
         $checkbox = ".{$this->grid->getRowName()}-checkbox";
 
         $script = <<<JS

src/Grid/Displayers/SwitchDisplay.php

@@ -3,7 +3,6 @@
 namespace Dcat\Admin\Grid\Displayers;
 
 use Dcat\Admin\Admin;
-use Dcat\Admin\Widgets\Color;
 
 class SwitchDisplay extends AbstractDisplayer
 {
@@ -14,32 +13,32 @@ class SwitchDisplay extends AbstractDisplayer
 
     public function green()
     {
-        $this->color = Color::success();
+        $this->color = Admin::color()->success();
     }
 
     public function custom()
     {
-        $this->color = Color::custom();
+        $this->color = Admin::color()->custom();
     }
 
     public function yellow()
     {
-        $this->color = Color::warning();
+        $this->color = Admin::color()->warning();
     }
 
     public function red()
     {
-        $this->color = Color::danger();
+        $this->color = Admin::color()->danger();
     }
 
     public function purple()
     {
-        $this->color = Color::purple();
+        $this->color = Admin::color()->purple();
     }
 
     public function blue()
     {
-        $this->color = Color::blue();
+        $this->color = Admin::color()->blue();
     }
 
     /**
@@ -73,7 +72,7 @@ class SwitchDisplay extends AbstractDisplayer
         $name = $this->getElementName();
         $key = $this->row->{$this->grid->getKeyName()};
         $checked = $this->value ? 'checked' : '';
-        $color = $this->color ?: Color::primary();
+        $color = $this->color ?: Admin::color()->primary();
 
         return <<<EOF
 <input class="grid-switch-{$this->grid->getName()}" data-size="small" name="{$name}" data-key="$key" {$checked} type="checkbox" data-color="{$color}"/>

src/Grid/Tools/Paginator.php

@@ -2,8 +2,8 @@
 
 namespace Dcat\Admin\Grid\Tools;
 
+use Dcat\Admin\Admin;
 use Dcat\Admin\Grid;
-use Dcat\Admin\Widgets\Color;
 use Illuminate\Contracts\Support\Renderable;
 use Illuminate\Pagination\LengthAwarePaginator;
 
@@ -86,7 +86,7 @@ class Paginator implements Renderable
             return [$key => "<b>$parameter</b>"];
         });
 
-        $color = Color::dark80();
+        $color = Admin::color()->dark80();
 
         return "<span class='d-none d-sm-inline' style=\"line-height:33px;color:{$color}\">".trans('admin.pagination.range', $parameters->all()).'</span>';
     }

src/Grid/Tools/RowSelector.php

@@ -4,7 +4,6 @@ namespace Dcat\Admin\Grid\Tools;
 
 use Dcat\Admin\Admin;
 use Dcat\Admin\Grid;
-use Dcat\Admin\Widgets\Color;
 
 class RowSelector
 {
@@ -76,7 +75,7 @@ EOT;
     protected function setupScript()
     {
         $clickable = $this->rowClickable ? 'true' : 'false';
-        $background = $this->background ?: Color::dark20();
+        $background = $this->background ?: Admin::color()->dark20();
 
         Admin::script(
             <<<JS

src/Support/Helper.php

@@ -368,4 +368,95 @@ class Helper
             }
         }
     }
+
+    /**
+     * 颜色转亮.
+     *
+     * @param string $color
+     * @param int    $amt
+     *
+     * @return string
+     */
+    public static function colorLighten(string $color, int $amt)
+    {
+        if (! $amt) {
+            return $color;
+        }
+
+        $hasPrefix = false;
+
+        if (strpos($color, '#') === 0) {
+            $color = mb_substr($color, 1);
+
+            $hasPrefix = true;
+        }
+
+        [$red, $blue, $green] = static::colorToRBG($color, $amt);
+
+        return ($hasPrefix ? '#' : '').dechex($green + ($blue << 8) + ($red << 16));
+    }
+
+    /**
+     * 颜色转暗.
+     *
+     * @param string $color
+     * @param int    $amt
+     *
+     * @return string
+     */
+    public static function colorDarken(string $color, int $amt)
+    {
+        return static::colorLighten($color, -$amt);
+    }
+
+    /**
+     * 颜色透明度.
+     *
+     * @param string       $color
+     * @param float|string $alpha
+     *
+     * @return string
+     */
+    public static function colorAlpha(string $color, $alpha)
+    {
+        if ($alpha >= 1) {
+            return $color;
+        }
+
+        if (strpos($color, '#') === 0) {
+            $color = mb_substr($color, 1);
+        }
+
+        [$red, $blue, $green] = static::colorToRBG($color);
+
+        return "rgba($red, $blue, $green, $alpha)";
+    }
+
+    /**
+     * @param string $color
+     * @param int    $amt
+     *
+     * @return array
+     */
+    public static function colorToRBG(string $color, int $amt = 0)
+    {
+        $format = function ($value) {
+            if ($value > 255) {
+                return 255;
+            }
+            if ($value < 0) {
+                return 0;
+            }
+
+            return $value;
+        };
+
+        $num = hexdec($color);
+
+        $red = $format(($num >> 16) + $amt);
+        $blue = $format((($num >> 8) & 0x00FF) + $amt);
+        $green = $format(($num & 0x0000FF) + $amt);
+
+        return [$red, $blue, $green];
+    }
 }

src/Widgets/Color.php

@@ -5,126 +5,8 @@ namespace Dcat\Admin\Widgets;
 use Dcat\Admin\Support\Helper;
 use Illuminate\Support\Arr;
 
-/**
- * @method static string font(string $default = null)
- * @method static string black(string $default = null)
- * @method static string white(string $default = null)
- * @method static string white50(string $default = null)
- * @method static string danger(string $default = null)
- * @method static string dangerDark(string $default = null)
- * @method static string success(string $default = null)
- * @method static string warning(string $default = null)
- * @method static string info(string $default = null)
- * @method static string primary(string $default = null)
- * @method static string custom(string $default = null)
- * @method static string blue(string $default = null)
- * @method static string tear(string $default = null)
- * @method static string inverse(string $default = null)
- * @method static string purple(string $default = null)
- * @method static string purpleDark(string $default = null)
- * @method static string orangeLight(string $default = null)
- * @method static string orange(string $default = null)
- * @method static string pink(string $default = null)
- * @method static string primaryDark(string $default = null)
- * @method static string primaryLight(string $default = null)
- * @method static string primary90(string $default = null)
- * @method static string primary80(string $default = null)
- * @method static string primary70(string $default = null)
- * @method static string primary60(string $default = null)
- * @method static string primary50(string $default = null)
- * @method static string primary40(string $default = null)
- * @method static string primary30(string $default = null)
- * @method static string primary20(string $default = null)
- * @method static string primary10(string $default = null)
- * @method static string dark20(string $default = null)
- * @method static string dark30(string $default = null)
- * @method static string dark40(string $default = null)
- * @method static string dark50(string $default = null)
- * @method static string dark60(string $default = null)
- * @method static string dark70(string $default = null)
- * @method static string dark80(string $default = null)
- * @method static string dark90(string $default = null)
- * @method static string dark90half(string $default = null)
- */
 class Color
 {
-    public static $theme = [
-        'font'          => '#414750',
-        'dark'          => '#22292f',
-        'white'         => '#fff',
-        'white50'       => 'hsla(0,0%,100%,.5)',
-        'danger'        => '#ff5b5b',
-        'danger-dark'   => '#bd4147',
-        'success'       => '#21b978',
-        'warning'       => '#ffcc80',
-        'info'          => '#03a9f4',
-        'custom'        => '#59a9f8',
-        'blue'          => '#007ee5',
-        'tear'          => '#26A69A',
-        'inverse'       => '#505b6b',
-        'purple'        => '#5b69bc',
-        'purple-dark'   => '#5b69bc',
-        'orange-light'  => '#ffcc80',
-        'orange'        => '#F99037',
-        'pink'          => '#ff8acc',
-        'primary'       => '#4199de',
-        'primary-dark'  => '#297ec0',
-        'primary-light' => '#e8f5fb',
-        'primary90'     => '#52a2e1',
-        'primary80'     => '#62abe4',
-        'primary70'     => '#73b4e7',
-        'primary60'     => '#84bdea',
-        'primary50'     => '#95c6ed',
-        'primary40'     => '#c7e1f5',
-        'primary30'     => '#d7eaf8',
-        'primary20'     => '#e8f3fb',
-        'primary10'     => '#f9fcfe',
-        'dark20'        => '#f6fbff',
-        'dark30'        => '#f4f7fa',
-        'dark40'        => '#ebf0f3',
-        'dark50'        => '#d3dde5',
-        'dark60'        => '#bacad6',
-        'dark70'        => '#b3b9bf',
-        'dark80'        => '#7c858e',
-        'dark90'        => '#252d37',
-        'dark90half'    => '#5c7089',
-    ];
-
-    public static $default = [
-        'green' => [
-            'rgba(33,185,120, 1)',
-            'rgba(33,185,120, 0.1)',
-        ],
-        'primary' => [
-            'rgba(64,153,222, 1)',
-            'rgba(64,153,222, 0.1)',
-        ],
-        'purple' => [
-            'rgba(91, 105, 188, 1)',
-            'rgba(91,105,188,0.1)',
-        ],
-
-        'red' => [
-            'rgba(255,91,91, 1)',
-            'rgba(255,91,91,0.1)',
-        ],
-
-        'custom' => [
-            'rgba(89,169,248, 1)',
-            'rgba(89,169,248,0.1)',
-        ],
-
-        'tear' => [
-            'rgba(38,166,154, 1)',
-            'rgba(38,166,154,0.1)',
-        ],
-
-        'blue' => [
-            'rgba(0,126,229, 1)',
-            'rgba(0,126,229,0.1)',
-        ],
-    ];
-
     public static $chartTheme = [
         'blue' => [
             'rgba(64,153,222,.5)', // primary
@@ -166,16 +48,4 @@ class Color
             '#9C6ADE', // another purple
         ],
     ];
-
-    public static function get($key, $default = null)
-    {
-        return Arr::get(static::$theme, $key, $default);
-    }
-
-    public static function __callStatic($method, $arguments)
-    {
-        $key = Helper::slug($method);
-
-        return static::$theme[$key] ?? ($arguments[0] ?? null);
-    }
 }

src/Widgets/Sparkline/Line.php

@@ -2,7 +2,8 @@
 
 namespace Dcat\Admin\Widgets\Sparkline;
 
-use Dcat\Admin\Widgets\Color;
+use Dcat\Admin\Admin;
+use Dcat\Admin\Support\Helper;
 
 /**
  * @see https://omnipotent.net/jquery.sparkline
@@ -26,53 +27,53 @@ class Line extends Sparkline
 
     public function fillDefaultColor()
     {
-        $this->fillColors(Color::$default['primary']);
+        $this->fillColors(Admin::color()->primary());
     }
 
     public function primary(bool $opaque = false)
     {
-        return $this->fillColors(Color::$default['primary'], $opaque);
+        return $this->fillColors(Admin::color()->primary(), $opaque);
     }
 
     public function green(bool $opaque = false)
     {
-        return $this->fillColors(Color::$default['green'], $opaque);
+        return $this->fillColors(Admin::color()->green(), $opaque);
     }
 
     public function purple(bool $opaque = false)
     {
-        return $this->fillColors(Color::$default['purple'], $opaque);
+        return $this->fillColors(Admin::color()->purple(), $opaque);
     }
 
     public function red(bool $opaque = false)
     {
-        return $this->fillColors(Color::$default['red'], $opaque);
+        return $this->fillColors(Admin::color()->red(), $opaque);
     }
 
     public function custom(bool $opaque = false)
     {
-        return $this->fillColors(Color::$default['custom'], $opaque);
+        return $this->fillColors(Admin::color()->custom(), $opaque);
     }
 
-    public function tear(bool $opaque = false)
+    public function pink(bool $opaque = false)
     {
-        return $this->fillColors(Color::$default['tear'], $opaque);
+        return $this->fillColors(Admin::color()->pink(), $opaque);
     }
 
     public function blue(bool $opaque = false)
     {
-        return $this->fillColors(Color::$default['blue'], $opaque);
+        return $this->fillColors(Admin::color()->blue1(), $opaque);
     }
 
-    protected function fillColors($color, bool $opaque = false)
+    protected function fillColors(string $color, bool $opaque = false)
     {
-        $this->lineColor($color[0])
-            ->fillColor($opaque ? $color[0] : $color[1])
+        $this->lineColor($color)
+            ->fillColor($opaque ? $color : Helper::colorAlpha($color, 0.1))
             ->highlightSpotColor('#fff')
-            ->highlightLineColor($color[0])
-            ->minSpotColor($color[0])
-            ->maxSpotColor($color[0])
-            ->spotColor($color[0]);
+            ->highlightLineColor($color)
+            ->minSpotColor($color)
+            ->maxSpotColor($color)
+            ->spotColor($color);
 
         if (! isset($this->options['lineWidth'])) {
             $this->lineWidth(2);

src/Widgets/Tooltip.php

@@ -65,22 +65,22 @@ class Tooltip extends Widget
 
     public function green()
     {
-        return $this->background(Color::success());
+        return $this->background(Admin::color()->success());
     }
 
     public function blue()
     {
-        return $this->background(Color::blue());
+        return $this->background(Admin::color()->blue());
     }
 
     public function red()
     {
-        return $this->background(Color::danger());
+        return $this->background(Admin::color()->danger());
     }
 
     public function purple()
     {
-        return $this->background(Color::purple());
+        return $this->background(Admin::color()->purple());
     }
 
     public function left()
@@ -132,7 +132,7 @@ class Tooltip extends Widget
         }
         $this->built = true;
 
-        $background = $this->background ?: Color::primary();
+        $background = $this->background ?: Admin::color()->primary();
 
         $this->defaultHtmlAttribute('class', 'tooltip-inner');
         $this->style('background:'.$background, true);