diff --git a/pages/alert/style-custom-types.page.tsx b/pages/alert/style-custom-types.page.tsx
index 549e73b0f6..5c3973da4b 100644
--- a/pages/alert/style-custom-types.page.tsx
+++ b/pages/alert/style-custom-types.page.tsx
@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
+
+import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 
 import { Alert as CloudscapeAlert, Button, SpaceBetween } from '~components';
 
@@ -66,6 +68,12 @@ interface CustomAlertProps {
 }
 
 function CustomAlert({ children, type, dismissible, action }: CustomAlertProps) {
+  const mode = useCurrentMode(useRef(document.body));
+  const background = backgrounds[mode][type];
+  const borderColor = borderColors[mode][type];
+  const borderWidth = borderWidths[type];
+  const color = colors[mode];
+  const iconColor = iconColors[mode][type];
   return (
     <CloudscapeAlert
       dismissible={dismissible}
@@ -74,11 +82,11 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
       i18nStrings={i18nStrings}
       style={{
         root: {
-          background: getBackground(type),
-          borderColor: getBorderColor(type),
+          background,
+          borderColor,
           borderRadius: '8px',
-          borderWidth: getBorderWidth(type),
-          color: getColor(),
+          borderWidth,
+          color,
           focusRing: {
             borderColor: palette.red60,
             borderRadius: '4px',
@@ -86,10 +94,14 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
           },
         },
         icon: {
-          color: getIconColor(type),
+          color: iconColor,
         },
         dismissButton: {
-          color: getDismissButtonColor(type),
+          color: {
+            default: dismissButtonColors[mode][type].default,
+            hover: dismissButtonColors[mode][type].hover,
+            active: dismissButtonColors[mode][type].active,
+          },
           focusRing: {
             borderColor: palette.red60,
             borderRadius: '4px',
@@ -103,72 +115,106 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
   );
 }
 
-function getBackground(type: string) {
-  const backgrounds = {
-    info: `light-dark(${palette.blue80}, ${palette.blue40})`,
-    success: `light-dark(${palette.green80}, ${palette.green20})`,
-    error: `light-dark(${palette.red80}, ${palette.red30})`,
-    warning: `light-dark(${palette.teal90}, ${palette.teal20})`,
-  };
-  return backgrounds[type as keyof typeof backgrounds];
-}
+const backgrounds = {
+  light: {
+    info: palette.blue80,
+    success: palette.green80,
+    error: palette.red80,
+    warning: palette.teal90,
+  },
+  dark: {
+    info: palette.blue40,
+    success: palette.green20,
+    error: palette.red30,
+    warning: palette.teal20,
+  },
+};
 
-function getColor() {
-  return `light-dark(${palette.neutral10}, ${palette.neutral100})`;
-}
+const colors = {
+  light: palette.neutral10,
+  dark: palette.neutral100,
+};
 
-function getBorderColor(type: string) {
-  const borderColors = {
-    info: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
-    success: `light-dark(${palette.green80}, ${palette.green30})`,
-    error: `light-dark(${palette.blue90}, ${palette.red60})`,
-    warning: `light-dark(${palette.orange80}, ${palette.orange40})`,
-  };
-  return borderColors[type as keyof typeof borderColors];
-}
+const borderColors = {
+  light: {
+    info: palette.neutral80,
+    success: palette.green80,
+    error: palette.blue90,
+    warning: palette.orange80,
+  },
+  dark: {
+    info: palette.neutral20,
+    success: palette.green30,
+    error: palette.red60,
+    warning: palette.orange40,
+  },
+};
 
-function getBorderWidth(type: string) {
-  const borderWidths = {
-    info: '4px',
-    success: '0px',
-    error: '6px',
-    warning: '0px',
-  };
-  return borderWidths[type as keyof typeof borderWidths];
-}
+const borderWidths = {
+  info: '4px',
+  success: '0px',
+  error: '6px',
+  warning: '0px',
+};
 
-function getIconColor(type: string) {
-  const iconColors = {
-    info: `light-dark(${palette.orange80}, ${palette.red30})`,
-    success: `light-dark(${palette.red60}, ${palette.red60})`,
-    error: `light-dark(${palette.blue80}, ${palette.blue40})`,
-    warning: `light-dark(${palette.neutral10}, ${palette.neutral90})`,
-  };
-  return iconColors[type as keyof typeof iconColors];
-}
+const iconColors = {
+  light: {
+    info: palette.orange80,
+    success: palette.red60,
+    error: palette.blue80,
+    warning: palette.neutral10,
+  },
+  dark: {
+    info: palette.red30,
+    success: palette.red60,
+    error: palette.blue40,
+    warning: palette.neutral90,
+  },
+};
 
-function getDismissButtonColor(type: string) {
-  const dismissButtonColors = {
+const dismissButtonColors = {
+  light: {
     info: {
-      default: `light-dark(${palette.green60}, ${palette.neutral40})`,
-      hover: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
-      active: `light-dark(${palette.neutral90}, ${palette.neutral10})`,
+      default: palette.green60,
+      hover: palette.neutral80,
+      active: palette.neutral90,
     },
     success: {
-      default: `light-dark(${palette.green60}, ${palette.green30})`,
-      hover: `light-dark(${palette.green80}, ${palette.green20})`,
-      active: `light-dark(${palette.green90}, ${palette.green10})`,
+      default: palette.green60,
+      hover: palette.green80,
+      active: palette.green90,
     },
     error: {
-      default: `light-dark(${palette.red60}, ${palette.red60})`,
-      hover: `light-dark(${palette.red60}, ${palette.red20})`,
-      active: `light-dark(${palette.red80}, ${palette.red10})`,
+      default: palette.red60,
+      hover: palette.red60,
+      active: palette.red80,
     },
     warning: {
-      default: `light-dark(${palette.orange60}, ${palette.orange40})`,
-      hover: `light-dark(${palette.orange80}, ${palette.orange20})`,
-      active: `light-dark(${palette.orange90}, ${palette.orange10})`,
+      default: palette.orange60,
+      hover: palette.orange80,
+      active: palette.orange90,
     },
-  };
-  return dismissButtonColors[type as keyof typeof dismissButtonColors];
-}
+  },
+  dark: {
+    info: {
+      default: palette.neutral40,
+      hover: palette.neutral20,
+      active: palette.neutral10,
+    },
+    success: {
+      default: palette.green30,
+      hover: palette.green20,
+      active: palette.green10,
+    },
+    error: {
+      default: palette.red60,
+      hover: palette.red20,
+      active: palette.red10,
+    },
+    warning: {
+      default: palette.orange40,
+      hover: palette.orange20,
+      active: palette.orange10,
+    },
+  },
+};
diff --git a/pages/badge/style-custom-types.page.tsx b/pages/badge/style-custom-types.page.tsx
index 4ed8d13ad9..7dfbed298d 100644
--- a/pages/badge/style-custom-types.page.tsx
+++ b/pages/badge/style-custom-types.page.tsx
@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
+
+import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 
 import { Badge as CloudscapeBadge, SpaceBetween } from '~components';
 
@@ -29,15 +31,20 @@ interface CustomBadgeProps {
 }
 
 function CustomBadge({ children, colorTheme }: CustomBadgeProps) {
+  const mode = useCurrentMode(useRef(document.body));
+  const background = backgrounds[mode][colorTheme];
+  const borderColor = borderColors[mode][colorTheme];
+  const borderWidth = borderWidths[colorTheme];
+  const color = colors[mode];
   return (
     <CloudscapeBadge
       style={{
         root: {
-          background: getBackground(colorTheme),
-          borderColor: getBorderColor(colorTheme),
+          background,
+          borderColor,
           borderRadius: '8px',
-          color: getColor(),
-          borderWidth: getBorderWidth(colorTheme),
+          color,
+          borderWidth,
           paddingBlock: '8px',
           paddingInline: '12px',
         },
@@ -48,42 +55,54 @@ function CustomBadge({ children, colorTheme }: CustomBadgeProps) {
   );
 }
 
-function getBackground(colorTheme: string) {
-  const backgrounds = {
-    blue: `light-dark(${palette.blue80}, ${palette.blue40})`,
-    critical: `light-dark(${palette.red80}, ${palette.red30})`,
-    high: `light-dark(${palette.red60}, ${palette.red30})`,
-    medium: `light-dark(${palette.green80}, ${palette.green20})`,
-    low: `light-dark(${palette.teal90}, ${palette.teal20})`,
-    neutral: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
-  };
-  return backgrounds[colorTheme as keyof typeof backgrounds];
-}
+const backgrounds = {
+  light: {
+    blue: palette.blue80,
+    critical: palette.red80,
+    high: palette.red60,
+    medium: palette.green80,
+    low: palette.teal90,
+    neutral: palette.neutral80,
+  },
+  dark: {
+    blue: palette.blue40,
+    critical: palette.red30,
+    high: palette.red30,
+    medium: palette.green20,
+    low: palette.teal20,
+    neutral: palette.neutral20,
+  },
+};
 
-function getColor() {
-  return 'light-dark(white, black)';
-}
+const colors = {
+  light: 'white',
+  dark: 'black',
+};
 
-function getBorderColor(colorTheme: string) {
-  const borderColors = {
-    blue: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
-    critical: `light-dark(${palette.blue90}, ${palette.red60})`,
-    high: `light-dark(${palette.red80}, ${palette.red10})`,
-    medium: `light-dark(${palette.green80}, ${palette.green30})`,
-    low: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
-    neutral: `light-dark(${palette.teal80}, ${palette.teal40})`,
-  };
-  return borderColors[colorTheme as keyof typeof borderColors];
-}
+const borderColors = {
+  light: {
+    blue: palette.neutral80,
+    critical: palette.blue90,
+    high: palette.red80,
+    medium: palette.green80,
+    low: palette.neutral80,
+    neutral: palette.teal80,
+  },
+  dark: {
+    blue: palette.neutral20,
+    critical: palette.red60,
+    high: palette.red10,
+    medium: palette.green30,
+    low: palette.neutral20,
+    neutral: palette.teal40,
+  },
+};
 
-function getBorderWidth(colorTheme: string) {
-  const borderWidths = {
-    blue: '2px',
-    critical: '4px',
-    high: '0px',
-    medium: '0px',
-    low: '0px',
-    neutral: '0px',
-  };
-  return borderWidths[colorTheme as keyof typeof borderWidths];
-}
+const borderWidths = {
+  blue: '2px',
+  critical: '4px',
+  high: '0px',
+  medium: '0px',
+  low: '0px',
+  neutral: '0px',
+};
diff --git a/pages/button-group/style-custom-types.page.tsx b/pages/button-group/style-custom-types.page.tsx
index 21cc69a344..1fc4b7f8bb 100644
--- a/pages/button-group/style-custom-types.page.tsx
+++ b/pages/button-group/style-custom-types.page.tsx
@@ -1,7 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react';
+import React, { useRef } from 'react';
+
+import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 
 import { ButtonGroup as CloudscapeButtonGroup, SpaceBetween } from '~components';
 
@@ -25,6 +27,7 @@ export default function CustomButtonGroupTypes() {
 }
 
 function BasicExample() {
+  const mode = useCurrentMode(useRef(document.body));
   return (
     <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
       <CloudscapeButtonGroup
@@ -53,26 +56,26 @@ function BasicExample() {
         ]}
         style={{
           root: {
-            background: `light-dark(rgba(166, 222, 255, 0.91), rgba(64, 123, 178, 0.8))`,
+            background: backgrounds[mode].blue,
             borderRadius: '20px',
             paddingBlock: '14px',
             paddingInline: '18px',
-            boxShadow: getBoxShadow('blue'),
+            boxShadow: boxShadows[mode].blue,
             focusRing: {
-              borderColor: `light-dark(${palette.blue80}, ${palette.blue40})`,
+              borderColor: focusRingColors[mode].blue,
               borderWidth: '3px',
               borderRadius: '20px',
             },
           },
           item: {
             color: {
-              active: `light-dark(${palette.blue100}, ${palette.blue10})`,
-              default: `light-dark(${palette.blue90}, ${palette.blue20})`,
-              hover: `light-dark(${palette.blue100}, ${palette.blue10})`,
-              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
+              active: itemColors[mode].blue.active,
+              default: itemColors[mode].blue.default,
+              hover: itemColors[mode].blue.hover,
+              disabled: itemColors[mode].disabled,
             },
             focusRing: {
-              borderColor: `light-dark(${palette.blue80}, ${palette.blue40})`,
+              borderColor: focusRingColors[mode].blue,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -84,6 +87,7 @@ function BasicExample() {
 }
 
 function ActionsExample() {
+  const mode = useCurrentMode(useRef(document.body));
   return (
     <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
       <CloudscapeButtonGroup
@@ -106,28 +110,28 @@ function ActionsExample() {
         ]}
         style={{
           root: {
-            background: `light-dark(rgba(152, 234, 182, 0.87), rgba(34, 197, 94, 0.3))`,
+            background: backgrounds[mode].green,
             borderRadius: '16px',
             paddingBlock: '8px',
             paddingInline: '12px',
-            boxShadow: getBoxShadow('green'),
+            boxShadow: boxShadows[mode].green,
             borderWidth: '4px',
-            borderColor: `light-dark(rgba(24, 146, 69, 0.4), rgba(34, 197, 94, 0.6))`,
+            borderColor: borderColors[mode].green,
             focusRing: {
-              borderColor: `light-dark(${palette.green60}, ${palette.green30})`,
+              borderColor: focusRingColors[mode].green,
               borderWidth: '3px',
               borderRadius: '16px',
             },
           },
           item: {
             color: {
-              active: `light-dark(${palette.green100}, ${palette.green10})`,
-              default: `light-dark(${palette.green90}, ${palette.green20})`,
-              hover: `light-dark(${palette.green100}, ${palette.green10})`,
-              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
+              active: itemColors[mode].green.active,
+              default: itemColors[mode].green.default,
+              hover: itemColors[mode].green.hover,
+              disabled: itemColors[mode].disabled,
             },
             focusRing: {
-              borderColor: `light-dark(${palette.green60}, ${palette.green30})`,
+              borderColor: focusRingColors[mode].green,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -139,6 +143,7 @@ function ActionsExample() {
 }
 
 function FeedbackExample() {
+  const mode = useCurrentMode(useRef(document.body));
   return (
     <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
       <CloudscapeButtonGroup
@@ -164,26 +169,26 @@ function FeedbackExample() {
         ]}
         style={{
           root: {
-            background: `light-dark(rgba(223, 146, 91, 1), rgba(204, 90, 9, 0.81))`,
+            background: backgrounds[mode].orange,
             borderRadius: '50px',
             paddingBlock: '14px',
             paddingInline: '12px',
-            boxShadow: getBoxShadow('orange'),
+            boxShadow: boxShadows[mode].orange,
             focusRing: {
-              borderColor: `light-dark(${palette.orange60}, ${palette.orange40})`,
+              borderColor: focusRingColors[mode].orange,
               borderWidth: '3px',
               borderRadius: '50px',
             },
           },
           item: {
             color: {
-              active: `light-dark(${palette.orange100}, ${palette.orange10})`,
-              default: `light-dark(${palette.orange90}, ${palette.orange20})`,
-              hover: `light-dark(${palette.orange100}, ${palette.orange10})`,
-              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
+              active: itemColors[mode].orange.active,
+              default: itemColors[mode].orange.default,
+              hover: itemColors[mode].orange.hover,
+              disabled: itemColors[mode].disabled,
             },
             focusRing: {
-              borderColor: `light-dark(${palette.orange60}, ${palette.orange40})`,
+              borderColor: focusRingColors[mode].orange,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -195,6 +200,7 @@ function FeedbackExample() {
 }
 
 function MenuDropdownExample() {
+  const mode = useCurrentMode(useRef(document.body));
   return (
     <div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>
       <CloudscapeButtonGroup
@@ -223,28 +229,28 @@ function MenuDropdownExample() {
         ]}
         style={{
           root: {
-            background: `light-dark(rgba(234, 91, 86, 0.52), rgba(210, 60, 60, 0.63))`,
+            background: backgrounds[mode].red,
             borderRadius: '18px',
             paddingBlock: '12px',
             paddingInline: '12px',
-            boxShadow: getBoxShadow('red'),
+            boxShadow: boxShadows[mode].red,
             borderWidth: '2px',
-            borderColor: `light-dark(rgba(239, 68, 68, 0.4), rgba(239, 68, 68, 0.6))`,
+            borderColor: borderColors[mode].red,
             focusRing: {
-              borderColor: `light-dark(${palette.red80}, ${palette.red30})`,
+              borderColor: focusRingColors[mode].red,
               borderWidth: '2px',
               borderRadius: '8px',
             },
           },
           item: {
             color: {
-              active: `light-dark(${palette.red100}, ${palette.red10})`,
-              default: `light-dark(${palette.red80}, ${palette.red20})`,
-              hover: `light-dark(${palette.red100}, ${palette.red10})`,
-              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
+              active: itemColors[mode].red.active,
+              default: itemColors[mode].red.default,
+              hover: itemColors[mode].red.hover,
+              disabled: itemColors[mode].disabled,
             },
             focusRing: {
-              borderColor: `light-dark(${palette.red80}, ${palette.red30})`,
+              borderColor: focusRingColors[mode].red,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -267,28 +273,28 @@ function MenuDropdownExample() {
         ]}
         style={{
           root: {
-            background: `light-dark(rgba(234, 91, 86, 0.52), rgba(210, 60, 60, 0.63))`,
+            background: backgrounds[mode].red,
             borderRadius: '50%',
             paddingBlock: '12px',
             paddingInline: '12px',
-            boxShadow: getBoxShadow('red'),
+            boxShadow: boxShadows[mode].red,
             borderWidth: '2px',
-            borderColor: `light-dark(rgba(239, 68, 68, 0.4), rgba(239, 68, 68, 0.6))`,
+            borderColor: borderColors[mode].red,
             focusRing: {
-              borderColor: `light-dark(${palette.red80}, ${palette.red30})`,
+              borderColor: focusRingColors[mode].red,
               borderWidth: '2px',
               borderRadius: '8px',
             },
           },
           item: {
             color: {
-              active: `light-dark(${palette.red100}, ${palette.red10})`,
-              default: `light-dark(${palette.red80}, ${palette.red20})`,
-              hover: `light-dark(${palette.red100}, ${palette.red10})`,
-              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
+              active: itemColors[mode].red.active,
+              default: itemColors[mode].red.default,
+              hover: itemColors[mode].red.hover,
+              disabled: itemColors[mode].disabled,
             },
             focusRing: {
-              borderColor: `light-dark(${palette.red80}, ${palette.red30})`,
+              borderColor: focusRingColors[mode].red,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -300,6 +306,7 @@ function MenuDropdownExample() {
 }
 
 function FileInputExample() {
+  const mode = useCurrentMode(useRef(document.body));
   return (
     <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
       <CloudscapeButtonGroup
@@ -322,26 +329,26 @@ function FileInputExample() {
         ]}
         style={{
           root: {
-            background: `light-dark(rgba(138, 237, 225, 0.76), rgba(9, 188, 155, 0.71))`,
+            background: backgrounds[mode].teal,
             borderRadius: '24px',
             paddingBlock: '12px',
             paddingInline: '16px',
-            boxShadow: getBoxShadow('teal'),
+            boxShadow: boxShadows[mode].teal,
             focusRing: {
-              borderColor: `light-dark(${palette.teal80}, ${palette.teal40})`,
+              borderColor: focusRingColors[mode].teal,
               borderWidth: '2px',
               borderRadius: '8px',
             },
           },
           item: {
             color: {
-              active: `light-dark(${palette.teal100}, ${palette.teal10})`,
-              default: `light-dark(${palette.teal80}, ${palette.teal20})`,
-              hover: `light-dark(${palette.teal100}, ${palette.teal10})`,
-              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
+              active: itemColors[mode].teal.active,
+              default: itemColors[mode].teal.default,
+              hover: itemColors[mode].teal.hover,
+              disabled: itemColors[mode].disabled,
             },
             focusRing: {
-              borderColor: `light-dark(${palette.teal80}, ${palette.teal40})`,
+              borderColor: focusRingColors[mode].teal,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -353,6 +360,7 @@ function FileInputExample() {
 }
 
 function NavExample() {
+  const mode = useCurrentMode(useRef(document.body));
   return (
     <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
       <CloudscapeButtonGroup
@@ -380,26 +388,26 @@ function NavExample() {
         ]}
         style={{
           root: {
-            background: `light-dark(rgba(205, 202, 202, 0.85), rgba(124, 122, 122, 1))`,
+            background: backgrounds[mode].nav,
             borderRadius: '24px',
             paddingBlock: '12px',
             paddingInline: '16px',
-            boxShadow: getBoxShadow('nav'),
+            boxShadow: boxShadows[mode].nav,
             focusRing: {
-              borderColor: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
+              borderColor: focusRingColors[mode].nav,
               borderWidth: '2px',
               borderRadius: '8px',
             },
           },
           item: {
             color: {
-              active: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-              default: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
-              hover: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
+              active: itemColors[mode].nav.active,
+              default: itemColors[mode].nav.default,
+              hover: itemColors[mode].nav.hover,
+              disabled: itemColors[mode].disabled,
             },
             focusRing: {
-              borderColor: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
+              borderColor: focusRingColors[mode].nav,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -419,26 +427,26 @@ function NavExample() {
         ]}
         style={{
           root: {
-            background: `light-dark(rgba(205, 202, 202, 0.85), rgba(124, 122, 122, 1))`,
+            background: backgrounds[mode].nav,
             borderRadius: '24px',
             paddingBlock: '12px',
             paddingInline: '16px',
-            boxShadow: getBoxShadow('nav'),
+            boxShadow: boxShadows[mode].nav,
             focusRing: {
-              borderColor: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
+              borderColor: focusRingColors[mode].nav,
               borderWidth: '2px',
               borderRadius: '8px',
             },
           },
           item: {
             color: {
-              active: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-              default: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
-              hover: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
+              active: itemColors[mode].nav.active,
+              default: itemColors[mode].nav.default,
+              hover: itemColors[mode].nav.hover,
+              disabled: itemColors[mode].disabled,
             },
             focusRing: {
-              borderColor: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
+              borderColor: focusRingColors[mode].nav,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -448,14 +456,140 @@ function NavExample() {
     </div>
   );
 }
-function getBoxShadow(colorTheme: string) {
-  const boxShadows = {
-    blue: `0 2px 12px light-dark(rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.25))`,
-    green: `0 2px 12px light-dark(rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.25))`,
-    orange: `0 2px 12px light-dark(rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.25))`,
-    red: `0 2px 12px light-dark(rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.25))`,
-    teal: `0 2px 12px light-dark(rgba(20, 184, 166, 0.15),rgba(20, 184, 166, 0.25))`,
-    nav: `0 4px 20px light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1))`,
-  };
-  return boxShadows[colorTheme as keyof typeof boxShadows];
-}
+
+const backgrounds = {
+  light: {
+    blue: 'rgba(166, 222, 255, 0.91)',
+    green: 'rgba(152, 234, 182, 0.87)',
+    orange: 'rgba(223, 146, 91, 1)',
+    red: 'rgba(234, 91, 86, 0.52)',
+    teal: 'rgba(138, 237, 225, 0.76)',
+    nav: 'rgba(205, 202, 202, 0.85)',
+  },
+  dark: {
+    blue: 'rgba(64, 123, 178, 0.8)',
+    green: 'rgba(34, 197, 94, 0.3)',
+    orange: 'rgba(204, 90, 9, 0.81)',
+    red: 'rgba(210, 60, 60, 0.63)',
+    teal: 'rgba(9, 188, 155, 0.71)',
+    nav: 'rgba(124, 122, 122, 1)',
+  },
+};
+
+const borderColors = {
+  light: {
+    green: 'rgba(24, 146, 69, 0.4)',
+    red: 'rgba(239, 68, 68, 0.4)',
+  },
+  dark: {
+    green: 'rgba(34, 197, 94, 0.6)',
+    red: 'rgba(239, 68, 68, 0.6)',
+  },
+};
+
+const boxShadows = {
+  light: {
+    blue: '0 2px 12px rgba(59, 130, 246, 0.15)',
+    green: '0 2px 12px rgba(34, 197, 94, 0.15)',
+    orange: '0 2px 12px rgba(249, 115, 22, 0.15)',
+    red: '0 2px 12px rgba(239, 68, 68, 0.15)',
+    teal: '0 2px 12px rgba(20, 184, 166, 0.15)',
+    nav: '0 4px 20px rgba(0, 0, 0, 0.1)',
+  },
+  dark: {
+    blue: '0 2px 12px rgba(59, 130, 246, 0.25)',
+    green: '0 2px 12px rgba(34, 197, 94, 0.25)',
+    orange: '0 2px 12px rgba(249, 115, 22, 0.25)',
+    red: '0 2px 12px rgba(239, 68, 68, 0.25)',
+    teal: '0 2px 12px rgba(20, 184, 166, 0.25)',
+    nav: '0 4px 20px rgba(255, 255, 255, 0.1)',
+  },
+};
+
+const focusRingColors = {
+  light: {
+    blue: palette.blue80,
+    green: palette.green60,
+    orange: palette.orange60,
+    red: palette.red80,
+    teal: palette.teal80,
+    nav: palette.neutral80,
+  },
+  dark: {
+    blue: palette.blue40,
+    green: palette.green30,
+    orange: palette.orange40,
+    red: palette.red30,
+    teal: palette.teal40,
+    nav: palette.neutral40,
+  },
+};
+
+const itemColors = {
+  light: {
+    blue: {
+      active: palette.blue100,
+      default: palette.blue90,
+      hover: palette.blue100,
+    },
+    green: {
+      active: palette.green100,
+      default: palette.green90,
+      hover: palette.green100,
+    },
+    orange: {
+      active: palette.orange100,
+      default: palette.orange90,
+      hover: palette.orange100,
+    },
+    red: {
+      active: palette.red100,
+      default: palette.red80,
+      hover: palette.red100,
+    },
+    teal: {
+      active: palette.teal100,
+      default: palette.teal80,
+      hover: palette.teal100,
+    },
+    nav: {
+      active: palette.neutral100,
+      default: palette.neutral80,
+      hover: palette.neutral100,
+    },
+    disabled: palette.neutral60,
+  },
+  dark: {
+    blue: {
+      active: palette.blue10,
+      default: palette.blue20,
+      hover: palette.blue10,
+    },
+    green: {
+      active: palette.green10,
+      default: palette.green20,
+      hover: palette.green10,
+    },
+    orange: {
+      active: palette.orange10,
+      default: palette.orange20,
+      hover: palette.orange10,
+    },
+    red: {
+      active: palette.red10,
+      default: palette.red20,
+      hover: palette.red10,
+    },
+    teal: {
+      active: palette.teal10,
+      default: palette.teal20,
+      hover: palette.teal10,
+    },
+    nav: {
+      active: palette.neutral10,
+      default: palette.neutral20,
+      hover: palette.neutral10,
+    },
+    disabled: palette.neutral40,
+  },
+};
diff --git a/pages/button/style-custom-types.page.tsx b/pages/button/style-custom-types.page.tsx
index 05c0c5bf6b..7d3f4e5c03 100644
--- a/pages/button/style-custom-types.page.tsx
+++ b/pages/button/style-custom-types.page.tsx
@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
+
+import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 
 import { Button as CloudscapeButton, SpaceBetween } from '~components';
 
@@ -50,6 +52,11 @@ interface CustomButtonProps {
 }
 
 function CustomButton({ children, colorTheme, id, isDisabled, isLoading, onClick, variation }: CustomButtonProps) {
+  const mode = useCurrentMode(useRef(document.body));
+  const background = backgrounds[mode][colorTheme];
+  const color = isDisabled || isLoading ? colors[mode] : colors[mode];
+  const focusRing = focusRings[mode];
+
   return (
     <CloudscapeButton
       data-testid={id}
@@ -59,14 +66,14 @@ function CustomButton({ children, colorTheme, id, isDisabled, isLoading, onClick
       variant={variation}
       style={{
         root: {
-          background: getBackground(colorTheme),
+          background,
           borderRadius: '4px',
           borderWidth: '0px',
-          color: getColor(),
-          focusRing: getFocusRing(),
+          color,
+          focusRing,
           paddingBlock: '12px',
           paddingInline: '16px',
-          boxShadow: getBoxShadow(colorTheme),
+          boxShadow: boxShadows[mode][colorTheme],
         },
       }}
     >
@@ -75,90 +82,162 @@ function CustomButton({ children, colorTheme, id, isDisabled, isLoading, onClick
   );
 }
 
-function getBackground(colorTheme: string) {
-  const backgrounds = {
+const backgrounds = {
+  light: {
     default: {
-      active: `light-dark(${palette.teal100}, ${palette.teal10})`,
-      default: `light-dark(${palette.teal80}, ${palette.teal30})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.teal90}, ${palette.teal20})`,
+      active: palette.teal100,
+      default: palette.teal80,
+      disabled: palette.neutral40,
+      hover: palette.teal90,
     },
     error: {
-      active: `light-dark(${palette.red100}, ${palette.red10})`,
-      default: `light-dark(${palette.red80}, ${palette.red30})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.red90}, ${palette.red20})`,
+      active: palette.red100,
+      default: palette.red80,
+      disabled: palette.neutral40,
+      hover: palette.red90,
     },
     info: {
-      active: `light-dark(${palette.blue100}, ${palette.blue10})`,
-      default: `light-dark(${palette.blue80}, ${palette.blue40})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.blue90}, ${palette.blue20})`,
+      active: palette.blue100,
+      default: palette.blue80,
+      disabled: palette.neutral40,
+      hover: palette.blue90,
     },
     success: {
-      active: `light-dark(${palette.green100}, ${palette.green10})`,
-      default: `light-dark(${palette.green80}, ${palette.green30})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.green90}, ${palette.green20})`,
+      active: palette.green100,
+      default: palette.green80,
+      disabled: palette.neutral40,
+      hover: palette.green90,
     },
     warning: {
-      active: `light-dark(${palette.orange100}, ${palette.orange10})`,
-      default: `light-dark(${palette.orange80}, ${palette.orange40})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.orange90}, ${palette.orange20})`,
+      active: palette.orange100,
+      default: palette.orange80,
+      disabled: palette.neutral40,
+      hover: palette.orange90,
     },
-  };
-  return backgrounds[colorTheme as keyof typeof backgrounds];
-}
+  },
+  dark: {
+    default: {
+      active: palette.teal10,
+      default: palette.teal30,
+      disabled: palette.neutral80,
+      hover: palette.teal20,
+    },
+    error: {
+      active: palette.red10,
+      default: palette.red30,
+      disabled: palette.neutral80,
+      hover: palette.red20,
+    },
+    info: {
+      active: palette.blue10,
+      default: palette.blue40,
+      disabled: palette.neutral80,
+      hover: palette.blue20,
+    },
+    success: {
+      active: palette.green10,
+      default: palette.green30,
+      disabled: palette.neutral80,
+      hover: palette.green20,
+    },
+    warning: {
+      active: palette.orange10,
+      default: palette.orange40,
+      disabled: palette.neutral80,
+      hover: palette.orange20,
+    },
+  },
+};
 
-function getColor() {
-  return {
-    active: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
-    default: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
-    hover: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
-    disabled: `light-dark(${palette.neutral60}, ${palette.neutral60})`,
-  };
-}
+const colors = {
+  light: {
+    active: palette.neutral10,
+    default: palette.neutral10,
+    hover: palette.neutral10,
+    disabled: palette.neutral60,
+  },
+  dark: {
+    active: palette.neutral100,
+    default: palette.neutral100,
+    hover: palette.neutral100,
+    disabled: palette.neutral60,
+  },
+};
 
-function getFocusRing() {
-  return {
-    borderColor: 'light-dark(rgb(0, 64, 77), rgb(233, 249, 252))',
+const focusRings = {
+  light: {
+    borderColor: 'rgb(0, 64, 77)',
     borderWidth: '2px',
-  };
-}
+  },
+  dark: {
+    borderColor: 'rgb(233, 249, 252)',
+    borderWidth: '2px',
+  },
+};
 
-function getBoxShadow(colorTheme: string) {
-  const boxShadows = {
+const boxShadows = {
+  light: {
     default: {
-      active: `0 4px 8px light-dark(rgba(0, 128, 128, 0.3), rgba(0, 255, 255, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(0, 128, 128, 0.2), rgba(0, 255, 255, 0.3))`,
+      active: '0 4px 8px rgba(0, 128, 128, 0.3)',
+      default: '0 2px 4px rgba(0, 128, 128, 0.2)',
       disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(0, 128, 128, 0.25), rgba(0, 255, 255, 0.35))`,
+      hover: '0 6px 12px rgba(0, 128, 128, 0.25)',
     },
     error: {
-      active: `0 4px 8px light-dark(rgba(255, 0, 0, 0.3), rgba(255, 100, 100, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(255, 0, 0, 0.2), rgba(255, 100, 100, 0.3))`,
+      active: '0 4px 8px rgba(255, 0, 0, 0.3)',
+      default: '0 2px 4px rgba(255, 0, 0, 0.2)',
       disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(255, 0, 0, 0.25), rgba(255, 100, 100, 0.35))`,
+      hover: '0 6px 12px rgba(255, 0, 0, 0.25)',
     },
     info: {
-      active: `0 4px 8px light-dark(rgba(0, 0, 255, 0.3), rgba(100, 100, 255, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(0, 0, 255, 0.2), rgba(100, 100, 255, 0.3))`,
+      active: '0 4px 8px rgba(0, 0, 255, 0.3)',
+      default: '0 2px 4px rgba(0, 0, 255, 0.2)',
       disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(0, 0, 255, 0.25), rgba(100, 100, 255, 0.35))`,
+      hover: '0 6px 12px rgba(0, 0, 255, 0.25)',
     },
     success: {
-      active: `0 4px 8px light-dark(rgba(0, 255, 0, 0.3), rgba(100, 255, 100, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(0, 255, 0, 0.2), rgba(100, 255, 100, 0.3))`,
+      active: '0 4px 8px rgba(0, 255, 0, 0.3)',
+      default: '0 2px 4px rgba(0, 255, 0, 0.2)',
       disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(0, 255, 0, 0.25), rgba(100, 255, 100, 0.35))`,
+      hover: '0 6px 12px rgba(0, 255, 0, 0.25)',
     },
     warning: {
-      active: `0 4px 8px light-dark(rgba(255, 165, 0, 0.3), rgba(255, 200, 100, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(255, 165, 0, 0.2), rgba(255, 200, 100, 0.3))`,
+      active: '0 4px 8px rgba(255, 165, 0, 0.3)',
+      default: '0 2px 4px rgba(255, 165, 0, 0.2)',
       disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(255, 165, 0, 0.25), rgba(255, 200, 100, 0.35))`,
+      hover: '0 6px 12px rgba(255, 165, 0, 0.25)',
     },
-  };
-  return boxShadows[colorTheme as keyof typeof boxShadows];
-}
+  },
+  dark: {
+    default: {
+      active: '0 4px 8px rgba(0, 255, 255, 0.4)',
+      default: '0 2px 4px rgba(0, 255, 255, 0.3)',
+      disabled: 'none',
+      hover: '0 6px 12px rgba(0, 255, 255, 0.35)',
+    },
+    error: {
+      active: '0 4px 8px rgba(255, 100, 100, 0.4)',
+      default: '0 2px 4px rgba(255, 100, 100, 0.3)',
+      disabled: 'none',
+      hover: '0 6px 12px rgba(255, 100, 100, 0.35)',
+    },
+    info: {
+      active: '0 4px 8px rgba(100, 100, 255, 0.4)',
+      default: '0 2px 4px rgba(100, 100, 255, 0.3)',
+      disabled: 'none',
+      hover: '0 6px 12px rgba(100, 100, 255, 0.35)',
+    },
+    success: {
+      active: '0 4px 8px rgba(100, 255, 100, 0.4)',
+      default: '0 2px 4px rgba(100, 255, 100, 0.3)',
+      disabled: 'none',
+      hover: '0 6px 12px rgba(100, 255, 100, 0.35)',
+    },
+    warning: {
+      active: '0 4px 8px rgba(255, 200, 100, 0.4)',
+      default: '0 2px 4px rgba(255, 200, 100, 0.3)',
+      disabled: 'none',
+      hover: '0 6px 12px rgba(255, 200, 100, 0.35)',
+    },
+  },
+};
diff --git a/pages/button/style-permutations.page.tsx b/pages/button/style-permutations.page.tsx
index 05c0c5bf6b..93a06b0946 100644
--- a/pages/button/style-permutations.page.tsx
+++ b/pages/button/style-permutations.page.tsx
@@ -2,163 +2,99 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import { Button as CloudscapeButton, SpaceBetween } from '~components';
+import Button, { ButtonProps } from '~components/button';
 
-import { palette } from '../app/themes/style-api';
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
-export default function CustomButtonTypes() {
-  return (
-    <ScreenshotArea disableAnimations={true}>
-      <h1>Custom Button Types</h1>
-
-      <SpaceBetween direction="horizontal" size="m">
-        <CustomButton colorTheme="default" variation="primary" id="default">
-          Default
-        </CustomButton>
-        <CustomButton colorTheme="success" variation="primary">
-          Success
-        </CustomButton>
-        <CustomButton colorTheme="error" variation="primary">
-          Error
-        </CustomButton>
-        <CustomButton colorTheme="info" variation="primary">
-          Info
-        </CustomButton>
-        <CustomButton colorTheme="warning" variation="primary">
-          Warning
-        </CustomButton>
-        <CustomButton colorTheme="success" variation="primary" isDisabled={true}>
-          isDisabled
-        </CustomButton>
-        <CustomButton colorTheme="success" variation="primary" isLoading={true}>
-          isLoading
-        </CustomButton>
-      </SpaceBetween>
-    </ScreenshotArea>
-  );
-}
-
-interface CustomButtonProps {
-  children?: React.ReactNode;
-  colorTheme: 'default' | 'error' | 'info' | 'warning' | 'success';
-  id?: string;
-  isDisabled?: boolean;
-  isLoading?: boolean;
-  onClick?: any;
-  variation: 'primary';
-}
-
-function CustomButton({ children, colorTheme, id, isDisabled, isLoading, onClick, variation }: CustomButtonProps) {
-  return (
-    <CloudscapeButton
-      data-testid={id}
-      disabled={isDisabled}
-      loading={isLoading}
-      onClick={onClick}
-      variant={variation}
-      style={{
+const permutations = createPermutations<ButtonProps>([
+  {
+    ariaLabel: ['Border Styles'],
+    children: ['Border Styles'],
+    disabled: [false, true],
+    iconName: ['add-plus'],
+    iconAlt: ['add-plus'],
+    style: [
+      {
         root: {
-          background: getBackground(colorTheme),
-          borderRadius: '4px',
+          borderColor: {
+            active: 'purple',
+            default: 'magenta',
+            hover: 'orange',
+            disabled: 'brown',
+          },
+          borderRadius: '2px',
+          borderWidth: '4px',
+        },
+      },
+    ],
+    variant: ['primary', 'normal', 'link', 'icon', 'inline-icon', 'inline-link'],
+  },
+  {
+    ariaLabel: ['Background and Color Styles'],
+    children: ['Background and Color Styles'],
+    disabled: [false, true],
+    iconName: ['arrow-left'],
+    iconAlt: ['arrow-left'],
+    loading: [false, true],
+    style: [
+      {
+        root: {
+          background: {
+            active: 'brown',
+            default: 'purple',
+            hover: 'brown',
+            disabled: '#ccc',
+          },
           borderWidth: '0px',
-          color: getColor(),
-          focusRing: getFocusRing(),
-          paddingBlock: '12px',
-          paddingInline: '16px',
-          boxShadow: getBoxShadow(colorTheme),
+          color: {
+            active: 'white',
+            default: 'white',
+            hover: 'white',
+            disabled: 'black',
+          },
         },
-      }}
-    >
-      <span style={{ fontSize: '16px' }}>{children}</span>
-    </CloudscapeButton>
-  );
-}
-
-function getBackground(colorTheme: string) {
-  const backgrounds = {
-    default: {
-      active: `light-dark(${palette.teal100}, ${palette.teal10})`,
-      default: `light-dark(${palette.teal80}, ${palette.teal30})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.teal90}, ${palette.teal20})`,
-    },
-    error: {
-      active: `light-dark(${palette.red100}, ${palette.red10})`,
-      default: `light-dark(${palette.red80}, ${palette.red30})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.red90}, ${palette.red20})`,
-    },
-    info: {
-      active: `light-dark(${palette.blue100}, ${palette.blue10})`,
-      default: `light-dark(${palette.blue80}, ${palette.blue40})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.blue90}, ${palette.blue20})`,
-    },
-    success: {
-      active: `light-dark(${palette.green100}, ${palette.green10})`,
-      default: `light-dark(${palette.green80}, ${palette.green30})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.green90}, ${palette.green20})`,
-    },
-    warning: {
-      active: `light-dark(${palette.orange100}, ${palette.orange10})`,
-      default: `light-dark(${palette.orange80}, ${palette.orange40})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.orange90}, ${palette.orange20})`,
-    },
-  };
-  return backgrounds[colorTheme as keyof typeof backgrounds];
-}
-
-function getColor() {
-  return {
-    active: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
-    default: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
-    hover: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
-    disabled: `light-dark(${palette.neutral60}, ${palette.neutral60})`,
-  };
-}
-
-function getFocusRing() {
-  return {
-    borderColor: 'light-dark(rgb(0, 64, 77), rgb(233, 249, 252))',
-    borderWidth: '2px',
-  };
-}
+      },
+    ],
+    variant: ['primary', 'normal', 'link', 'icon', 'inline-icon', 'inline-link'],
+  },
+  {
+    ariaLabel: ['Padding Styles'],
+    children: ['Padding Styles'],
+    disabled: [false, true],
+    iconName: ['delete-marker'],
+    iconAlt: ['delete-marker'],
+    iconAlign: ['left', 'right'],
+    loading: [false, true],
+    fullWidth: [false, true],
+    style: [
+      {
+        root: {
+          borderColor: {
+            active: 'black',
+            default: 'black',
+            disabled: 'black',
+            hover: 'black',
+          },
+          borderWidth: '2px',
+          borderRadius: '1px',
+          paddingBlock: '22px',
+          paddingInline: '44px',
+        },
+      },
+    ],
+    variant: ['primary', 'normal', 'link', 'icon', 'inline-icon', 'inline-link'],
+  },
+]);
 
-function getBoxShadow(colorTheme: string) {
-  const boxShadows = {
-    default: {
-      active: `0 4px 8px light-dark(rgba(0, 128, 128, 0.3), rgba(0, 255, 255, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(0, 128, 128, 0.2), rgba(0, 255, 255, 0.3))`,
-      disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(0, 128, 128, 0.25), rgba(0, 255, 255, 0.35))`,
-    },
-    error: {
-      active: `0 4px 8px light-dark(rgba(255, 0, 0, 0.3), rgba(255, 100, 100, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(255, 0, 0, 0.2), rgba(255, 100, 100, 0.3))`,
-      disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(255, 0, 0, 0.25), rgba(255, 100, 100, 0.35))`,
-    },
-    info: {
-      active: `0 4px 8px light-dark(rgba(0, 0, 255, 0.3), rgba(100, 100, 255, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(0, 0, 255, 0.2), rgba(100, 100, 255, 0.3))`,
-      disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(0, 0, 255, 0.25), rgba(100, 100, 255, 0.35))`,
-    },
-    success: {
-      active: `0 4px 8px light-dark(rgba(0, 255, 0, 0.3), rgba(100, 255, 100, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(0, 255, 0, 0.2), rgba(100, 255, 100, 0.3))`,
-      disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(0, 255, 0, 0.25), rgba(100, 255, 100, 0.35))`,
-    },
-    warning: {
-      active: `0 4px 8px light-dark(rgba(255, 165, 0, 0.3), rgba(255, 200, 100, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(255, 165, 0, 0.2), rgba(255, 200, 100, 0.3))`,
-      disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(255, 165, 0, 0.25), rgba(255, 200, 100, 0.35))`,
-    },
-  };
-  return boxShadows[colorTheme as keyof typeof boxShadows];
+export default function ButtonStylePermutations() {
+  return (
+    <>
+      <h1>Button Style permutations</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView permutations={permutations} render={permutation => <Button {...permutation} />} />
+      </ScreenshotArea>
+    </>
+  );
 }
diff --git a/pages/checkbox/style-custom.page.tsx b/pages/checkbox/style-custom.page.tsx
index 31add54867..a4c7b93cc0 100644
--- a/pages/checkbox/style-custom.page.tsx
+++ b/pages/checkbox/style-custom.page.tsx
@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
+
+import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 
 import { Checkbox, SpaceBetween } from '~components';
 
@@ -8,6 +10,25 @@ import { palette } from '../app/themes/style-api';
 import ScreenshotArea from '../utils/screenshot-area';
 
 export default function CustomCheckbox() {
+  const mode = useCurrentMode(useRef(document.body));
+
+  const colors = {
+    light: {
+      checked: palette.neutral100,
+      default: palette.neutral100,
+      disabled: palette.neutral60,
+      indeterminate: palette.neutral100,
+      readOnly: palette.neutral80,
+    },
+    dark: {
+      checked: palette.neutral10,
+      default: palette.neutral10,
+      disabled: palette.neutral40,
+      indeterminate: palette.neutral10,
+      readOnly: palette.neutral40,
+    },
+  };
+
   const style = {
     input: {
       fill: {
@@ -39,13 +60,7 @@ export default function CustomCheckbox() {
       },
     },
     label: {
-      color: {
-        checked: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-        default: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-        disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
-        indeterminate: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-        readOnly: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
-      },
+      color: { ...colors[mode] },
     },
   };
 
diff --git a/pages/container/style-custom.page.tsx b/pages/container/style-custom.page.tsx
index 67bde0cc2b..ed7628761c 100644
--- a/pages/container/style-custom.page.tsx
+++ b/pages/container/style-custom.page.tsx
@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
+
+import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 
 import { Box, Container, SpaceBetween } from '~components';
 
@@ -8,7 +10,8 @@ import ScreenshotArea from '../utils/screenshot-area';
 import image43 from './images/4-3.png';
 
 export default function CustomContainer() {
-  const background = 'light-dark(#fcfcfc, #000)';
+  const mode = useCurrentMode(useRef(document.body));
+  const background = mode === 'light' ? '#fcfcfc' : '#000';
 
   return (
     <ScreenshotArea>
diff --git a/pages/link/style-custom-types.page.tsx b/pages/link/style-custom-types.page.tsx
index 41935cd84c..3b8e5cb9a0 100644
--- a/pages/link/style-custom-types.page.tsx
+++ b/pages/link/style-custom-types.page.tsx
@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
+
+import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 
 import { Link as CloudscapeLink, SpaceBetween } from '~components';
 
@@ -28,6 +30,9 @@ interface CustomLinkProps {
 }
 
 function CustomLink({ children, colorTheme }: CustomLinkProps) {
+  const mode = useCurrentMode(useRef(document.body));
+  const color = colors[mode][colorTheme];
+  const focusRing = focusRings[mode];
   const linkProps = getLinkProps(colorTheme);
 
   return (
@@ -35,8 +40,8 @@ function CustomLink({ children, colorTheme }: CustomLinkProps) {
       {...linkProps}
       style={{
         root: {
-          color: getColor(colorTheme),
-          focusRing: getFocusRing(),
+          color,
+          focusRing,
         },
       }}
     >
@@ -45,44 +50,75 @@ function CustomLink({ children, colorTheme }: CustomLinkProps) {
   );
 }
 
-function getColor(colorTheme: string) {
-  const colors = {
+const colors = {
+  light: {
     secondary: {
-      active: `light-dark(${palette.blue100}, ${palette.blue20})`,
-      default: `light-dark(${palette.blue80}, ${palette.blue40})`,
-      hover: `light-dark(${palette.green90}, ${palette.blue60})`,
+      active: palette.blue100,
+      default: palette.blue80,
+      hover: palette.green90,
     },
     primary: {
-      active: `light-dark(${palette.blue100}, ${palette.blue20})`,
-      default: `light-dark(${palette.blue80}, ${palette.blue40})`,
-      hover: `light-dark(${palette.blue90}, ${palette.blue40})`,
+      active: palette.blue100,
+      default: palette.blue80,
+      hover: palette.blue90,
     },
     external: {
-      active: `light-dark(${palette.red80}, ${palette.red20})`,
-      default: `light-dark(${palette.red60}, ${palette.red30})`,
-      hover: `light-dark(${palette.red60}, ${palette.red30})`,
+      active: palette.red80,
+      default: palette.red60,
+      hover: palette.red60,
     },
     button: {
-      active: `light-dark(${palette.green100}, ${palette.green10})`,
-      default: `light-dark(${palette.green80}, ${palette.green20})`,
-      hover: `light-dark(${palette.green90}, ${palette.green60})`,
+      active: palette.green100,
+      default: palette.green80,
+      hover: palette.green90,
     },
     info: {
-      active: `light-dark(${palette.teal100}, ${palette.teal10})`,
-      default: `light-dark(${palette.teal90}, ${palette.teal20})`,
-      hover: `light-dark(${palette.teal90}, ${palette.teal20})`,
+      active: palette.teal100,
+      default: palette.teal90,
+      hover: palette.teal90,
     },
-  };
-  return colors[colorTheme as keyof typeof colors];
-}
+  },
+  dark: {
+    secondary: {
+      active: palette.blue20,
+      default: palette.blue40,
+      hover: palette.blue60,
+    },
+    primary: {
+      active: palette.blue20,
+      default: palette.blue40,
+      hover: palette.blue40,
+    },
+    external: {
+      active: palette.red20,
+      default: palette.red30,
+      hover: palette.red30,
+    },
+    button: {
+      active: palette.green10,
+      default: palette.green20,
+      hover: palette.green60,
+    },
+    info: {
+      active: palette.teal10,
+      default: palette.teal20,
+      hover: palette.teal20,
+    },
+  },
+};
 
-function getFocusRing() {
-  return {
-    borderColor: `light-dark(${palette.blue80}, ${palette.red60})`,
+const focusRings = {
+  light: {
+    borderColor: palette.blue80,
     borderRadius: '4px',
     borderWidth: '2px',
-  };
-}
+  },
+  dark: {
+    borderColor: palette.red60,
+    borderRadius: '4px',
+    borderWidth: '2px',
+  },
+};
 
 function getLinkProps(colorTheme: string) {
   const baseProps = {
diff --git a/pages/radio-group/style-custom.page.tsx b/pages/radio-group/style-custom.page.tsx
index 29ff870930..8b2e5f5e81 100644
--- a/pages/radio-group/style-custom.page.tsx
+++ b/pages/radio-group/style-custom.page.tsx
@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
+
+import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 
 import { RadioGroup, SpaceBetween } from '~components';
 
@@ -8,6 +10,8 @@ import { palette } from '../app/themes/style-api';
 import ScreenshotArea from '../utils/screenshot-area';
 
 export default function CustomRadio() {
+  const mode = useCurrentMode(useRef(document.body));
+
   const items = [
     {
       value: 'first',
@@ -27,6 +31,21 @@ export default function CustomRadio() {
     },
   ];
 
+  const colors = {
+    light: {
+      checked: palette.neutral100,
+      default: palette.neutral100,
+      disabled: palette.neutral80,
+      readOnly: palette.neutral80,
+    },
+    dark: {
+      checked: palette.neutral10,
+      default: palette.neutral10,
+      disabled: palette.neutral40,
+      readOnly: palette.neutral40,
+    },
+  };
+
   const style = {
     input: {
       stroke: {
@@ -54,20 +73,10 @@ export default function CustomRadio() {
       },
     },
     label: {
-      color: {
-        checked: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-        default: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-        disabled: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
-        readOnly: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
-      },
+      color: { ...colors[mode] },
     },
     description: {
-      color: {
-        checked: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-        default: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-        disabled: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
-        readOnly: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
-      },
+      color: { ...colors[mode] },
     },
   };
 
diff --git a/pages/toggle/style-custom.page.tsx b/pages/toggle/style-custom.page.tsx
index eee1207858..fca150ea6e 100644
--- a/pages/toggle/style-custom.page.tsx
+++ b/pages/toggle/style-custom.page.tsx
@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
+
+import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 
 import { SpaceBetween, Toggle } from '~components';
 
@@ -8,6 +10,23 @@ import { palette } from '../app/themes/style-api';
 import ScreenshotArea from '../utils/screenshot-area';
 
 export default function CustomToggle() {
+  const mode = useCurrentMode(useRef(document.body));
+
+  const colors = {
+    light: {
+      checked: palette.neutral100,
+      default: palette.neutral100,
+      disabled: palette.neutral90,
+      readOnly: palette.neutral100,
+    },
+    dark: {
+      checked: palette.neutral10,
+      default: palette.neutral10,
+      disabled: palette.neutral40,
+      readOnly: palette.neutral10,
+    },
+  };
+
   const style = {
     input: {
       background: {
@@ -31,12 +50,7 @@ export default function CustomToggle() {
       },
     },
     label: {
-      color: {
-        checked: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-        default: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-        disabled: `light-dark(${palette.neutral90}, ${palette.neutral40})`,
-        readOnly: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
-      },
+      color: { ...colors[mode] },
     },
   };