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