diff --git a/gulpfile.js b/gulpfile.js
index 20419bae..c45a3bdf 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -18,6 +18,8 @@ var version  = require('./package.json').version;
 var srcPath  = 'resources/assets/src';
 var distPath = 'resources/assets/dist';
 
+var skinColor = ['blue', 'yellow', 'green', 'purple', 'red', 'square'];
+
 var vendorScripts = [
     'jquery/dist/jquery.min.js',
     'bootstrap/dist/js/bootstrap.min.js',
@@ -39,18 +41,16 @@ var vendorStyles = [
     'admin-lte/plugins/datatables/dataTables.bootstrap.css',
     'bootstrap-fileinput/css/fileinput.min.css',
     'font-awesome/css/font-awesome.min.css',
-    'icheck/skins/square/blue.css',
     'toastr/build/toastr.min.css',
     'sweetalert2/dist/sweetalert2.min.css',
-];
+].concat(skinColor.map((color) => `icheck/skins/square/${color}.css`));
 
 var styleReplacements = [
-    ['blue.png', '"../images/blue.png"'],
-    ['blue@2x.png', '"../images/blue@2x.png"'],
     ['../img/loading.gif', '"../images/loading.gif"'],
     ['../img/loading-sm.gif', '"../images/loading-sm.gif"'],
     [/@import url\((.*)italic\);/g, ''],
-];
+].concat(skinColor.map((color) => [`${color}.png`, `"../images/${color}.png"`]))
+.concat(skinColor.map((color) => [`${color}@2x.png`, `"../images/${color}@2x.png"`]));
 
 var scriptReplacements = [
     ['$.AdminLTE.layout.activate(),', '']
@@ -63,12 +63,11 @@ var fonts = [
 ];
 
 var images = [
-    'icheck/skins/square/blue.png',
-    'icheck/skins/square/blue@2x.png',
     'resources/assets/src/images/**',
     'bootstrap-fileinput/img/loading.gif',
     'bootstrap-fileinput/img/loading-sm.gif',
-];
+].concat(skinColor.map((color) => `icheck/skins/square/${color}.png`))
+.concat(skinColor.map((color) => `icheck/skins/square/${color}@2x.png`));
 
 // aka. `yarn run build`
 gulp.task('default', ['build']);
@@ -152,9 +151,9 @@ gulp.task('clean', () => {
 gulp.task('zip', () => {
     clearCache();
 
-    console.info("============================================================================");
-    console.info("= Don't forget to compile Sass & ES2015 files before publishing a release! =");
-    console.info("============================================================================");
+    console.info('============================================================================');
+    console.info('= Don\'t forget to compile Sass & ES2015 files before publishing a release! =');
+    console.info('============================================================================');
 
     let zipPath = `blessing-skin-server-v${version}.zip`;
 
diff --git a/resources/assets/src/js/common/layout.js b/resources/assets/src/js/common/layout.js
index 2891e920..9cfd499a 100644
--- a/resources/assets/src/js/common/layout.js
+++ b/resources/assets/src/js/common/layout.js
@@ -19,7 +19,7 @@ $(document).ready(() => {
     $('li.active > ul').show();
 
     $('input').iCheck({
-        checkboxClass: 'icheckbox_square-blue'
+        checkboxClass: `icheckbox_square${getColorScheme()}`
     });
 
     swal.setDefaults({
@@ -34,3 +34,10 @@ function activateLayout() {
 
     $.AdminLTE.layout.activate();
 }
+
+function getColorScheme() {
+    const color = /skin-(\w+)(?:-light)? sidebar-mini/.exec(
+        document.getElementsByTagName('body')[0].className
+    )[1];
+    return color === 'black' ? '' : `-${color}`;
+}