diff --git a/resources/assets/src/components/admin/Customization.vue b/resources/assets/src/components/admin/Customization.vue
new file mode 100644
index 00000000..0365e6c7
--- /dev/null
+++ b/resources/assets/src/components/admin/Customization.vue
@@ -0,0 +1,64 @@
+<template>
+    <div class="box box-primary">
+        <div class="box-header with-border">
+            <h3 class="box-title" v-t="'admin.change-color.title'"></h3>
+        </div>
+        <div class="box-body no-padding">
+            <table class="table table-striped bring-up nth-2-center">
+                <tbody>
+                    <template v-for="color in colors">
+                        <tr v-for="innerColor in [color, `${color}-light`]" :key="innerColor">
+                            <td v-t="`admin.colors.${innerColor}`"></td>
+                            <td>
+                                <a
+                                    href="#"
+                                    @click="preview(innerColor)"
+                                    :class="`btn bg-${color} btn-xs`"
+                                >
+                                    <i class="far fa-eye"></i>
+                                </a>
+                            </td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
+        </div>
+        <div class="box-footer">
+            <button @click="submit" class="btn btn-primary" v-t="'general.submit'"></button>
+        </div>
+    </div>
+</template>
+
+<script>
+import toastr from 'toastr';
+
+export default {
+    name: 'Customization',
+    data() {
+        return {
+            colors: [
+                'blue',
+                'yellow',
+                'green',
+                'purple',
+                'red',
+                'black',
+            ],
+            currentSkin: window.currentSkin
+        };
+    },
+    methods: {
+        preview(color) {
+            document.body.classList.replace(this.currentSkin, `skin-${color}`);
+            this.currentSkin = `skin-${color}`;
+        },
+        async submit() {
+            const { msg } = await this.$http.post(
+                '/admin/customize?action=color',
+                { color_scheme: this.currentSkin }
+            );
+            toastr.success(msg);
+        }
+    }
+};
+</script>
diff --git a/resources/assets/src/components/route.js b/resources/assets/src/components/route.js
index b1725f61..f0d13272 100644
--- a/resources/assets/src/components/route.js
+++ b/resources/assets/src/components/route.js
@@ -24,4 +24,9 @@ export default [
         component: () => import('./admin/players'),
         el: '.content'
     },
+    {
+        path: 'admin/customize',
+        component: () => import('./admin/customization'),
+        el: '#change-color'
+    },
 ];
diff --git a/resources/assets/src/js/polyfill.js b/resources/assets/src/js/polyfill.js
index 0084ec90..e36d3be0 100644
--- a/resources/assets/src/js/polyfill.js
+++ b/resources/assets/src/js/polyfill.js
@@ -1,6 +1,13 @@
+/* eslint-disable no-var */
 import 'core-js/fn/array/includes';
 import 'core-js/fn/array/find';
 import 'es6-promise/auto';
 import 'whatwg-fetch';
 
 Number.parseInt = parseInt;
+
+document.body.classList.replace = function (oldToken, newToken) {
+    var list = document.body.classList;
+    list.remove(oldToken);
+    list.add(newToken);
+};
diff --git a/resources/assets/tests/components/admin/Customization.test.js b/resources/assets/tests/components/admin/Customization.test.js
new file mode 100644
index 00000000..4fa3f787
--- /dev/null
+++ b/resources/assets/tests/components/admin/Customization.test.js
@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+import Customization from '@/components/admin/Customization';
+
+window.currentSkin = 'skin-blue';
+
+test('preview color', () => {
+    document.body.classList.add('skin-blue');
+    const wrapper = mount(Customization);
+    wrapper.findAll('a').at(2).trigger('click');
+    expect(document.body.classList.contains('skin-blue')).toBeFalse();
+    expect(document.body.classList.contains('skin-yellow')).toBeTrue();
+});
+
+test('submit color', () => {
+    Vue.prototype.$http.post.mockResolvedValue({ errno: 0, msg: '' });
+    const wrapper = mount(Customization);
+    wrapper.findAll('a').at(4).trigger('click');
+    wrapper.find('button').trigger('click');
+    expect(Vue.prototype.$http.post).toBeCalledWith(
+        '/admin/customize?action=color',
+        { color_scheme: 'skin-green' }
+    );
+});
diff --git a/resources/lang/en/front-end.yml b/resources/lang/en/front-end.yml
index cfef95bc..dc6296f1 100644
--- a/resources/lang/en/front-end.yml
+++ b/resources/lang/en/front-end.yml
@@ -198,6 +198,22 @@ admin:
   preparing: Preparing
   downloadCompleted: Update package download completed.
   extracting: Extracting update package..
+  change-color:
+    title: Change theme color
+    success: Theme color updated.
+  colors:
+    blue: Blue (Default)
+    blue-light: Blue Light
+    yellow: Yellow
+    yellow-light: Yellow Light
+    green: Green
+    green-light: Green Light
+    purple: Purple
+    purple-light: Purple Light
+    red: Red
+    red-light: Red Light
+    black: Black
+    black-light: Black Light
 
 general:
   skin: Skin
diff --git a/resources/lang/zh_CN/front-end.yml b/resources/lang/zh_CN/front-end.yml
index 578d0c6f..3c10ff19 100644
--- a/resources/lang/zh_CN/front-end.yml
+++ b/resources/lang/zh_CN/front-end.yml
@@ -195,6 +195,22 @@ admin:
   preparing: 正在准备
   downloadCompleted: 更新包下载完成
   extracting: 正在解压更新包
+  change-color:
+    title: 更改配色
+    success: 修改配色成功
+  colors:
+    blue: 蓝色主题（默认）
+    blue-light: 蓝色主题 - 白色侧边栏
+    yellow: 黄色主题
+    yellow-light: 黄色主题 - 白色侧边栏
+    green: 绿色主题
+    green-light: 绿色主题 - 白色侧边栏
+    purple: 基佬紫
+    purple-light: 紫色主题 - 白色侧边栏
+    red: 喜庆红（笑）
+    red-light: 红色主题 - 白色侧边栏
+    black: 高端黑
+    black-light: 黑色主题 - 白色侧边栏
 
 general:
   skin: 皮肤
diff --git a/resources/views/admin/customize.tpl b/resources/views/admin/customize.tpl
index 30c194ad..6fa18572 100644
--- a/resources/views/admin/customize.tpl
+++ b/resources/views/admin/customize.tpl
@@ -3,7 +3,7 @@
 @section('title', trans('general.customize'))
 
 @section('style')
-<link rel="stylesheet" href="{{ assets('css/skins/_all-skins.min.css') }}">
+<link rel="stylesheet" href="{{ webpack_assets('skins/_all-skins.min.css') }}">
 @endsection
 
 @section('content')
@@ -22,29 +22,7 @@
 
         <div class="row">
             <div class="col-md-3">
-                <div class="box box-primary">
-                    <div class="box-header with-border">
-                        <h3 class="box-title">@lang('admin.customize.change-color.title')</h3>
-                    </div><!-- /.box-header -->
-                    <div class="box-body no-padding">
-                        <table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
-                            <tbody>
-                                @foreach(['blue', 'yellow', 'green', 'purple', 'red', 'black'] as $color)
-                                    @foreach([$color, "$color-light"] as $innerColor)
-                                    <tr>
-                                        <td>@lang("admin.customize.colors.$innerColor")</td>
-                                        <td><a href="#" data-skin="skin-{{ $innerColor }}" class="btn bg-{{ $color }} btn-xs"><i class="far fa-eye"></i></a></td>
-                                    </tr>
-                                    @endforeach
-                                @endforeach
-                            </tbody>
-                        </table>
-                    </div><!-- /.box-body -->
-                    <div class="box-footer">
-                        <button id="color-submit" class="btn btn-primary">@lang('general.submit')</button>
-                    </div>
-                </div><!-- /.box -->
-
+                <div id="change-color"></div><!-- /.box -->
             </div>
 
             <div class="col-md-9">
@@ -58,8 +36,8 @@
     </section><!-- /.content -->
 </div><!-- /.content-wrapper -->
 
-<script type="text/javascript">
-var current_skin = "{{ option('color_scheme') }}";
+<script>
+var currentSkin = "{{ option('color_scheme') }}";
 </script>
 
 @endsection
diff --git a/webpack.config.js b/webpack.config.js
index b70da043..9e4a9410 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -114,6 +114,11 @@ const config = {
                 to: 'skins',
                 flatten: true
             },
+            {
+                from: 'node_modules/admin-lte/dist/css/skins/_all-skins.min.css',
+                to: 'skins',
+                flatten: true
+            },
             'node_modules/chart.js/dist/Chart.min.js',
         ]),
         new BundleAnalyzerPlugin({