added less files for dark mode to be imported to use

.travis.yml

@@ -4,30 +4,32 @@ sudo: false
 
 notifications:
   email:
-  - yiminghe@gmail.com
-  - hust2012jiangkai@gmail.com
+    - yiminghe@gmail.com
+    - hust2012jiangkai@gmail.com
 
 node_js:
-- 10
+  - 10
 
 before_install:
-- |
+  - |
     if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
     then
       echo "Only docs were updated, stopping build process."
       exit
     fi
     npm install npm@3.x -g
     phantomjs --version
+
 script:
-- |
+  - |
     if [ "$TEST_TYPE" = test ]; then
       npm test -- --coverage && \
       bash <(curl -s https://codecov.io/bash)
     else
       npm run $TEST_TYPE
     fi
+
 env:
   matrix:
-  - TEST_TYPE=lint
-  - TEST_TYPE=test
+    - TEST_TYPE=lint
+    - TEST_TYPE=test

assets/dark.less

@@ -0,0 +1,10 @@
+@import "./dark/common/index.less";
+@import "./dark/index/Picker.less";
+@import "./dark/index/Calendar.less";
+@import "./dark/index/Time.less";
+@import "./dark/index/TimePanel.less";
+@import "./dark/index/MonthPanel.less";
+@import "./dark/index/YearPanel.less";
+@import "./dark/index/DecadePanel.less";
+@import "./dark/common/RangeCalendar.less";
+@import "./dark/common/FullCalendar.less";

assets/dark/common/Calendar.less

@@ -0,0 +1,104 @@
+.@{prefixClass} {
+  &-input-wrap {
+    position: relative;
+    padding: 6px;
+    border-bottom: 1px solid #e9e9e9;
+    &:after {
+      content: "";
+      clear: both;
+    }
+  }
+
+  &-date-input-wrap {
+    overflow: hidden;
+  }
+  &-time-picker {
+    position: absolute;
+    width: 100%;
+    top: 34px;
+    background-color: black;
+    height: 217px;
+    &-panel {
+      width: 100%;
+      position: relative;
+      .@{timePickerClass}-panel {
+        &-input-wrap {
+          display: none;
+        }
+        &-inner {
+          border: none;
+          box-shadow: none;
+        }
+        &-select {
+          width: 84px;
+          max-height: 217px;
+          li {
+            text-align: center;
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+  &-time-picker-wrap {
+    float: left;
+    width: 100%;
+
+    .@{timePickerClass} {
+      width: 100%;
+
+      &-input {
+        padding: 0;
+        border: 1px solid transparent;
+        outline: 0;
+        height: 22px;
+      }
+
+      &-icon {
+        display: none;
+      }
+    }
+  }
+
+  &-input {
+    border: 1px solid transparent;
+    width: 100%;
+    color: #999;
+    cursor: text;
+    line-height: 1.5;
+    outline: 0;
+    height: 22px;
+
+    &-invalid {
+      border-color: red;
+    }
+  }
+
+  &-clear-btn {
+    z-index: 9999;
+    position: absolute;
+    right: 6px;
+    cursor: pointer;
+    overflow: hidden;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    top: 6px;
+    margin: 0;
+  }
+
+  &-clear-btn:after {
+    content: "x";
+    font-size: 12px;
+    color: #555;
+    display: inline-block;
+    line-height: 1;
+    width: 20px;
+    transition: color 0.3s ease;
+  }
+
+  &-clear-btn:hover:after {
+    color: #999;
+  }
+}

assets/dark/common/FullCalendar.less

@@ -0,0 +1,91 @@
+.@{prefixClass}-full {
+  width: 275px;
+  &-header {
+    padding: 5px 10px;
+    text-align: center;
+    user-select: none;
+    -webkit-user-select: none;
+    border-bottom: 1px solid #333;
+    overflow: hidden;
+
+    &-month-select,
+    &-year-select {
+      width: 70px;
+      float: right;
+      margin-right: 5px;
+    }
+
+    &-switcher {
+      float: right;
+      display: inline-block;
+      &-normal:hover {
+        border-color: #23c0fa;
+        box-shadow: 0 0 2px rgba(45, 183, 245, 0.8);
+        cursor: pointer;
+      }
+      &-focus {
+        border-color: #3fc7fa;
+        background-color: #3fc7fa;
+        color: #000;
+      }
+      > span {
+        float: left;
+        height: 28px;
+        line-height: 24px;
+        border: 1px solid #262626;
+        padding: 0 10px;
+        color: #999;
+        &:first-child {
+          border-top-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+          border-right: none;
+        }
+        &:last-child {
+          border-top-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+          border-left: none;
+        }
+      }
+    }
+  }
+}
+
+.@{prefixClass}-fullscreen {
+  width: auto;
+
+  .@{prefixClass}-full-header {
+    border-bottom: none;
+  }
+
+  .@{prefixClass} {
+    &-column-header {
+      text-align: right;
+      padding-right: 12px;
+    }
+    &-cell {
+      padding: 0;
+    }
+    &-cell .@{prefixClass}-date,
+    &-month-panel-cell .@{prefixClass}-month-panel-month {
+      display: block;
+      height: 116px;
+      width: auto;
+      border-radius: 0;
+      margin: 0 4px;
+      border: none;
+      border-top: 2px solid #111;
+      text-align: right;
+      padding-right: 8px;
+    }
+    &-selected-day .@{prefixClass}-date,
+    &-month-panel-selected-cell .@{prefixClass}-month-panel-month {
+      background-color: #140500;
+      color: #999;
+    }
+    &-today .@{prefixClass}-date,
+    &-month-panel-selected-cell .@{prefixClass}-month-panel-month {
+      border-top-color: #3fc7fa;
+      color: #3fc7fa;
+    }
+  }
+}

assets/dark/common/Picker.less

@@ -0,0 +1,10 @@
+.@{prefixClass}-picker {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  z-index: 1000;
+
+  &-hidden {
+    display: none;
+  }
+}

assets/dark/common/RangeCalendar.less

@@ -0,0 +1,132 @@
+@input-box-height: 35px;
+
+.@{prefixClass}-range {
+  width: 502px;
+  overflow: hidden;
+
+  &-part {
+    width: 250px;
+    position: relative;
+
+    .@{prefixClass}-time-picker {
+      top: 69px;
+      &-panel {
+        &-select {
+          width: 77px;
+        }
+      }
+    }
+  }
+
+  &-left {
+    float: left;
+    .@{prefixClass}-time-picker-panel {
+      &-select:last-child {
+        border-right: 1px solid #e9e9e9;
+      }
+
+    }
+  }
+
+  &-right {
+    float: right;
+    .@{prefixClass}-time-picker-panel {
+      left: 21px;
+
+      &-select:first-child {
+        border-left: 1px solid #e9e9e9;
+      }
+    }
+  }
+
+  &-middle {
+    position: absolute;
+    margin-left: -10px;
+    text-align: center;
+    height: @input-box-height;
+    line-height: @input-box-height;
+  }
+  .@{prefixClass}-date-panel::after {
+    content:".";
+    display:block;
+    height:0;
+    clear:both;
+    visibility:hidden;
+  }
+
+  .@{prefixClass}-input-wrap {
+    height: @input-box-height;
+  }
+  .@{prefixClass}-input,
+  .@{timePickerClass}-input {
+    padding: 1px 7px;
+    height: 22px;
+  }
+
+  .@{prefixClass}-body,
+  .@{prefixClass}-decade-panel-body,
+  .@{prefixClass}-year-panel-body,
+  .@{prefixClass}-month-panel-body {
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  &.@{prefixClass}-week-number {
+    width: 574px;
+
+    .@{prefixClass}-range {
+      &-part {
+        width: 286px;
+        .@{prefixClass}-time-picker {
+          top: 69px;
+          &-panel {
+            &-select {
+              width: 89px;
+            }
+          }
+        }
+      }
+      &-right {
+        .@{prefixClass}-time-picker-panel {
+          left: 36px;
+        }
+      }
+    }
+  }
+
+  .@{prefixClass}-year-panel,
+  .@{prefixClass}-month-panel,
+  .@{prefixClass}-decade-panel {
+    top: @input-box-height;
+  }
+  .@{prefixClass}-month-panel .@{prefixClass}-year-panel {
+    top: 0;
+  }
+  .@{prefixClass}-decade-panel-table,
+  .@{prefixClass}-year-panel-table,
+  .@{prefixClass}-month-panel-table {
+    height: 198px;
+  }
+
+  .@{prefixClass}-in-range-cell {
+    background: #140b07;
+    border-radius: 0;
+  }
+
+  &-bottom {
+    text-align: right;
+  }
+
+  .@{prefixClass}-footer{
+    border-top: none;
+    padding: 0;
+    &-btn {
+      padding: 10px 12px 10px 0;
+    }
+  }
+  .@{prefixClass}-ok-btn {
+    position: static;
+  }
+  .@{prefixClass}-today-btn {
+    float: left;
+  }
+}