diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
index 4601b95bf..f911a6465 100644
--- a/src/components/Button/button.module.scss
+++ b/src/components/Button/button.module.scss
@@ -1,4 +1,31 @@
 .button {
+    --button-default-foreground-color: var(--primary-color-70);
+    --button-hover-foreground-color: var(--primary-color-70);
+    --button-focus-foreground-color: var(--primary-color-80);
+    --button-active-foreground-color: var(--primary-color-80);
+    --button-visited-foreground-color: var(--primary-color-80);
+    --button-default-outline-color: var(--primary-color-70);
+    --button-hover-outline-color: var(--primary-color-60);
+    --button-focus-outline-color: var(--primary-color-80);
+    --button-active-outline-color: var(--primary-color-80);
+    --button-visited-outline-color: var(--primary-color-80);
+    --button-primary-default-background-color: var(--primary-color-70);
+    --button-primary-hover-background-color: var(--primary-color-60);
+    --button-primary-focus-background-color: var(--primary-color-80);
+    --button-primary-active-background-color: var(--primary-color-80);
+    --button-primary-visited-background-color: var(--primary-color-80);
+    --button-primary-default-border-color: var(--primary-color-70);
+    --button-primary-hover-border-color: var(--primary-color-60);
+    --button-primary-focus-border-color: var(--primary-color-80);
+    --button-primary-active-border-color: var(--primary-color-80);
+    --button-primary-visited-border-color: var(--primary-color-80);
+    --button-default-background-color: var(--white-color);
+    --button-hover-background-color: var(--primary-color-10);
+    --button-focus-background-color: var(--primary-color-10);
+    --button-active-background-color: var(--primary-color-10);
+    --button-visited-background-color: var(--primary-color-10);
+    --button-hover-variant-background-color: var(--primary-color-20);
+    --text-color: var(--text-inverse-color);
     background-color: inherit;
     border: 2px solid rgba(var(--button-primary-default-border-color), 0.01);
     border-radius: $corner-radius-s;
@@ -118,18 +145,18 @@
 .button-primary {
     background-color: var(--button-primary-default-background-color);
     border-color: var(--button-primary-default-border-color);
-    color: var(--button-primary-default-foreground-color);
+    color: var(--text-color);
 
     &:hover {
         background-color: var(--button-primary-hover-background-color);
         border-color: var(--button-primary-hover-border-color);
-        color: var(--button-primary-hover-foreground-color);
+        color: var(--text-color);
     }
 
     &:active {
         background-color: var(--button-primary-active-background-color);
         border-color: var(--button-primary-active-border-color);
-        color: var(--button-primary-active-foreground-color);
+        color: var(--text-color);
     }
 
     &:focus-visible {
@@ -165,7 +192,7 @@
 .button-primary-disruptive {
     background-color: var(--disruptive-color-70);
     border-color: var(--disruptive-color-70);
-    color: var(--white-color);
+    color: var(--text-inverse-color);
 
     &:hover {
         background-color: var(--disruptive-color-60);
@@ -257,25 +284,25 @@
 
 .button-neutral {
     background-color: var(--white-color);
-    color: var(--button-neutral-default-foreground-color);
+    color: var(--text-secondary-color);
     outline: transparent solid 2px;
     outline-offset: -2px;
 
     &:hover {
         background-color: var(--grey-color-20);
-        color: var(--button-neutral-hover-foreground-color);
+        color: var(--text-secondary-color);
         outline-color: var(--grey-color-20);
     }
 
     &:active {
         background-color: var(--grey-color-10);
-        color: var(--button-neutral-active-foreground-color);
+        color: var(--text-secondary-color);
         outline-color: var(--grey-color-10);
     }
 
     &:focus-visible {
         background-color: var(--grey-color-10);
-        color: var(--button-neutral-active-foreground-color);
+        color: var(--text-secondary-color);
         outline-color: var(--grey-color-80);
     }
 }
@@ -288,7 +315,7 @@
         width: 1px;
 
         &.split-divider-primary {
-            background-color: var(--button-primary-default-foreground-color);
+            background-color: var(--button-default-foreground-color);
         }
 
         &.split-divider-secondary {
@@ -312,7 +339,7 @@
         }
 
         &.split-divider-neutral {
-            background-color: var(--button-neutral-default-foreground-color);
+            background-color: var(--button-default-foreground-color);
         }
     }
 
diff --git a/src/components/ConfigProvider/ConfigProvider.tsx b/src/components/ConfigProvider/ConfigProvider.tsx
index b1ed7b2c5..cc5a54efb 100644
--- a/src/components/ConfigProvider/ConfigProvider.tsx
+++ b/src/components/ConfigProvider/ConfigProvider.tsx
@@ -1,12 +1,13 @@
 import React, { createContext, FC, useEffect, useState } from 'react';
 import { registerTheme } from './Theming/styleGenerator';
 import { ConfigProviderProps, IConfigContext } from './ConfigProvider.types';
-import { ThemeOptions } from './Theming';
+import { IRegisterTheme, ThemeOptions } from './Theming';
 import { useFontSize } from '../../hooks/useFontSize';
 
 const ConfigContext = createContext<Partial<IConfigContext>>({});
 
 const DEFAULT_THEME = 'blue';
+const DEFAULT_FONT_SIZE = 16;
 
 const ConfigProvider: FC<ConfigProviderProps> = ({
     children,
@@ -14,18 +15,25 @@ const ConfigProvider: FC<ConfigProviderProps> = ({
 }) => {
     const [themeOptions, setThemeOptions] =
         useState<ThemeOptions>(defaultThemeOptions);
+
+    const [registeredTheme, setRegisteredTheme] = useState<IRegisterTheme>(
+        {} as IRegisterTheme
+    );
+
     const [fontSize, setFontSize] = useFontSize({
         variableName: '--font-size',
     });
 
     useEffect(() => {
         if (themeOptions) {
-            registerTheme({
-                name: DEFAULT_THEME,
-                ...themeOptions,
-            });
+            setRegisteredTheme(
+                registerTheme({
+                    name: DEFAULT_THEME,
+                    ...themeOptions,
+                })
+            );
         }
-        setFontSize(16);
+        setFontSize(DEFAULT_FONT_SIZE);
     }, [themeOptions]);
 
     return (
@@ -33,6 +41,7 @@ const ConfigProvider: FC<ConfigProviderProps> = ({
             value={{
                 themeOptions,
                 setThemeOptions,
+                registeredTheme,
             }}
         >
             <div className={`theme-${themeOptions.name}`}>{children}</div>
diff --git a/src/components/ConfigProvider/ConfigProvider.types.ts b/src/components/ConfigProvider/ConfigProvider.types.ts
index f9f85287b..7c8ade385 100644
--- a/src/components/ConfigProvider/ConfigProvider.types.ts
+++ b/src/components/ConfigProvider/ConfigProvider.types.ts
@@ -1,8 +1,9 @@
-import { ThemeOptions } from './Theming';
+import { IRegisterTheme, ThemeOptions } from './Theming';
 
 export interface IConfigContext {
     themeOptions: ThemeOptions;
     setThemeOptions: (themeOptions: ThemeOptions) => void;
+    registeredTheme?: IRegisterTheme;
 }
 
 export interface ConfigProviderProps {
diff --git a/src/components/ConfigProvider/Theming/Theming.types.ts b/src/components/ConfigProvider/Theming/Theming.types.ts
index 2e1a6eafe..72de6d3bb 100644
--- a/src/components/ConfigProvider/Theming/Theming.types.ts
+++ b/src/components/ConfigProvider/Theming/Theming.types.ts
@@ -25,32 +25,6 @@ export interface OcBaseTheme {
     warningColor?: Color;
     infoColor?: Color;
     errorColor?: Color;
-    buttonDefaultForegroundColor?: Color;
-    buttonHoverForegroundColor?: Color;
-    buttonFocusForegroundColor?: Color;
-    buttonActiveForegroundColor?: Color;
-    buttonVisitedForegroundColor?: Color;
-    buttonDefaultOutlineColor?: Color;
-    buttonHoverOutlineColor?: Color;
-    buttonFocusOutlineColor?: Color;
-    buttonActiveOutlineColor?: Color;
-    buttonVisitedOutlineColor?: Color;
-    buttonPrimaryDefaultBackgroundColor?: Color;
-    buttonPrimaryHoverBackgroundColor?: Color;
-    buttonPrimaryFocusBackgroundColor?: Color;
-    buttonPrimaryActiveBackgroundColor?: Color;
-    buttonPrimaryVisitedBackgroundColor?: Color;
-    buttonPrimaryDefaultBorderColor?: Color;
-    buttonPrimaryHoverBorderColor?: Color;
-    buttonPrimaryFocusBorderColor?: Color;
-    buttonPrimaryActiveBorderColor?: Color;
-    buttonPrimaryVisitedBorderColor?: Color;
-    buttonDefaultBackgroundColor?: Color;
-    buttonHoverBackgroundColor?: Color;
-    buttonFocusBackgroundColor?: Color;
-    buttonActiveBackgroundColor?: Color;
-    buttonVisitedBackgroundColor?: Color;
-    buttonHoverVariantBackgroundColor?: Color;
 }
 
 export interface OcTheme extends OcBaseTheme {
@@ -80,3 +54,15 @@ export interface ThemeOptions {
      */
     customTheme?: OcBaseTheme;
 }
+
+export type Variables = Record<string, Color>;
+
+export interface IGetStyle {
+    themeName: ThemeName;
+    light: boolean;
+    variables: Variables;
+}
+
+export interface IRegisterTheme extends IGetStyle {
+    styleNode: HTMLStyleElement;
+}
diff --git a/src/components/ConfigProvider/Theming/styleGenerator.ts b/src/components/ConfigProvider/Theming/styleGenerator.ts
index 3b7a3d13e..b9ed1a698 100644
--- a/src/components/ConfigProvider/Theming/styleGenerator.ts
+++ b/src/components/ConfigProvider/Theming/styleGenerator.ts
@@ -1,12 +1,15 @@
 import {
+    IGetStyle,
+    IRegisterTheme,
     OcTheme,
     OcThemeNames,
     ThemeName,
     ThemeOptions,
+    Variables,
 } from './Theming.types';
-import { TinyColor, isReadable } from '@ctrl/tinycolor';
+import { TinyColor } from '@ctrl/tinycolor';
 import generate from './generate';
-import OcThemes from './themes';
+import OcThemes, { themeDefaults } from './themes';
 
 const THEME_CONTAINER_ID = 'octuple-theme';
 
@@ -17,8 +20,8 @@ interface Options {
     mark?: string;
 }
 
-export function getStyle(themeOptions: ThemeOptions): string {
-    const variables: Record<string, string> = {};
+export function getStyle(themeOptions: ThemeOptions): IGetStyle {
+    const variables: Variables = {};
 
     const fillColor = (
         colorPalettes: string[],
@@ -39,6 +42,7 @@ export function getStyle(themeOptions: ThemeOptions): string {
     const themeName: ThemeName = themeOptions.name;
 
     const theme: OcTheme = {
+        ...themeDefaults,
         ...OcThemes?.[themeOptions.name as OcThemeNames],
         ...themeOptions.customTheme,
     };
@@ -49,363 +53,10 @@ export function getStyle(themeOptions: ThemeOptions): string {
         variables[`primary-color`] = theme.primaryColor;
     }
 
-    const themePrimaryColor: TinyColor = new TinyColor(theme.primaryColor);
-    const whiteHex: string = '#fff';
-    const blackHex: string = '#000';
-    const grey80Hex: string = '#343c4c';
-
-    // ================ Button Foreground Colors ================
-    if (theme.buttonPrimaryDefaultBackgroundColor) {
-        variables[`button-primary-default-background-color`] =
-            themePrimaryColor.toString();
-    }
-
-    if (theme.buttonPrimaryHoverBackgroundColor) {
-        variables[`button-primary-hover-background-color`] = themePrimaryColor
-            .lighten(10)
-            .toString();
-    }
-
-    if (theme.buttonPrimaryFocusBackgroundColor) {
-        variables[`button-primary-focus-background-color`] = themePrimaryColor
-            .lighten(10)
-            .toString();
-    }
-
-    if (theme.buttonPrimaryActiveBackgroundColor) {
-        variables[`button-primary-active-background-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-    }
-
-    if (theme.buttonPrimaryVisitedBackgroundColor) {
-        variables[`button-primary-visited-background-color`] = themePrimaryColor
-            .lighten(10)
-            .toString();
-    }
-
-    if (theme.buttonPrimaryDefaultBorderColor) {
-        variables[`button-primary-default-border-color`] =
-            themePrimaryColor.toString();
-    }
-
-    if (theme.buttonPrimaryHoverBorderColor) {
-        variables[`button-primary-hover-border-color`] = themePrimaryColor
-            .lighten(5)
-            .toString();
-    }
-
-    if (theme.buttonPrimaryFocusBorderColor) {
-        variables[`button-primary-focus-border-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-    }
-
-    if (theme.buttonPrimaryActiveBorderColor) {
-        variables[`button-primary-active-border-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-    }
-
-    if (theme.buttonPrimaryVisitedBorderColor) {
-        variables[`button-primary-visited-border-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-    }
-
-    if (theme.buttonDefaultForegroundColor) {
-        variables[`button-default-foreground-color`] =
-            themePrimaryColor.toString();
-    }
-
-    if (theme.buttonHoverForegroundColor) {
-        variables[`button-hover-foreground-color`] =
-            themePrimaryColor.toString();
-    }
-
-    if (theme.buttonFocusForegroundColor) {
-        variables[`button-focus-foreground-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-    }
-
-    if (theme.buttonActiveForegroundColor) {
-        variables[`button-active-foreground-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-    }
-
-    if (theme.buttonVisitedForegroundColor) {
-        variables[`button-visited-foreground-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-    }
-
-    if (theme.buttonDefaultBackgroundColor) {
-        variables[`button-default-background-color`] = whiteHex;
-    }
-
-    if (theme.buttonHoverBackgroundColor) {
-        variables[`button-hover-background-color`] = themePrimaryColor
-            .lighten(60)
-            .toString();
-    }
-
-    if (theme.buttonHoverVariantBackgroundColor) {
-        variables[`button-hover-variant-background-color`] = themePrimaryColor
-            .lighten(50)
-            .toString();
-    }
-
-    if (theme.buttonFocusBackgroundColor) {
-        variables[`button-focus-background-color`] = themePrimaryColor
-            .lighten(60)
-            .toString();
-    }
-
-    if (theme.buttonActiveBackgroundColor) {
-        variables[`button-active-background-color`] = themePrimaryColor
-            .lighten(60)
-            .toString();
-    }
-
-    if (theme.buttonVisitedBackgroundColor) {
-        variables[`button-visited-background-color`] = themePrimaryColor
-            .lighten(60)
-            .toString();
-    }
-
-    if (theme.buttonDefaultOutlineColor) {
-        variables[`button-default-outline-color`] =
-            themePrimaryColor.toString();
-    }
-
-    if (theme.buttonHoverOutlineColor) {
-        variables[`button-hover-outline-color`] = themePrimaryColor
-            .lighten(10)
-            .toString();
-    }
-
-    if (theme.buttonFocusOutlineColor) {
-        variables[`button-focus-outline-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-    }
-
-    if (theme.buttonActiveOutlineColor) {
-        variables[`button-active-outline-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-    }
-
-    if (theme.buttonVisitedOutlineColor) {
-        variables[`button-visited-outline-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-    }
-
     // ================ Custom primary palette ================
     if (themeOptions.customTheme?.primaryColor) {
         generatePalette(theme.primaryColor, 'primary-color');
         variables[`primary-color`] = theme.primaryColor;
-
-        // Sets the defaults using custom theme
-        variables[`button-primary-default-background-color`] =
-            themePrimaryColor.toString();
-        variables[`button-primary-hover-background-color`] = themePrimaryColor
-            .lighten(10)
-            .toString();
-        variables[`button-primary-focus-background-color`] = themePrimaryColor
-            .lighten(10)
-            .toString();
-        variables[`button-primary-active-background-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-        variables[`button-primary-visited-background-color`] = themePrimaryColor
-            .lighten(10)
-            .toString();
-
-        variables[`button-primary-default-border-color`] =
-            themePrimaryColor.toString();
-        variables[`button-primary-hover-border-color`] = themePrimaryColor
-            .lighten(5)
-            .toString();
-        variables[`button-primary-focus-border-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-        variables[`button-primary-active-border-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-        variables[`button-primary-visited-border-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-
-        variables[`button-default-foreground-color`] =
-            themePrimaryColor.toString();
-        variables[`button-hover-foreground-color`] =
-            themePrimaryColor.toString();
-        variables[`button-focus-foreground-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-        variables[`button-active-foreground-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-        variables[`button-visited-foreground-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-
-        variables[`button-default-background-color`] = whiteHex;
-        variables[`button-hover-background-color`] = themePrimaryColor
-            .lighten(60)
-            .toString();
-        variables[`button-hover-variant-background-color`] = themePrimaryColor
-            .lighten(50)
-            .toString();
-        variables[`button-focus-background-color`] = themePrimaryColor
-            .lighten(60)
-            .toString();
-        variables[`button-active-background-color`] = themePrimaryColor
-            .lighten(60)
-            .toString();
-        variables[`button-visited-background-color`] = themePrimaryColor
-            .lighten(60)
-            .toString();
-
-        variables[`button-default-outline-color`] =
-            themePrimaryColor.toString();
-        variables[`button-hover-outline-color`] = themePrimaryColor
-            .lighten(10)
-            .toString();
-        variables[`button-focus-outline-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-        variables[`button-active-outline-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-        variables[`button-visited-outline-color`] = themePrimaryColor
-            .darken(10)
-            .toString();
-
-        // Make adjustments for dark theme colors
-        if (themePrimaryColor.isDark()) {
-            variables[`button-primary-default-foreground-color`] = whiteHex;
-            variables[`button-primary-hover-foreground-color`] = whiteHex;
-            variables[`button-primary-focus-foreground-color`] = whiteHex;
-            variables[`button-primary-active-foreground-color`] = whiteHex;
-            variables[`button-primary-visited-foreground-color`] = whiteHex;
-
-            variables[`button-default-foreground-color`] =
-                themePrimaryColor.toString();
-            variables[`button-hover-foreground-color`] =
-                themePrimaryColor.toString();
-            variables[`button-focus-foreground-color`] =
-                themePrimaryColor.toString();
-            variables[`button-active-foreground-color`] =
-                themePrimaryColor.toString();
-            variables[`button-visited-foreground-color`] =
-                themePrimaryColor.toString();
-
-            variables[`button-default-outline-color`] =
-                themePrimaryColor.toString();
-            variables[`button-hover-outline-color`] = themePrimaryColor
-                .lighten(10)
-                .toString();
-            variables[`button-focus-outline-color`] = themePrimaryColor
-                .lighten(5)
-                .toString();
-            variables[`button-active-outline-color`] = themePrimaryColor
-                .lighten(5)
-                .toString();
-            variables[`button-visited-outline-color`] = themePrimaryColor
-                .lighten(5)
-                .toString();
-
-            // Make adjustments for light theme colors with unreadable text
-        } else if (
-            themePrimaryColor.isLight() &&
-            !isReadable(whiteHex, themePrimaryColor)
-        ) {
-            if (themePrimaryColor.equals('#ffffff')) {
-                const blackColor: TinyColor = new TinyColor(blackHex);
-
-                variables[`button-primary-default-foreground-color`] = whiteHex;
-                variables[`button-primary-hover-foreground-color`] = whiteHex;
-                variables[`button-primary-focus-foreground-color`] = whiteHex;
-                variables[`button-primary-active-foreground-color`] = blackHex;
-                variables[`button-primary-visited-foreground-color`] = blackHex;
-
-                variables[`button-primary-default-background-color`] = blackHex;
-                variables[`button-primary-hover-background-color`] = blackColor
-                    .lighten(60)
-                    .toString();
-                variables[`button-primary-focus-background-color`] = blackColor
-                    .lighten(80)
-                    .toString();
-                variables[`button-primary-active-background-color`] = blackColor
-                    .lighten(80)
-                    .toString();
-                variables[`button-primary-visited-background-color`] =
-                    blackColor.lighten(80).toString();
-
-                variables[`button-primary-default-border-color`] = blackHex;
-                variables[`button-primary-hover-border-color`] = blackColor
-                    .lighten(60)
-                    .toString();
-                variables[`button-primary-focus-border-color`] = blackColor
-                    .lighten(80)
-                    .toString();
-                variables[`button-primary-active-border-color`] = blackColor
-                    .lighten(80)
-                    .toString();
-                variables[`button-primary-visited-border-color`] = blackColor
-                    .lighten(80)
-                    .toString();
-
-                variables[`button-default-foreground-color`] = blackHex;
-                variables[`button-hover-foreground-color`] = blackHex;
-                variables[`button-focus-foreground-color`] = blackHex;
-                variables[`button-active-foreground-color`] = blackHex;
-                variables[`button-visited-foreground-color`] = blackHex;
-
-                variables[`button-default-background-color`] = whiteHex;
-                variables[`button-hover-background-color`] = blackColor
-                    .lighten(90)
-                    .toString();
-                variables[`button-focus-background-color`] = blackColor
-                    .lighten(90)
-                    .toString();
-                variables[`button-active-background-color`] = blackColor
-                    .lighten(90)
-                    .toString();
-                variables[`button-visited-background-color`] = blackColor
-                    .lighten(90)
-                    .toString();
-
-                variables[`button-hover-variant-background-color`] = blackColor
-                    .lighten(70)
-                    .toString();
-
-                variables[`button-default-outline-color`] = blackHex;
-                variables[`button-hover-outline-color`] = blackColor
-                    .lighten(60)
-                    .toString();
-                variables[`button-focus-outline-color`] = blackHex;
-                variables[`button-active-outline-color`] = blackHex;
-                variables[`button-visited-outline-color`] = blackHex;
-            } else {
-                variables[`button-primary-default-foreground-color`] = blackHex;
-                variables[`button-primary-hover-foreground-color`] = blackHex;
-
-                variables[`button-primary-default-border-color`] =
-                    themePrimaryColor.toString();
-
-                variables[`button-default-foreground-color`] = blackHex;
-                variables[`button-hover-foreground-color`] = blackHex;
-                variables[`button-focus-foreground-color`] = blackHex;
-                variables[`button-active-foreground-color`] = blackHex;
-                variables[`button-visited-foreground-color`] = blackHex;
-            }
-        }
     }
 
     // ================ Disruptive palette ================
@@ -422,9 +73,13 @@ export function getStyle(themeOptions: ThemeOptions): string {
         variables[`background-color`] = theme.backgroundColor;
     }
 
+    const themePrimaryColor: TinyColor = new TinyColor(theme.primaryColor);
+
     // ================ Text Color ================
     if (theme.textColor) {
-        variables[`text-primary-color`] = theme.textColor;
+        variables[`text-primary-color`] = themePrimaryColor.isDark()
+            ? theme.textColor
+            : theme.textColorInverse;
     }
 
     if (theme.textColorSecondary) {
@@ -432,7 +87,9 @@ export function getStyle(themeOptions: ThemeOptions): string {
     }
 
     if (theme.textColorInverse) {
-        variables[`text-inverse-color`] = theme.textColorInverse;
+        variables[`text-inverse-color`] = themePrimaryColor.isDark()
+            ? theme.textColorInverse
+            : theme.textColor;
     }
 
     // ================ Success Color ================
@@ -455,16 +112,11 @@ export function getStyle(themeOptions: ThemeOptions): string {
         variables[`info-color`] = theme.infoColor;
     }
 
-    // Convert to css variables
-    const cssList = Object.keys(variables).map(
-        (key) => `--${key}: ${variables[key]};`
-    );
-
-    return `
-  .theme-${themeName} {
-    ${cssList.join('\n')}
-  }
-  `.trim();
+    return {
+        variables,
+        light: themePrimaryColor.isLight(),
+        themeName,
+    };
 }
 
 function getContainer(option: Options): Element {
@@ -476,7 +128,18 @@ function getContainer(option: Options): Element {
     return head || document.body;
 }
 
-export function injectCSS(css: string, option: Options = {}): HTMLStyleElement {
+export function injectCSS(
+    variables: Variables,
+    themeName: string,
+    option: Options = {}
+): HTMLStyleElement {
+    const css = `
+          .theme-${themeName} {
+            ${Object.keys(variables)
+                .map((key) => `--${key}: ${variables[key]};`)
+                .join('\n')}
+          }
+          `.trim();
     const styleNode: HTMLStyleElement =
         (document.getElementById(THEME_CONTAINER_ID) as HTMLStyleElement) ||
         document.createElement('style');
@@ -502,6 +165,13 @@ export function injectCSS(css: string, option: Options = {}): HTMLStyleElement {
     return styleNode;
 }
 
-export function registerTheme(themeOptions: ThemeOptions): void {
-    injectCSS(getStyle(themeOptions));
+export function registerTheme(themeOptions: ThemeOptions): IRegisterTheme {
+    const { themeName, light, variables } = getStyle(themeOptions);
+    const styleNode: HTMLStyleElement = injectCSS(variables, themeName);
+    return {
+        themeName,
+        light,
+        variables,
+        styleNode,
+    };
 }
diff --git a/src/components/ConfigProvider/Theming/themes.ts b/src/components/ConfigProvider/Theming/themes.ts
index ce1e8af66..6e72bd62d 100644
--- a/src/components/ConfigProvider/Theming/themes.ts
+++ b/src/components/ConfigProvider/Theming/themes.ts
@@ -9,32 +9,6 @@ export const themeDefaults: OcBaseTheme = {
     warningColor: '#9D6309',
     infoColor: '#4F5666',
     errorColor: '#993838',
-    buttonDefaultForegroundColor: '#146da6',
-    buttonHoverForegroundColor: '#054d7b',
-    buttonFocusForegroundColor: '#054d7b',
-    buttonActiveForegroundColor: '#054d7b',
-    buttonVisitedForegroundColor: '#054d7b',
-    buttonDefaultOutlineColor: '#146da6',
-    buttonHoverOutlineColor: '#2c8cc9',
-    buttonFocusOutlineColor: '#054d7b',
-    buttonActiveOutlineColor: '#054d7b',
-    buttonVisitedOutlineColor: '#054d7b',
-    buttonPrimaryDefaultBackgroundColor: '#146da6',
-    buttonPrimaryHoverBackgroundColor: '#2c8cc9',
-    buttonPrimaryFocusBackgroundColor: '#054d7b',
-    buttonPrimaryActiveBackgroundColor: '#054d7b',
-    buttonPrimaryVisitedBackgroundColor: '#054d7b',
-    buttonPrimaryDefaultBorderColor: '#146da6',
-    buttonPrimaryHoverBorderColor: '#2c8cc9',
-    buttonPrimaryFocusBorderColor: '#054d7b',
-    buttonPrimaryActiveBorderColor: '#054d7b',
-    buttonPrimaryVisitedBorderColor: '#054d7b',
-    buttonDefaultBackgroundColor: '#fff',
-    buttonHoverBackgroundColor: '#ebf7ff',
-    buttonFocusBackgroundColor: '#ebf7ff',
-    buttonActiveBackgroundColor: '#ebf7ff',
-    buttonVisitedBackgroundColor: '#ebf7ff',
-    buttonHoverVariantBackgroundColor: '#bce4ff',
 };
 
 export const red: OcTheme = Object.freeze({
diff --git a/src/components/Tabs/Tab/Tab.tsx b/src/components/Tabs/Tab/Tab.tsx
index c9c89307f..938f3346b 100644
--- a/src/components/Tabs/Tab/Tab.tsx
+++ b/src/components/Tabs/Tab/Tab.tsx
@@ -6,6 +6,7 @@ import { Flipped } from 'react-flip-toolkit';
 
 import styles from '../tabs.module.scss';
 import { Icon, IconName } from '../../Icon';
+import { useConfig } from '../../ConfigProvider';
 
 export const Tab: FC<TabProps> = ({
     value,
@@ -20,9 +21,12 @@ export const Tab: FC<TabProps> = ({
     const labelExists: boolean = !!label;
     const isActive: boolean = value === currentActiveTab;
 
+    const { registeredTheme: { light = false } = {} } = useConfig();
+
     const tabClassName: string = classNames([
         styles.tab,
         { [styles.active]: isActive },
+        { [styles.inverse]: light },
     ]);
 
     const getIcon = (): JSX.Element => (
diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss
index d34745937..c0978e39a 100644
--- a/src/components/Tabs/tabs.module.scss
+++ b/src/components/Tabs/tabs.module.scss
@@ -1,4 +1,4 @@
-.tabWrap {
+.tab-wrap {
     --bg: var(--background-color);
     --label: var(--text-secondary-color);
     --active-label: var(--primary-color);
@@ -46,7 +46,11 @@
             cursor: not-allowed;
         }
 
-        .tabIndicator {
+        &.inverse {
+            --active-label: var(--text-inverse-color);
+        }
+
+        .tab-indicator {
             position: absolute;
             z-index: 1;
             height: $space-xxxs;
@@ -74,7 +78,7 @@
         .tab {
             padding: $space-l $space-m;
 
-            .tabIndicator {
+            .tab-indicator {
                 height: $space-xxs;
             }
         }
@@ -100,7 +104,7 @@
                 border-radius: 0 $space-l-fitted $space-l-fitted 0;
             }
 
-            .tabIndicator {
+            .tab-indicator {
                 display: none;
             }
         }
diff --git a/src/styles/themes/_default-theme.scss b/src/styles/themes/_default-theme.scss
index edf1ac86a..2690a42e8 100644
--- a/src/styles/themes/_default-theme.scss
+++ b/src/styles/themes/_default-theme.scss
@@ -120,50 +120,5 @@
     --info-color: #4f5666;
     --white-color: #fff;
     --black-color: #000;
-
-    --button-primary-default-foreground-color: #fff;
-    --button-primary-hover-foreground-color: #fff;
-    --button-primary-focus-foreground-color: #fff;
-    --button-primary-active-foreground-color: #fff;
-    --button-primary-visited-foreground-color: #fff;
-
-    --button-primary-default-background-color: #146da6;
-    --button-primary-hover-background-color: #2c8cc9;
-    --button-primary-focus-background-color: #054d7b;
-    --button-primary-active-background-color: #054d7b;
-    --button-primary-visited-background-color: #054d7b;
-
-    --button-primary-default-border-color: #146da6;
-    --button-primary-hover-border-color: #2c8cc9;
-    --button-primary-focus-border-color: #054d7b;
-    --button-primary-active-border-color: #054d7b;
-    --button-primary-visited-border-color: #054d7b;
-
-    --button-neutral-default-foreground-color: #4f5666;
-    --button-neutral-hover-foreground-color: #4f5666;
-    --button-neutral-focus-foreground-color: #4f5666;
-    --button-neutral-active-foreground-color: #4f5666;
-    --button-neutral-visited-foreground-color: #4f5666;
-
-    --button-default-foreground-color: #146da6;
-    --button-hover-foreground-color: #146da6;
-    --button-focus-foreground-color: #054d7b;
-    --button-active-foreground-color: #054d7b;
-    --button-visited-foreground-color: #054d7b;
-
-    --button-default-background-color: #fff;
-    --button-hover-background-color: #ebf7ff;
-    --button-focus-background-color: #ebf7ff;
-    --button-active-background-color: #ebf7ff;
-    --button-visited-background-color: #ebf7ff;
-
-    --button-hover-variant-background-color: #bce4ff;
-
-    --button-default-outline-color: #146da6;
-    --button-hover-outline-color: #2c8cc9;
-    --button-focus-outline-color: #054d7b;
-    --button-active-outline-color: #054d7b;
-    --button-visited-outline-color: #054d7b;
-
     --font-size: 16px;
 }