diff --git a/src/create.js b/src/create.js
index 1b0c99c00..a736ec186 100644
--- a/src/create.js
+++ b/src/create.js
@@ -25,7 +25,8 @@ function create ({
   fallbackLocale,
   hljs,
   styleSchemes,
-  fallbackTheme
+  fallbackTheme,
+  _themes
 }) {
   const installTargets = []
   const naive = {
@@ -33,10 +34,11 @@ function create ({
     fallbackLocale: fallbackLocale || locales[0],
     hljs,
     styleSchemes: styleSchemes || null,
+    _themes: _themes || null,
     fallbackTheme: fallbackTheme || 'light',
     setHljs,
     setHighlightjs: setHljs,
-    setStyleSchemes: (schemes) => {
+    setStyleSchemes: schemes => {
       naive.styleSchemes = mergeStyleSchemes(
         naive.styleSchemes, schemes
       )
diff --git a/src/index.js b/src/index.js
index 3acab4682..9b0a31c59 100644
--- a/src/index.js
+++ b/src/index.js
@@ -71,6 +71,11 @@ import enUS from './locale/enUS'
 import lightScheme from './_styles-in-js/lightStyleScheme.scss'
 import darkScheme from './_styles-in-js/darkStyleScheme.scss'
 
+import lightBaseStyle from './styles/light/base'
+import darkBaseStyle from './styles/dark/base'
+import lightButtonStyle from './styles/light/Button'
+import darkButtonStyle from './styles/dark/Button'
+
 // Deprecated Components
 import NimbusFormCard from './_deprecated/NimbusFormCard'
 import NimbusConfirmCard from './_deprecated/NimbusConfirmCard'
@@ -159,5 +164,15 @@ export default create({
     light: lightScheme,
     dark: darkScheme
   },
-  fallbackTheme: 'light'
+  fallbackTheme: 'light',
+  _themes: {
+    light: {
+      base: lightBaseStyle,
+      NButton: lightButtonStyle
+    },
+    dark: {
+      base: darkBaseStyle,
+      NButton: darkButtonStyle
+    }
+  }
 })
diff --git a/src/styles/dark/Button.js b/src/styles/dark/Button.js
index cc0e4b07a..6a6bf8ec0 100644
--- a/src/styles/dark/Button.js
+++ b/src/styles/dark/Button.js
@@ -1,9 +1,73 @@
 import create from '../utils/create-component-base'
 
 export default create({
-  getDerivedVariables ({ base, derived }) {
+  getDerivedVariables ({ derived }) {
     return {
+      default: {
+        color: 'transparent',
+        hoverColor: 'transparent',
+        activeColor: 'transparent',
+        focusColor: 'transparent',
 
+        textColor: derived.secondaryTextColor,
+        hoverTextColor: derived.primaryHoverColor,
+        activeTextColor: derived.primaryActiveColor,
+        focusTextColor: derived.primaryHoverColor,
+
+        textTypedTextColor: derived.secondaryTextColor,
+        textTypedHoverTextColor: derived.primaryHoverColor,
+        textTypedActiveTextColor: derived.primaryActiveColor,
+        textTypedFocusTextColor: derived.primaryHoverColor,
+
+        ghostTypedTextColor: derived.secondaryTextColor,
+        ghostTypedHoverTextColor: derived.primaryHoverColor,
+        ghostTypedActiveTextColor: derived.primaryActiveColor,
+        ghostTypedFocusTextColor: derived.primaryHoverColor,
+
+        borderColor: derived.borderColor,
+        hoverBorderColor: derived.primaryHoverColor,
+        activeBorderColor: derived.primaryActiveColor,
+        focusBorderColor: derived.primaryHoverColor,
+
+        rippleColor: derived.primaryColor,
+
+        iconColor: derived.tertiaryTextColor
+      },
+      primary: {
+        color: derived.primaryColor,
+        hoverColor: derived.primaryHoverColor,
+        activeColor: derived.primaryActiveColor,
+        focusColor: derived.primaryHoverColor,
+        textColor: derived.baseBackgroundColor
+      },
+      info: {
+        color: derived.infoColor,
+        hoverColor: derived.infoHoverColor,
+        activeColor: derived.infoActiveColor,
+        focusColor: derived.infoHoverColor,
+        textColor: derived.baseBackgroundColor
+      },
+      success: {
+        color: derived.successColor,
+        hoverColor: derived.successHoverColor,
+        activeColor: derived.successActiveColor,
+        focusColor: derived.successHoverColor,
+        textColor: derived.baseBackgroundColor
+      },
+      warning: {
+        color: derived.warningColor,
+        hoverColor: derived.warningHoverColor,
+        activeColor: derived.warningActiveColor,
+        focusColor: derived.warningHoverColor,
+        textColor: derived.baseBackgroundColor
+      },
+      error: {
+        color: derived.errorColor,
+        hoverColor: derived.errorHoverColor,
+        activeColor: derived.errorActiveColor,
+        focusColor: derived.errorHoverColor,
+        textColor: derived.baseBackgroundColor
+      }
     }
   }
 })
diff --git a/src/styles/light/Button.js b/src/styles/light/Button.js
index cc0e4b07a..6a6bf8ec0 100644
--- a/src/styles/light/Button.js
+++ b/src/styles/light/Button.js
@@ -1,9 +1,73 @@
 import create from '../utils/create-component-base'
 
 export default create({
-  getDerivedVariables ({ base, derived }) {
+  getDerivedVariables ({ derived }) {
     return {
+      default: {
+        color: 'transparent',
+        hoverColor: 'transparent',
+        activeColor: 'transparent',
+        focusColor: 'transparent',
 
+        textColor: derived.secondaryTextColor,
+        hoverTextColor: derived.primaryHoverColor,
+        activeTextColor: derived.primaryActiveColor,
+        focusTextColor: derived.primaryHoverColor,
+
+        textTypedTextColor: derived.secondaryTextColor,
+        textTypedHoverTextColor: derived.primaryHoverColor,
+        textTypedActiveTextColor: derived.primaryActiveColor,
+        textTypedFocusTextColor: derived.primaryHoverColor,
+
+        ghostTypedTextColor: derived.secondaryTextColor,
+        ghostTypedHoverTextColor: derived.primaryHoverColor,
+        ghostTypedActiveTextColor: derived.primaryActiveColor,
+        ghostTypedFocusTextColor: derived.primaryHoverColor,
+
+        borderColor: derived.borderColor,
+        hoverBorderColor: derived.primaryHoverColor,
+        activeBorderColor: derived.primaryActiveColor,
+        focusBorderColor: derived.primaryHoverColor,
+
+        rippleColor: derived.primaryColor,
+
+        iconColor: derived.tertiaryTextColor
+      },
+      primary: {
+        color: derived.primaryColor,
+        hoverColor: derived.primaryHoverColor,
+        activeColor: derived.primaryActiveColor,
+        focusColor: derived.primaryHoverColor,
+        textColor: derived.baseBackgroundColor
+      },
+      info: {
+        color: derived.infoColor,
+        hoverColor: derived.infoHoverColor,
+        activeColor: derived.infoActiveColor,
+        focusColor: derived.infoHoverColor,
+        textColor: derived.baseBackgroundColor
+      },
+      success: {
+        color: derived.successColor,
+        hoverColor: derived.successHoverColor,
+        activeColor: derived.successActiveColor,
+        focusColor: derived.successHoverColor,
+        textColor: derived.baseBackgroundColor
+      },
+      warning: {
+        color: derived.warningColor,
+        hoverColor: derived.warningHoverColor,
+        activeColor: derived.warningActiveColor,
+        focusColor: derived.warningHoverColor,
+        textColor: derived.baseBackgroundColor
+      },
+      error: {
+        color: derived.errorColor,
+        hoverColor: derived.errorHoverColor,
+        activeColor: derived.errorActiveColor,
+        focusColor: derived.errorHoverColor,
+        textColor: derived.baseBackgroundColor
+      }
     }
   }
 })