diff --git a/.gitignore b/.gitignore
index 23fbfcf..754af37 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,5 @@ node_modules
 /locale
 
 /index.*
+
+/scss
diff --git a/README.md b/README.md
index dd4c050..6c50821 100644
--- a/README.md
+++ b/README.md
@@ -57,6 +57,19 @@ $ npm install vue2-datepicker --save
 </template>
 ```
 
+## Theme
+
+If your project uses SCSS, you can change the default style variables.
+
+To create a scss file. e.g. `datepicker.scss`:
+
+```scss
+$default-color: #555;
+$primary-color: #1284e7;
+
+@import '~vue2-datepicker/scss/index.scss';
+```
+
 ## Internationalization
 
 The default language of v3.x is English. If you need other locales.
diff --git a/README.zh-CN.md b/README.zh-CN.md
index eb1736b..01f2636 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -29,7 +29,20 @@
 $ npm install vue2-datepicker --save
 ```
 
-## Usage
+## 主题
+
+如果你的项目使用了 SCSS, 你可以改变默认的变量.
+
+创建一个新的文件. e.g. `datepicker.scss`:
+
+```scss
+$default-color: #555;
+$primary-color: #1284e7;
+
+@import '~vue2-datepicker/scss/index.scss';
+```
+
+## 用法
 
 ```html
 <script>
diff --git a/package-lock.json b/package-lock.json
index ff08132..e58344c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1512,8 +1512,7 @@
       "version": "7.0.7",
       "resolved": "https://registry.npm.taobao.org/@types/babel-types/download/@types/babel-types-7.0.7.tgz",
       "integrity": "sha1-Zn6xZA6AOUNgKAVXN9K5mG7jNuM=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "@types/babel__core": {
       "version": "7.1.3",
@@ -1561,7 +1560,6 @@
       "resolved": "https://registry.npm.taobao.org/@types/babylon/download/@types/babylon-6.16.5.tgz",
       "integrity": "sha1-HFZB22nrjN83jt0ltL53VL7rSLQ=",
       "dev": true,
-      "optional": true,
       "requires": {
         "@types/babel-types": "*"
       }
@@ -1938,7 +1936,6 @@
       "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
       "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
       "dev": true,
-      "optional": true,
       "requires": {
         "kind-of": "^3.0.2",
         "longest": "^1.0.1",
@@ -1950,7 +1947,6 @@
           "resolved": "https://registry.npm.taobao.org/kind-of/download/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -3474,7 +3470,6 @@
       "resolved": "https://registry.npm.taobao.org/constantinople/download/constantinople-3.1.2.tgz",
       "integrity": "sha1-1F7XJPV9PRBQABen06iJwTga5kc=",
       "dev": true,
-      "optional": true,
       "requires": {
         "@types/babel-types": "^7.0.0",
         "@types/babylon": "^6.16.2",
@@ -3974,6 +3969,58 @@
         "sha.js": "^2.4.8"
       }
     },
+    "cross-env": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npm.taobao.org/cross-env/download/cross-env-6.0.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcross-env%2Fdownload%2Fcross-env-6.0.3.tgz",
+      "integrity": "sha1-Qla3HkmzpAY3oM5wdopu9ccq6UE=",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npm.taobao.org/cross-spawn/download/cross-spawn-7.0.1.tgz",
+          "integrity": "sha1-CrVihuD3wk4VPQTMKqAn5DqaXRQ=",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "path-key": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npm.taobao.org/path-key/download/path-key-3.1.0.tgz",
+          "integrity": "sha1-maENhwqAO91e5vBHDljfzS+aVNM=",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/shebang-command/download/shebang-command-2.0.0.tgz?cache=0&sync_timestamp=1567781622888&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fshebang-command%2Fdownload%2Fshebang-command-2.0.0.tgz",
+          "integrity": "sha1-zNCvT4g1+9wmW4JGGq8MNmY/NOo=",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/shebang-regex/download/shebang-regex-3.0.0.tgz",
+          "integrity": "sha1-rhbxZE2HPsrYQ7AwexQzYtTEIXI=",
+          "dev": true
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npm.taobao.org/which/download/which-2.0.2.tgz?cache=0&sync_timestamp=1574116898193&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwhich%2Fdownload%2Fwhich-2.0.2.tgz",
+          "integrity": "sha1-fGqN0KY2oDJ+ELWckobu6T8/UbE=",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npm.taobao.org/cross-spawn/download/cross-spawn-6.0.5.tgz",
@@ -5810,8 +5857,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5832,14 +5878,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5854,20 +5898,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5984,8 +6025,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5997,7 +6037,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6012,7 +6051,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -6020,14 +6058,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -6046,7 +6082,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6127,8 +6162,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6140,7 +6174,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6226,8 +6259,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6263,7 +6295,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6283,7 +6314,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6327,14 +6357,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -6982,7 +7010,7 @@
     },
     "html-tags": {
       "version": "2.0.0",
-      "resolved": "https://registry.npm.taobao.org/html-tags/download/html-tags-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
       "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=",
       "dev": true
     },
@@ -8402,8 +8430,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/js-stringify/download/js-stringify-1.0.2.tgz",
       "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "js-tokens": {
       "version": "4.0.0",
@@ -9041,7 +9068,7 @@
     },
     "lodash.kebabcase": {
       "version": "4.1.1",
-      "resolved": "https://registry.npm.taobao.org/lodash.kebabcase/download/lodash.kebabcase-4.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
       "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY=",
       "dev": true
     },
@@ -9195,8 +9222,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
       "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "loose-envify": {
       "version": "1.4.0",
@@ -11581,8 +11607,7 @@
       "version": "1.3.3",
       "resolved": "https://registry.npm.taobao.org/pug-error/download/pug-error-1.3.3.tgz",
       "integrity": "sha1-80L7AIdS1YA0wYXeA2At2f/hX6Y=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "pug-filters": {
       "version": "3.1.1",
@@ -11702,8 +11727,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npm.taobao.org/pug-runtime/download/pug-runtime-2.0.5.tgz",
       "integrity": "sha1-baeXbDa/IvaOczw1kkDYrnoylTo=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "pug-strip-comments": {
       "version": "1.0.4",
@@ -11719,8 +11743,7 @@
       "version": "1.1.8",
       "resolved": "https://registry.npm.taobao.org/pug-walk/download/pug-walk-1.1.8.tgz",
       "integrity": "sha1-tAj2fyeRL4wh2i9FtyMMS9Kl6no=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "pump": {
       "version": "3.0.0",
@@ -13418,7 +13441,7 @@
     },
     "svg-tags": {
       "version": "1.0.0",
-      "resolved": "https://registry.npm.taobao.org/svg-tags/download/svg-tags-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
       "dev": true
     },
diff --git a/package.json b/package.json
index 95947a9..5b13c5f 100644
--- a/package.json
+++ b/package.json
@@ -8,18 +8,19 @@
   },
   "files": [
     "/locale",
-    "/index.*"
+    "/index.*",
+    "/scss"
   ],
   "version": "3.0.2",
   "scripts": {
     "dev": "parcel ./example/dev.html --open --port 2235",
-    "build:index": "NODE_ENV=production rollup -c",
-    "build:locale": "NODE_ENV=production rollup -c rollup.locale.config.js",
-    "build:css": "sass --style=compressed --no-source-map src/style/index.scss index.css && postcss index.css --use autoprefixer -o index.css",
+    "build:index": "cross-env NODE_ENV=production rollup -c",
+    "build:locale": "cross-env NODE_ENV=production rollup -c rollup.locale.config.js",
+    "build:css": "sass --style=compressed --no-source-map src/style/index.scss index.css && postcss index.css --use autoprefixer -o index.css --no-map && cp -R src/style scss",
     "build": "npm run lint && npm run test && npm run clean && npm run build:index && npm run build:css && npm run build:locale",
-    "clean": "rimraf locale index.*",
+    "clean": "rimraf scss locale index.*",
     "lint": "eslint src/**/*.{js,vue}",
-    "deploy:build": "NODE_ENV=production parcel build ./example/index.html --public-url ./ --out-dir _site --no-source-maps --no-minify",
+    "deploy:build": "cross-env NODE_ENV=production parcel build ./example/index.html --public-url ./ --out-dir _site --no-source-maps --no-minify",
     "deploy": "bash build/gh-pages-deploy.sh",
     "format": "prettier --write src/**/*",
     "test": "jest",
@@ -70,6 +71,7 @@
     "conventional-changelog-cli": "^2.0.25",
     "core-js": "^3.3.5",
     "coveralls": "^3.0.7",
+    "cross-env": "^6.0.3",
     "eslint": "^6.2.2",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-config-prettier": "^6.1.0",
diff --git a/src/style/btn.scss b/src/style/btn.scss
index f06b7f1..e5394ad 100644
--- a/src/style/btn.scss
+++ b/src/style/btn.scss
@@ -1,3 +1,5 @@
+@import './var.scss';
+
 .mx-btn {
   box-sizing: border-box;
   line-height: 1;
diff --git a/src/style/index.scss b/src/style/index.scss
index de26120..65b5cc6 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -15,10 +15,6 @@
     fill: currentColor;
     overflow: hidden;
   }
-  &.disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-  }
 }
 
 .mx-datepicker-range {
@@ -53,21 +49,21 @@
   padding-left: 10px;
   font-size: 14px;
   line-height: 1.4;
-  color: #555;
+  color: $input-color;
   background-color: #fff;
-  border: 1px solid #ccc;
+  border: 1px solid $input-border-color;
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 
   &:hover,
   &:focus {
-    border-color: #40a9ff;
+    border-color: $input-hover-border-color;
   }
   &:disabled,
   &.disabled {
-    color: rgba(0, 0, 0, 0.25);
-    background-color: #f5f5f5;
-    border-color: #ccc;
+    color: $disabled-color;
+    background-color: $disabled-background-color;
+    border-color: $input-border-color;
     cursor: not-allowed;
   }
   &:focus {
@@ -195,19 +191,21 @@
   .cell {
     cursor: pointer;
     &:hover {
-      background-color: $hover-color;
+      color: $calendar-hover-color;
+      background-color: $calendar-hover-background-color;
     }
     &.active {
-      color: #fff;
-      background-color: $primary-color;
+      color: $calendar-active-color;
+      background-color: $calendar-active-background-color;
     }
     &.in-range {
-      background-color: $range-color;
+      color: $calendar-in-range-color;
+      background-color: $calendar-in-range-background-color;
     }
     &.disabled {
       cursor: not-allowed;
-      color: #ccc;
-      background-color: #f3f3f3;
+      color: $disabled-color;
+      background-color: $disabled-background-color;
     }
   }
 }
@@ -216,13 +214,14 @@
   .mx-date-row {
     cursor: pointer;
     &:hover {
-      background-color: $hover-color;
+      background-color: $calendar-hover-background-color;
     }
     &.mx-active-week {
-      background-color: $range-color;
+      background-color: $calendar-in-range-background-color;
     }
     .cell {
       &:hover {
+        color: inherit;
         background-color: transparent;
       }
       &.active {
@@ -265,8 +264,8 @@
   .today {
     color: mix(#fff, $primary-color, 10%);
   }
-  .not-current-month {
-    color: #ddd;
+  .cell.not-current-month {
+    color: #ccc;
   }
 }
 
@@ -328,16 +327,18 @@
     height: 32px;
     line-height: 32px;
     &:hover {
-      background-color: $hover-color;
+      color: $time-hover-color;
+      background-color: $time-hover-background-color;
     }
     &.active {
-      color: $primary-color;
+      color: $time-active-color;
+      background-color: $time-active-background-color;
       font-weight: 700;
     }
     &.disabled {
       cursor: not-allowed;
-      color: #ccc;
-      background-color: #f3f3f3;
+      color: $disabled-color;
+      background-color: $disabled-background-color;
     }
   }
 }
@@ -348,15 +349,17 @@
   font-size: 14px;
   line-height: 20px;
   &:hover {
-    background-color: $hover-color;
+    color: $time-hover-color;
+    background-color: $time-hover-background-color;
   }
   &.active {
-    color: $primary-color;
+    color: $time-active-color;
+    background-color: $time-active-background-color;
     font-weight: 700;
   }
   &.disabled {
     cursor: not-allowed;
-    color: #ccc;
-    background-color: #f3f3f3;
+    color: $disabled-color;
+    background-color: $disabled-background-color;
   }
 }
diff --git a/src/style/var.scss b/src/style/var.scss
index 96d08c1..8732807 100644
--- a/src/style/var.scss
+++ b/src/style/var.scss
@@ -1,5 +1,26 @@
-$default-color: #73879c;
-$primary-color: #1284e7;
-$range-color: #dff2fd;
-$hover-color: #eaf8fe;
-$border-color: #e8e8e8;
+$default-color: #73879c !default;
+$primary-color: #1284e7 !default;
+
+$input-border-color: #ccc !default;
+$input-color: #555 !default;
+$input-hover-border-color: #409aff !default;
+
+$disabled-color: #ccc !default;
+$disabled-background-color: #f3f3f3 !default;
+
+$border-color: #e8e8e8 !default;
+
+$calendar-active-color: #fff !default;
+$calendar-active-background-color: $primary-color !default;
+
+$calendar-hover-color: $default-color !default;
+$calendar-hover-background-color: mix(#fff, $calendar-active-background-color, 95%) !default;
+
+$calendar-in-range-color: $default-color !default;
+$calendar-in-range-background-color: mix(#fff, $calendar-active-background-color, 85%) !default;
+
+$time-active-color: $primary-color !default;
+$time-active-background-color: transparent !default;
+
+$time-hover-color: $default-color !default;
+$time-hover-background-color: mix(#fff, $calendar-active-background-color, 95%) !default;