diff --git a/src/code-view/styles.scss b/src/code-view/styles.scss
index b78fb38..d17f98f 100644
--- a/src/code-view/styles.scss
+++ b/src/code-view/styles.scss
@@ -5,8 +5,29 @@
 
 @use "../../node_modules/@cloudscape-design/design-tokens/index.scss" as cs;
 
+$color-background-code-view-light: #f8f8f8;
+$color-background-code-view-dark: #282c34;
+$color-background-code-view-one-theme-light: #f5f5f5;
+$color-background-code-view-one-theme-dark: #3b3b3b;
+
+@mixin themed-background {
+  background-color: $color-background-code-view-light;
+  :global(.awsui-dark-mode) &,
+  :global(.awsui-polaris-dark-mode) & {
+    background-color: $color-background-code-view-dark;
+  }
+  :global(.awsui-one-theme) & {
+    background-color: $color-background-code-view-one-theme-light;
+  }
+  :global(.awsui-one-theme.awsui-dark-mode) &,
+  :global(.awsui-one-theme.awsui-polaris-dark-mode) & {
+    background-color: $color-background-code-view-one-theme-dark;
+  }
+}
+
 .root {
-  background-color: cs.$color-background-code-view;
+  @include themed-background;
+
   position: relative;
   border-start-start-radius: cs.$border-radius-tiles;
   border-start-end-radius: cs.$border-radius-tiles;
@@ -38,7 +59,7 @@
 }
 
 .line-number {
-  background-color: cs.$color-background-code-view;
+  @include themed-background;
 
   white-space: nowrap;
   position: sticky;