diff --git a/public/js/language.all.js b/public/js/language.all.js
index f42a52788..a28fb8198 100644
--- a/public/js/language.all.js
+++ b/public/js/language.all.js
@@ -453,5 +453,6 @@
         {"CN": "开启您的 Dootask 团队协作","EN": "Open your DOOTASK team collaboration","TC": "開啟您的 Dootask 團隊協作","KM": "បើកកិច្ចសហប្រតិបត្តិការក្រុមរបស់អ្នក","TH": "เปิดการทำงานร่วมกันของทีม DOOTASK ของคุณ","KO": "Dootask 팀 공동 작업을 엽니 다","JA": "あなたのdootaskチームコラボレーションを開く"},
         {"CN": "联系我们","EN": "Contact us","TC": "聯繫我們","KM": "ទាក់ទង​មក​ពួក​យើង","TH": "ติดต่อเรา","KO": "문의하기","JA": "お問い合わせ"},
         {"CN": "桂公网安备 31011002000058号 桂ICP备12020087号-3","EN": "Gui Gong Net Anni 31011002000058 Gui ICP No. 12020087 -3","TC": "桂公網安備 31011002000058號 桂ICP備12020087號-3","KM": "Gui Gong Net Net Ann 31011002000058 GUI ICP លេខ 12020087 -3","TH": "Gui Gong Net Anni 31011002000058 GUI ICP No. 12020087 -3","KO": "Gui Gong Net Anni 31011002000058 GUI ICP No. 12020087 -3","JA": "GUI GONG NET ANNI 31011002000058 GUI ICP No. 12020087 -3"},
+        {"CN": "主题皮肤","EN": "Topic skin","TC": "主題皮膚","KM": "ស្បែកប្រធានបទ","TH": "ผิวหนัง","KO": "주제 피부","JA": "トピックスキン"},
     ]
 })(window)
diff --git a/resources/assets/js/pages/login.vue b/resources/assets/js/pages/login.vue
index 1f04887d1..6de65593e 100644
--- a/resources/assets/js/pages/login.vue
+++ b/resources/assets/js/pages/login.vue
@@ -178,13 +178,12 @@ export default {
     },
     mounted() {
         this.getDemoAccount();
+        this.getLoginType()
         //
         if (!this.isElectron && this.cacheServerUrl) {
             this.onServerUrlClear();
         }
-        this.$route.query.type == "reg"
-            ? (this.loginType = "reg")
-            : (this.loginType = "login");
+       
     },
     deactivated() {
         this.loginJump = false;
@@ -205,9 +204,7 @@ export default {
     },
     watch: {
         $route(to, from) {
-            this.$route.query.type == "reg"
-                ? (this.loginType = "reg")
-                : (this.loginType = "login");
+           this.getLoginType();
         },
         loginType(val) {
             if (val == "reg") {
@@ -245,7 +242,11 @@ export default {
                     this.needInvite = false;
                 });
         },
-
+        getLoginType(){
+                this.$route.query.type == "reg"
+                ? (this.loginType = "reg")
+                : (this.loginType = "login");
+        },
         forgotPassword() {
             $A.modalWarning("请联系管理员！");
         },
diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index 4135b7553..500dc0b5c 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -1,6 +1,6 @@
 <template>
-    <div v-show="userId > 0" class="page-manage">
-        <div class="manage-box-menu" :class="{'show768-menu': show768Menu}">
+    <div v-show="userId > 0" class="page-manage" :class="skinType">
+        <div class="manage-box-menu" :class="{'show768-menu': show768Menu,}">
             <Dropdown
                 class="manage-box-dropdown"
                 trigger="click"
@@ -32,6 +32,17 @@
                         <DropdownMenu slot="list">
                             <Dropdown-item v-for="(item, key) in languageList" :key="key" :name="key" :selected="getLanguage() === key">{{item}}</Dropdown-item>
                         </DropdownMenu>
+                    </Dropdown>
+                     <Dropdown placement="right-start" @on-click="setSkin">
+                        <DropdownItem divided>
+                            <div class="mannage-menu-skin">
+                                {{$L('主题皮肤')}}
+                                <Icon type="ios-arrow-forward"></Icon>
+                            </div>
+                        </DropdownItem>
+                        <DropdownMenu slot="list" >
+                            <Dropdown-item v-for="(item,key) in skinOptionsList" :key="key" :name="key" :selected="skinType === item.key">{{item.lable}}</Dropdown-item>
+                        </DropdownMenu>
                     </Dropdown>
                     <DropdownItem divided name="signout" style="color:#f40">{{$L('退出登录')}}</DropdownItem>
                 </DropdownMenu>
@@ -93,10 +104,10 @@
             <Button class="manage-box-new" type="primary" icon="md-add" @click="onAddShow">{{$L('新建项目')}}</Button>
         </div>
 
-        <div class="manage-box-main">
-            <keep-alive>
-                <router-view class="manage-box-view overlay"></router-view>
-            </keep-alive>
+        <div class="manage-box-main" >
+                <keep-alive>
+                    <router-view class="manage-box-view overlay"></router-view>
+                </keep-alive>
         </div>
 
         <!--新建项目-->
@@ -187,7 +198,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
+import { mapState, mapGetters,mapMutations} from 'vuex'
 import TaskDetail from "./manage/components/TaskDetail";
 import ProjectArchived from "./manage/components/ProjectArchived";
 import notificationKoro from "notification-koro1";
@@ -196,8 +207,8 @@ import ProjectManagement from "./manage/components/ProjectManagement";
 import DrawerOverlay from "../components/DrawerOverlay";
 import DragBallComponent from "../components/DragBallComponent";
 import TaskAdd from "./manage/components/TaskAdd";
+import {skinOptionsList} from "../skin/index"
 import {Store} from "le5le-store";
-
 export default {
     components: {
         TaskAdd,
@@ -236,6 +247,7 @@ export default {
             natificationHidden: false,
             natificationReady: false,
             notificationClass: null,
+            skinOptionsList:skinOptionsList
         }
     },
 
@@ -292,10 +304,10 @@ export default {
             'projectTotal',
             'taskId',
             'dialogMsgPush',
+            'skinType',
         ]),
-
         ...mapGetters(['taskData', 'dashboardData']),
-
+        ...mapMutations(['setSkinType']),
         msgAllUnread() {
             let num = 0;
             this.dialogs.map(({unread}) => {
@@ -443,6 +455,10 @@ export default {
     },
 
     methods: {
+        setSkin(e){
+            localStorage.setItem("skinType", this.skinOptionsList[e].key);
+            this.$store.commit('setSkinType', this.skinOptionsList[e].key)
+        },
         initLanguage() {
             this.columns = [{
                 label: this.$L('空白模板'),
diff --git a/resources/assets/js/pages/manage/calendar.vue b/resources/assets/js/pages/manage/calendar.vue
index 26d1e1001..506e3a4ae 100644
--- a/resources/assets/js/pages/manage/calendar.vue
+++ b/resources/assets/js/pages/manage/calendar.vue
@@ -20,7 +20,7 @@
                 </ButtonGroup>
             </div>
         </div>
-        <div class="calendar-box">
+        <div class="calendar-box" v-if="visible">
             <Calendar
                 ref="cal"
                 :view="calendarView"
@@ -47,7 +47,7 @@ import 'tui-calendar-hi/dist/tui-calendar-hi.css'
 import {mapState} from "vuex";
 import Calendar from "./components/Calendar";
 import moment from "moment";
-
+import {calendarColorList} from "../../skin"
 export default {
     components: {Calendar},
     data() {
@@ -65,16 +65,18 @@ export default {
             calendarList: [],
 
             loadIng: 0,
+            visible:true
         }
     },
 
     activated() {
         this.$refs.cal.resetRender();
         this.setRenderRange();
+       
     },
 
     computed: {
-        ...mapState(['userId', 'projects', 'tasks']),
+        ...mapState(['userId', 'projects', 'tasks','skinType']),
 
         list() {
             let datas = $A.cloneJSON(this.tasks);
@@ -142,6 +144,16 @@ export default {
             },
             immediate: true,
         },
+        skinType(nval,oval){
+            if(nval!==oval){
+                this.calendarTheme = calendarColorList[this.skinType]
+                this.visible=false
+                this.$nextTick(() => {
+                    this.visible=true
+                });
+            }
+           
+        }
     },
 
     methods: {
@@ -166,12 +178,7 @@ export default {
             ];
             this.calendarWeek = {daynames};
             this.calendarMonth = {daynames};
-            this.calendarTheme = {
-                'common.border': '1px solid #f4f5f5',
-                'month.dayname.fontSize': '14px',
-                'month.dayname.borderLeft': '1px solid #f4f5f5',
-                'month.dayname.height': '50px',
-            }
+            this.calendarTheme = calendarColorList[this.skinType]
             this.calendarTemplate = {
                 titlePlaceholder: () => {
                     return this.$L("任务描述")
diff --git a/resources/assets/js/pages/manage/components/Calendar.vue b/resources/assets/js/pages/manage/components/Calendar.vue
index 827fb5649..274ff3f68 100644
--- a/resources/assets/js/pages/manage/components/Calendar.vue
+++ b/resources/assets/js/pages/manage/components/Calendar.vue
@@ -1,9 +1,8 @@
 <template>
-    <div ref="tuiCalendar" class="calendar-wrapper"></div>
+    <div id="calendar" ref="tuiCalendar" class="calendar-wrapper"></div>
 </template>
 <script>
 import Calendar from 'tui-calendar-hi';
-
 export default {
     name: 'Calendar',
     props: {
@@ -151,31 +150,34 @@ export default {
         }
     },
     mounted() {
-        this.calendarInstance = new Calendar(this.$refs.tuiCalendar, {
-            defaultView: this.view,
-            taskView: this.taskView,
-            scheduleView: this.scheduleView,
-            theme: this.theme,
-            template: this.template,
-            week: this.week,
-            month: this.month,
-            calendars: this.calendars,
-            useCreationPopup: this.useCreationPopup,
-            useDetailPopup: this.useDetailPopup,
-            timezones: this.timezones,
-            disableDblClick: this.disableDblClick,
-            disableClick: this.disableClick,
-            isReadOnly: this.isReadOnly,
-            usageStatistics: this.usageStatistics
-        });
-        this.addEventListeners();
-        this.reflectSchedules();
+        this.init();
     },
     beforeDestroy() {
         this.calendarInstance.off();
         this.calendarInstance.destroy();
     },
     methods: {
+        init(){
+        this.calendarInstance = new Calendar(this.$refs.tuiCalendar, {
+                    defaultView: this.view,
+                    taskView: this.taskView,
+                    scheduleView: this.scheduleView,
+                    theme: this.theme,
+                    template: this.template,
+                    week: this.week,
+                    month: this.month,
+                    calendars: this.calendars,
+                    useCreationPopup: this.useCreationPopup,
+                    useDetailPopup: this.useDetailPopup,
+                    timezones: this.timezones,
+                    disableDblClick: this.disableDblClick,
+                    disableClick: this.disableClick,
+                    isReadOnly: this.isReadOnly,
+                    usageStatistics: this.usageStatistics,
+                });
+        this.addEventListeners();
+        this.reflectSchedules();
+        },
         cloneData(data) {
             return JSON.parse(JSON.stringify(data));
         },
diff --git a/resources/assets/js/skin/index.js b/resources/assets/js/skin/index.js
new file mode 100644
index 000000000..443af52f1
--- /dev/null
+++ b/resources/assets/js/skin/index.js
@@ -0,0 +1,37 @@
+const skinOptionsList = [
+    {
+        lable: "默认",
+        key: "white",
+    },
+    {
+        lable: "暗黑主题",
+        key: "black",
+    },
+];
+
+const calendarColorList={
+    white:
+        {
+            'common.border': '1px solid #f4f5f5',
+            'common.holiday.color': '#333',
+            'common.saturday.color': '#333',
+            'common.dayname.color': '#333',
+            'common.backgroundColor':'#ffffff',
+         
+        },
+    
+    black: 
+        {
+            'common.border': '1px solid #ffffff',
+            'common.holiday.color': '#ffffff',
+            'common.saturday.color': '#ffffff',
+            'common.dayname.color': '#ffffff',
+            'common.backgroundColor':'#171717',
+            'common.creationGuide.color': '#ffffff',
+            'common.creationGuide.color': '#ffffff',
+            'common.today.color': '#ffffff',
+        },
+}
+
+
+export { skinOptionsList,calendarColorList };
diff --git a/resources/assets/js/store/mutations.js b/resources/assets/js/store/mutations.js
index 03048022a..32cbdddd1 100644
--- a/resources/assets/js/store/mutations.js
+++ b/resources/assets/js/store/mutations.js
@@ -1,3 +1,9 @@
 export default {
-
+    /**
+     * 修改当前皮肤类型
+     
+     */
+    setSkinType(state,val){
+        state.skinType=val
+    }
 }
diff --git a/resources/assets/js/store/state.js b/resources/assets/js/store/state.js
index cf46cbf8d..1af78d952 100644
--- a/resources/assets/js/store/state.js
+++ b/resources/assets/js/store/state.js
@@ -344,5 +344,6 @@ state.taskColorList = [
     {name: '紫色', color: '#f6ecff'},
     {name: '灰色', color: '#f3f3f3'},
 ];
-
+//当前主题背景色
+state.skinType=window.localStorage.getItem("skinType")|| "white"
 export default state
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index 6c2d95dc4..604ffdef5 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -4,7 +4,7 @@
 @import "taskfont";
 @import "loading";
 @import "scrollbar";
-
 @import "components/_";
 @import "pages/_";
+@import "skin";
 
diff --git a/resources/assets/sass/pages/page-manage.scss b/resources/assets/sass/pages/page-manage.scss
index 8a1bb7307..d66311893 100644
--- a/resources/assets/sass/pages/page-manage.scss
+++ b/resources/assets/sass/pages/page-manage.scss
@@ -78,6 +78,14 @@
                     color: #666666;
                 }
             }
+            .mannage-menu-skin {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .ivu-icon {
+                    color: #666666;
+                }
+            }
         }
         > ul {
             flex: 1;
diff --git a/resources/assets/sass/skin.scss b/resources/assets/sass/skin.scss
new file mode 100644
index 000000000..97f5ba864
--- /dev/null
+++ b/resources/assets/sass/skin.scss
@@ -0,0 +1,133 @@
+//暗黑皮肤
+.black {
+    background-color: #171717;
+    > .manage-box-menu {
+        background-color: #202020;
+        > ul {
+            > li {
+                &.menu-project {
+                    >ul{
+                        >li{
+                            &.active {
+                                .project-h1 {
+                                    background-color: #b4b3b3;
+                                }
+                            }
+                        }
+                    }
+                  
+                }
+                color: #ffffff;
+                
+                &.active {
+                        background-color: #b4b3b3 !important;
+                }
+            }
+        }
+
+        .title {
+            color: #ffffff !important;
+        }
+        .manage-box-title {
+            background-color: #b4b3b3 !important;
+            color: #ffffff;
+        }
+    }
+    .manage-box-main {
+        .messenger-select:after {
+            background-color: #ffffff;
+        }
+        .dashboard-wrapper {
+            color: #ffffff;
+        }
+        .dashboard-hello {
+            color: #ffffff;
+        }
+        .dashboard-desc {
+            color: #ffffff;
+        }
+        .dashboard-list {
+            li {
+                background-color: #202020;
+            }
+        }
+        .calendar-title {
+            h1 {
+                color: #ffffff !important;
+            }
+        }
+    }
+    .messenger-wrapper {
+        color: #ffffff;
+        .dialog {
+            .active {
+                background-color: #979595 !important;
+            }
+        }
+        .dialog-box {
+            span {
+                color: #ffffff !important;
+            }
+            .dialog-text {
+                color: #ffffff !important;
+            }
+        }
+        .dialog-wrapper {
+            background-color: #171717;
+        }
+        .messenger-nav > p {
+            color: #ffffff !important;
+        }
+    }
+    .file-wrapper {
+        .file-nav {
+            h1 {
+                color: #ffffff !important;
+            }
+        }
+        .file-navigator {
+            > ul {
+                > li {
+                    color: #ffffff !important;
+                }
+            }
+        }
+        .file-list {
+            > ul {
+                > li {
+                    .file-name {
+                        color: #ffffff;
+                    }
+                }
+            }
+        }
+    }
+    .page-project {
+        .project-list {
+            background-color: #171717;
+            color: #ffffff;
+            .project-title {
+                h1 {
+                    color: #ffffff;
+                }
+            }
+            .project-subtitle {
+                color: #ffffff;
+            }
+            .column-head {
+                background-color: #202020;
+            }
+            .add-column {
+                background-color: #202020;
+                color: #ffffff;
+            }
+            .task-item {
+                background-color: #202020 !important;
+                color: #ffffff !important;
+            }
+            .add-placeholder {
+                color: #ffffff;
+            }
+        }
+    }
+}
diff --git a/resources/assets/statics/public/js/language.all.js b/resources/assets/statics/public/js/language.all.js
index f42a52788..a28fb8198 100644
--- a/resources/assets/statics/public/js/language.all.js
+++ b/resources/assets/statics/public/js/language.all.js
@@ -453,5 +453,6 @@
         {"CN": "开启您的 Dootask 团队协作","EN": "Open your DOOTASK team collaboration","TC": "開啟您的 Dootask 團隊協作","KM": "បើកកិច្ចសហប្រតិបត្តិការក្រុមរបស់អ្នក","TH": "เปิดการทำงานร่วมกันของทีม DOOTASK ของคุณ","KO": "Dootask 팀 공동 작업을 엽니 다","JA": "あなたのdootaskチームコラボレーションを開く"},
         {"CN": "联系我们","EN": "Contact us","TC": "聯繫我們","KM": "ទាក់ទង​មក​ពួក​យើង","TH": "ติดต่อเรา","KO": "문의하기","JA": "お問い合わせ"},
         {"CN": "桂公网安备 31011002000058号 桂ICP备12020087号-3","EN": "Gui Gong Net Anni 31011002000058 Gui ICP No. 12020087 -3","TC": "桂公網安備 31011002000058號 桂ICP備12020087號-3","KM": "Gui Gong Net Net Ann 31011002000058 GUI ICP លេខ 12020087 -3","TH": "Gui Gong Net Anni 31011002000058 GUI ICP No. 12020087 -3","KO": "Gui Gong Net Anni 31011002000058 GUI ICP No. 12020087 -3","JA": "GUI GONG NET ANNI 31011002000058 GUI ICP No. 12020087 -3"},
+        {"CN": "主题皮肤","EN": "Topic skin","TC": "主題皮膚","KM": "ស្បែកប្រធានបទ","TH": "ผิวหนัง","KO": "주제 피부","JA": "トピックスキン"},
     ]
 })(window)