Merge pull request #125 from code-hike/selection-color

Selection color from theme

Author: pomber

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}

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;
+}

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"
   }