diff --git a/src/components/CodePreview/index.tsx b/src/components/CodePreview/index.tsx
index fa2fcd436..97f0881da 100644
--- a/src/components/CodePreview/index.tsx
+++ b/src/components/CodePreview/index.tsx
@@ -62,7 +62,7 @@ const ActionButtons: React.FC<CodeSnippetProps> = ({
   selectedLanguage,
   isLargeViewport,
 }) => {
-  const { oppositeTheme } = useTheme();
+  const { theme } = useTheme();
   return (
     <div className="button-container">
       {showStackblitzBtn && projectTitle !== undefined && (
@@ -78,7 +78,7 @@ const ActionButtons: React.FC<CodeSnippetProps> = ({
         aria-label={isLargeViewport ? "" : "Copy code"}
         variant={isLargeViewport ? "tertiary" : "icon"}
         size={isLargeViewport ? "small" : "medium"}
-        theme={oppositeTheme}
+        theme={theme}
         monochrome
         onClick={() => {
           navigator.clipboard.writeText(code);
@@ -107,7 +107,7 @@ const ToggleShowButton: React.FC<ToggleShowProps> = ({
   showMore,
   setShowMore,
 }) => {
-  const { oppositeTheme } = useTheme();
+  const { theme } = useTheme();
   return (
     <div className="button-container">
       {type === "pattern" && (
@@ -115,7 +115,7 @@ const ToggleShowButton: React.FC<ToggleShowProps> = ({
           variant="tertiary"
           size="small"
           onClick={() => setShow(!show)}
-          theme={oppositeTheme}
+          theme={theme}
           monochrome
         >
           {!show ? "Show" : "Hide"} code
@@ -133,8 +133,8 @@ const ToggleShowButton: React.FC<ToggleShowProps> = ({
           variant="tertiary"
           size="small"
           onClick={() => setShowMore(!showMore)}
-          theme={oppositeTheme}
           monochrome
+          theme={theme}
         >
           Show {showMore ? "less" : "full "} code
           <SlottedSVG
diff --git a/src/content/structured/patterns/components/StackBlitzButtonTestApp/index.tsx b/src/content/structured/patterns/components/StackBlitzButtonTestApp/index.tsx
index 86bbb5d19..d2ccb7146 100644
--- a/src/content/structured/patterns/components/StackBlitzButtonTestApp/index.tsx
+++ b/src/content/structured/patterns/components/StackBlitzButtonTestApp/index.tsx
@@ -23,7 +23,7 @@ const StackblitzButtonTestApp: FC<StackblitzButtonTestAppProps> = ({
   title,
   branch,
 }) => {
-  const { oppositeTheme } = useTheme();
+  const { theme } = useTheme();
   const viewportWidth = useViewportWidth();
   const isLargeViewport: boolean = viewportWidth > 992;
 
@@ -40,7 +40,7 @@ const StackblitzButtonTestApp: FC<StackblitzButtonTestAppProps> = ({
       aria-label="Open code example in StackBlitz"
       size={isLargeViewport ? "small" : "medium"}
       variant={isLargeViewport ? "tertiary" : "icon"}
-      theme={oppositeTheme}
+      theme={theme}
       monochrome
       onClick={() => createStackblitzProject()}
     >
diff --git a/src/content/structured/patterns/components/StackblitzButton/index.tsx b/src/content/structured/patterns/components/StackblitzButton/index.tsx
index 56092fa7f..36e2c081d 100644
--- a/src/content/structured/patterns/components/StackblitzButton/index.tsx
+++ b/src/content/structured/patterns/components/StackblitzButton/index.tsx
@@ -27,7 +27,7 @@ const StackblitzButton: FC<StackblitzProps> = ({
   projectDescription,
   isJSX = true,
 }) => {
-  const { oppositeTheme } = useTheme();
+  const { theme } = useTheme();
   const viewportWidth = useViewportWidth();
   const isLargeViewport: boolean = viewportWidth > 992;
 
@@ -95,7 +95,7 @@ const StackblitzButton: FC<StackblitzProps> = ({
       aria-label="Open code example in StackBlitz"
       size={isLargeViewport ? "small" : "medium"}
       variant={isLargeViewport ? "tertiary" : "icon"}
-      theme={oppositeTheme}
+      theme={theme}
       monochrome
       onClick={() => createStackblitzProject()}
     >