diff --git a/src/TimePicker/index.js b/src/TimePicker/index.js
deleted file mode 100644
index 2b95a2ae7..000000000
--- a/src/TimePicker/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/* istanbul ignore file */
-import Scaffold from './src/main.vue'
-
-Scaffold.install = function (Vue) {
-  Vue.component(Scaffold.name, Scaffold)
-}
-
-export default Scaffold
diff --git a/src/_styles/TimePicker.scss b/src/_styles/TimePicker.scss
index 90e652e69..9b06f3383 100644
--- a/src/_styles/TimePicker.scss
+++ b/src/_styles/TimePicker.scss
@@ -1,120 +1,120 @@
-@import "./mixins/mixins.scss";
+// @import "./mixins/mixins.scss";
 
-@include themes-mixin {
-  @include once {
-    @include b(time-picker) {
-      position: relative;
-      display: inline-block;
-    }
-  }
-  @include b(time-picker) {
-    @include m(invalid) {
-      & > {
-        @include b(input) {
-          @include e(input) {
-            @include once {
-              text-decoration: line-through;    
-            }
-            text-decoration-color: map-get($--time-picker-text-decoration-color, 'default');
-          }
-        }
-      }
-    }
-    @include m(transition-disabled) {
-      & > {
-        @include b(input) {
-          input {
-            transition: none;
-          }
-        }
-      }
-    }
-  }
-  @include b(time-picker-selector) {
-    @include once {
-      outline: none;
-      font-size: 12px;
-      border-radius: $--n-time-picker-border-radius;
-      margin: 4px 0;
-      min-width: 104px;
-      overflow: hidden;
-      transform: $--n-transform-debounce-scale;
-      @include fade-in-scale-up-transition(time-picker);
-      @include b(time-picker-selector-actions) {
-        height: 38px;
-        align-items: center;
-        display: flex;
-        justify-content: space-evenly;
-        @include e(confirm) {
-          @include m(disabled) {
-            cursor: not-allowed;
-            opacity: 0.5;
-          }
-        }
-      }
-    }
-    background-color: $--time-picker-background-color;
-    box-shadow: $--time-picker-box-shadow;
-    @include b(time-picker-selector-time) {
-      @include once {
-        height: 224px;
-        display: flex;
-        position: relative;
-      }
-      border-bottom: 1px solid $--time-picker-divider-color;
-    }
-    @include b(time-picker-selector-time-row) {
-      @include once {
-        flex-grow: 1;
-        min-width: 52px;
-        height: 224px;
-        flex-direction: column;
-        transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
-        @include m(transition-disabled) {
-          @include e(item) {
-            transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
-          }
-        }
-      }
-      @include e(item) {
-        @include once {
-          cursor: pointer;
-          height: 32px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
-          background: transparent; 
-        }
-        text-decoration-color: transparent;
-        color: map-get($--time-picker-text-color, 'default');
-        @include not-m(disabled) {
-          &:hover {
-            background-color:  map-get($--time-picker-item-background-color, 'hover');
-          }
-        }
-        @include m(active) {
-          background-color: map-get($--time-picker-item-background-color, 'hover');
-          color: map-get($--time-picker-text-color, 'active');
-        }
-        @include m(disabled) {
-          opacity: $--time-picker-item-disabled-opacity;
-          @include once {
-            cursor: not-allowed;
-          }
-        }
-      }
-      @include m(invalid) {
-        @include e(item) {
-          @include m(active) {
-            @include once {
-              text-decoration: line-through;
-            }
-            background-color: map-get($--time-picker-item-background-color, 'invalid');
-            text-decoration-color: map-get($--time-picker-text-decoration-color, 'active');
-          }
-        }
-      }
-    }
-  }
-}
+// @include themes-mixin {
+//   @include once {
+//     @include b(time-picker) {
+//       position: relative;
+//       display: inline-block;
+//     }
+//   }
+//   @include b(time-picker) {
+//     @include m(invalid) {
+//       & > {
+//         @include b(input) {
+//           @include e(input) {
+//             @include once {
+//               text-decoration: line-through;    
+//             }
+//             text-decoration-color: map-get($--time-picker-text-decoration-color, 'default');
+//           }
+//         }
+//       }
+//     }
+//     @include m(transition-disabled) {
+//       & > {
+//         @include b(input) {
+//           input {
+//             transition: none;
+//           }
+//         }
+//       }
+//     }
+//   }
+//   @include b(time-picker-selector) {
+//     @include once {
+//       outline: none;
+//       font-size: 12px;
+//       border-radius: $--n-time-picker-border-radius;
+//       margin: 4px 0;
+//       min-width: 104px;
+//       overflow: hidden;
+//       transform: $--n-transform-debounce-scale;
+//       @include fade-in-scale-up-transition(time-picker);
+//       @include b(time-picker-selector-actions) {
+//         height: 38px;
+//         align-items: center;
+//         display: flex;
+//         justify-content: space-evenly;
+//         @include e(confirm) {
+//           @include m(disabled) {
+//             cursor: not-allowed;
+//             opacity: 0.5;
+//           }
+//         }
+//       }
+//     }
+//     background-color: $--time-picker-background-color;
+//     box-shadow: $--time-picker-box-shadow;
+//     @include b(time-picker-selector-time) {
+//       @include once {
+//         height: 224px;
+//         display: flex;
+//         position: relative;
+//       }
+//       border-bottom: 1px solid $--time-picker-divider-color;
+//     }
+//     @include b(time-picker-selector-time-row) {
+//       @include once {
+//         flex-grow: 1;
+//         min-width: 52px;
+//         height: 224px;
+//         flex-direction: column;
+//         transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
+//         @include m(transition-disabled) {
+//           @include e(item) {
+//             transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
+//           }
+//         }
+//       }
+//       @include e(item) {
+//         @include once {
+//           cursor: pointer;
+//           height: 32px;
+//           display: flex;
+//           align-items: center;
+//           justify-content: center;
+//           transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
+//           background: transparent; 
+//         }
+//         text-decoration-color: transparent;
+//         color: map-get($--time-picker-text-color, 'default');
+//         @include not-m(disabled) {
+//           &:hover {
+//             background-color:  map-get($--time-picker-item-background-color, 'hover');
+//           }
+//         }
+//         @include m(active) {
+//           background-color: map-get($--time-picker-item-background-color, 'hover');
+//           color: map-get($--time-picker-text-color, 'active');
+//         }
+//         @include m(disabled) {
+//           opacity: $--time-picker-item-disabled-opacity;
+//           @include once {
+//             cursor: not-allowed;
+//           }
+//         }
+//       }
+//       @include m(invalid) {
+//         @include e(item) {
+//           @include m(active) {
+//             @include once {
+//               text-decoration: line-through;
+//             }
+//             background-color: map-get($--time-picker-item-background-color, 'invalid');
+//             text-decoration-color: map-get($--time-picker-text-decoration-color, 'active');
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
diff --git a/src/_styles/index.scss b/src/_styles/index.scss
index be1aaf3b9..3936ebe5e 100644
--- a/src/_styles/index.scss
+++ b/src/_styles/index.scss
@@ -12,7 +12,5 @@
 @import './Popselect.scss';
 @import './Table.scss';
 @import './Tabs.scss';
-@import './TimePicker.scss';
-// @import './Timeline.scss';
 @import './Tooltip.scss';
 @import './Upload.scss';
\ No newline at end of file
diff --git a/src/date-picker/src/panel/datetime.vue b/src/date-picker/src/panel/datetime.vue
index 2b8475261..2a42fdd9e 100644
--- a/src/date-picker/src/panel/datetime.vue
+++ b/src/date-picker/src/panel/datetime.vue
@@ -146,7 +146,7 @@ import uniCalendarMixin from './uniCalendarMixin'
 import startOfSecond from 'date-fns/startOfSecond'
 
 import NButton from '../../../button'
-import NTimePicker from '../../../TimePicker'
+import NTimePicker from '../../../time-picker'
 import NInput from '../../../input'
 
 const DATETIME_FORMAT = 'yyyy-MM-dd HH:mm:ss'
diff --git a/src/date-picker/src/panel/datetimerange.vue b/src/date-picker/src/panel/datetimerange.vue
index 520812c80..83fc49505 100644
--- a/src/date-picker/src/panel/datetimerange.vue
+++ b/src/date-picker/src/panel/datetimerange.vue
@@ -263,7 +263,7 @@
 
 <script>
 import NButton from '../../../button'
-import NTimePicker from '../../../TimePicker'
+import NTimePicker from '../../../time-picker'
 import NInput from '../../../input'
 import dualCalendarMixin from './dualCalendarMixin'
 import NBaseIcon from '../../../_base/icon'
diff --git a/src/index.js b/src/index.js
index 66b86853a..6c08e0a5b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -61,7 +61,7 @@ import Tabs from './Tabs'
 import Tag from './tag'
 import Thing from './thing'
 import Time from './Time'
-import TimePicker from './TimePicker'
+import TimePicker from './time-picker'
 import Timeline from './timeline'
 import Tooltip from './Tooltip'
 import Transfer from './transfer'
@@ -182,6 +182,8 @@ import paginationLightStyle from './pagination/styles/light'
 import paginationDarkStyle from './pagination/styles/dark'
 import sliderLightStyle from './slider/styles/light'
 import sliderDarkStyle from './slider/styles/dark'
+import timePickerLightStyle from './time-picker/styles/light'
+import timePickerDarkStyle from './time-picker/styles/dark'
 import timelineLightStyle from './timeline/styles/light'
 import timelineDarkStyle from './timeline/styles/dark'
 
@@ -395,6 +397,8 @@ export default create({
     paginationDarkStyle,
     sliderLightStyle,
     sliderDarkStyle,
+    timePickerLightStyle,
+    timePickerDarkStyle,
     timelineLightStyle,
     timelineDarkStyle,
     // Can be remove after refactoring
diff --git a/src/time-picker/index.js b/src/time-picker/index.js
new file mode 100644
index 000000000..9e0d120ac
--- /dev/null
+++ b/src/time-picker/index.js
@@ -0,0 +1,8 @@
+/* istanbul ignore file */
+import Scaffold from './src/TimePicker.vue'
+
+Scaffold.install = function (Vue, naive) {
+  Vue.component(naive.componentPrefix + Scaffold.name, Scaffold)
+}
+
+export default Scaffold
diff --git a/src/TimePicker/src/main.vue b/src/time-picker/src/TimePicker.vue
similarity index 99%
rename from src/TimePicker/src/main.vue
rename to src/time-picker/src/TimePicker.vue
index df3896113..15e9b7b5f 100644
--- a/src/TimePicker/src/main.vue
+++ b/src/time-picker/src/TimePicker.vue
@@ -200,6 +200,8 @@ import keyboardDelegate from '../../_utils/delegate/keyboardDelegate'
 import { KEY_CODE } from '../../_utils/event/keyCode'
 import NBaseFocusDetector from '../../_base/focus-detector'
 import timeOutline from '../../_icons/time-outline'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'
 
 const DEFAULT_FORMAT = 'HH:mm:ss'
 
@@ -212,7 +214,7 @@ const TIME_CONST = {
 }
 
 export default {
-  name: 'NTimePicker',
+  name: 'TimePicker',
   components: {
     NInput,
     NIcon,
@@ -230,7 +232,8 @@ export default {
     placeable,
     zindexable,
     locale('TimePicker'),
-    asformitem()
+    asformitem(),
+    usecssr(styles)
   ],
   model: {
     prop: 'value',
diff --git a/src/time-picker/src/styles/index.js b/src/time-picker/src/styles/index.js
new file mode 100644
index 000000000..3b04bf0e9
--- /dev/null
+++ b/src/time-picker/src/styles/index.js
@@ -0,0 +1,11 @@
+import themedBaseStyle from './themed-base.cssr.js'
+
+export default [
+  {
+    key: 'syntheticTheme',
+    watch: [
+      'syntheticTheme'
+    ],
+    CNode: themedBaseStyle
+  }
+]
diff --git a/src/time-picker/src/styles/themed-base.cssr.js b/src/time-picker/src/styles/themed-base.cssr.js
new file mode 100644
index 000000000..c73a6e076
--- /dev/null
+++ b/src/time-picker/src/styles/themed-base.cssr.js
@@ -0,0 +1,154 @@
+import { c, cE, cM, cTB, cB, cNotM } from '../../../_utils/cssr'
+import fadeInScaleUpTransition from '../../../styles/_transitions/fade-in-scale-up'
+
+export default c([
+  ({ props }) => {
+    const {
+      color,
+      textColor,
+      textColorActive,
+      textDecorationColor,
+      textDecorationColorActive,
+      itemColorHover,
+      dividerColor,
+      boxShadow,
+      itemDisabledOpacity,
+      borderRadius,
+      transformDebounceScale
+    } = props.$local
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    return [cTB('time-picker', {
+      raw: `
+        position: relative;
+        display: inline-block;
+      `
+    }, [
+      cM('invalid', [
+        cB('input', [
+          cE('input', {
+            raw: `
+                text-decoration: line-through;
+                text-decoration-color: ${textDecorationColor};
+              `
+          })
+        ])
+      ]),
+      cM('transition-disabled', [
+        cB('input', [
+          c('input', {
+            raw: `
+                transition: none;
+              `
+          })
+        ])
+      ])
+    ]),
+    cB('time-picker-selector', {
+      raw: `
+        outline: none;
+        font-size: 12px;
+        border-radius: ${borderRadius};
+        margin: 4px 0;
+        min-width: 104px;
+        overflow: hidden;
+        transform: ${transformDebounceScale};
+        background-color: ${color};
+        box-shadow: ${boxShadow};
+      `
+    }, [
+      fadeInScaleUpTransition(),
+      cB('time-picker-selector-actions', {
+        raw: `
+          height: 38px;
+          align-items: center;
+          display: flex;
+          justify-content: space-evenly;
+        `
+      }, [
+        cE('confirm', [
+          cM('disabled', {
+            raw: `
+              cursor: not-allowed;
+              opacity: 0.5;
+            `
+          })
+        ])
+      ]),
+      cB('time-picker-selector-time', {
+        raw: `
+          height: 224px;
+          display: flex;
+          position: relative;
+          border-bottom: 1px solid ${dividerColor};
+        `
+      }),
+      cB('time-picker-selector-time-row', {
+        raw: `
+          flex-grow: 1;
+          min-width: 52px;
+          height: 224px;
+          flex-direction: column;
+          transition: box-shadow .3s ${easeInOutCubicBezier};
+        `
+      }, [
+        cM('transition-disabled', [
+          cE('item', {
+            raw: `
+              transition: background-color .3s ${easeInOutCubicBezier}, opacity .3s ${easeInOutCubicBezier};
+            `
+          })
+        ]),
+        cE('item', {
+          raw: `
+            cursor: pointer;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: 
+              color .3s ${easeInOutCubicBezier},
+              background-color .3s ${easeInOutCubicBezier},
+              opacity .3s ${easeInOutCubicBezier},
+              text-decoration-color .3s ${easeInOutCubicBezier};
+            background: transparent;
+            text-decoration-color: transparent;
+            color: ${textColor};
+          `
+        }, [
+          cNotM('disabled', [
+            c('&:hover', {
+              raw: `
+                background-color:  ${itemColorHover};
+              `
+            })
+          ]),
+          cM('active', {
+            raw: `
+              background-color: ${itemColorHover};
+              color: ${textColorActive};
+            `
+          }),
+          cM('disabled', {
+            raw: `
+              opacity: ${itemDisabledOpacity};
+              cursor: not-allowed;
+            `
+          })
+        ]),
+        cM('invalid', [
+          cE('item', [
+            cM('active', {
+              raw: `
+                text-decoration: line-through;
+                text-decoration-color: ${textDecorationColorActive};
+              `
+            })
+          ])
+        ])
+      ])
+    ])
+    ]
+  }
+])
diff --git a/src/time-picker/styles/dark.js b/src/time-picker/styles/dark.js
new file mode 100644
index 000000000..74adc273e
--- /dev/null
+++ b/src/time-picker/styles/dark.js
@@ -0,0 +1,34 @@
+import create from '../../styles/_utils/create-component-base'
+
+export default create({
+  theme: 'dark',
+  name: 'TimePicker',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      popoverBackgroundColor,
+      secondaryTextOverlayColor,
+      primaryColor,
+      pendingBackgroundOverlayColor,
+      dividerOverlayColor,
+      disabledOpacity
+    } = derived
+    const {
+      popmenuBoxShadow,
+      borderRadius,
+      transformDebounceScale
+    } = base
+    return {
+      color: popoverBackgroundColor,
+      textColor: secondaryTextOverlayColor,
+      textColorActive: primaryColor,
+      textDecorationColor: secondaryTextOverlayColor,
+      textDecorationColorActive: primaryColor,
+      itemColorHover: pendingBackgroundOverlayColor,
+      dividerColor: dividerOverlayColor,
+      boxShadow: popmenuBoxShadow,
+      itemDisabledOpacity: disabledOpacity,
+      borderRadius,
+      transformDebounceScale
+    }
+  }
+})
diff --git a/src/time-picker/styles/light.js b/src/time-picker/styles/light.js
new file mode 100644
index 000000000..2b8530718
--- /dev/null
+++ b/src/time-picker/styles/light.js
@@ -0,0 +1,34 @@
+import create from '../../styles/_utils/create-component-base'
+
+export default create({
+  theme: 'light',
+  name: 'TimePicker',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      modalBackgroundColor,
+      secondaryTextOverlayColor,
+      primaryColor,
+      pendingBackgroundOverlayColor,
+      dividerOverlayColor,
+      disabledOpacity
+    } = derived
+    const {
+      popmenuBoxShadow,
+      borderRadius,
+      transformDebounceScale
+    } = base
+    return {
+      color: modalBackgroundColor,
+      textColor: secondaryTextOverlayColor,
+      textColorActive: primaryColor,
+      textDecorationColor: secondaryTextOverlayColor,
+      textDecorationColorActive: primaryColor,
+      itemColorHover: pendingBackgroundOverlayColor,
+      dividerColor: dividerOverlayColor,
+      boxShadow: popmenuBoxShadow,
+      itemDisabledOpacity: disabledOpacity,
+      borderRadius,
+      transformDebounceScale
+    }
+  }
+})