diff --git a/packages/smooth-code/src/code-tween.tsx b/packages/smooth-code/src/code-tween.tsx
index 632bcf95..c29f6672 100644
--- a/packages/smooth-code/src/code-tween.tsx
+++ b/packages/smooth-code/src/code-tween.tsx
@@ -7,6 +7,8 @@ import {
   map,
   FocusString,
   getCodeColors,
+  getColor,
+  ColorName,
 } from "@code-hike/utils"
 import {
   useStepParser,
@@ -140,7 +142,15 @@ function AfterDimensions({
   return (
     <Wrapper
       htmlProps={htmlProps}
-      style={{ opacity: 1, backgroundColor: bg, color: fg }}
+      style={{
+        opacity: 1,
+        backgroundColor: bg,
+        color: fg,
+        ["--ch-selection-background" as any]: getColor(
+          theme,
+          ColorName.SelectionBackground
+        ),
+      }}
     >
       <SmoothLines
         codeStep={stepInfo}
diff --git a/packages/smooth-code/src/index.scss b/packages/smooth-code/src/index.scss
index a80627e4..0e0d12b6 100644
--- a/packages/smooth-code/src/index.scss
+++ b/packages/smooth-code/src/index.scss
@@ -14,3 +14,8 @@
   line-height: 19px;
   letter-spacing: 0px;
 }
+
+.ch-code-scroll-parent ::selection {
+  background-color: var(--ch-selection-background);
+  color: inherit;
+}
diff --git a/packages/utils/src/theme.ts b/packages/utils/src/theme.ts
index 8e1c1ec9..63f9dba7 100644
--- a/packages/utils/src/theme.ts
+++ b/packages/utils/src/theme.ts
@@ -42,6 +42,7 @@ export enum ColorName {
   InputForeground,
   InputBackground,
   InputBorder,
+  SelectionBackground,
 }
 
 type Color = string | undefined
@@ -188,6 +189,15 @@ export function getColor(
           hc: contrastBorder,
         })
       )
+    case ColorName.SelectionBackground:
+      return (
+        colors["editor.selectionBackground"] ||
+        getDefault(theme, {
+          light: "#ADD6FF",
+          dark: "#264F78",
+          hc: "#f3f518",
+        })
+      )
     default:
       return "#f00"
   }