diff --git a/src/css/colors.css b/src/css/colors.css
index b9a5cb5..e2fc11a 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -51,6 +51,8 @@
   --clr-accent-5: oklch(0.36 0.0098 17.62); /* horns */
   --clr-accent-6: oklch(0.46 0.0826 32.71); /* tail spikes */
 
+  --clr-selection: var(--clr-accent-1);
+  --clr-selection-text: var(--theme-c-text-dark);
   --clr-nav-link-active: var(--clr-accent-1);
   --clr-heading-underline: var(--clr-accent-1);
   --clr-heading-data: var(--clr-accent-1);
@@ -70,6 +72,8 @@
   --clr-accent-8: oklch(0.71 0.0848 236.58);
   --clr-accent-9: oklch(0.4 0.0437 228.49);
 
+  --clr-selection: var(--clr-accent-7);
+  --clr-selection-text: var(--theme-c-text-dark);
   --clr-nav-link-active: var(--clr-accent-7);
   --clr-heading-underline: var(--clr-accent-7);
   --clr-heading-data: var(--clr-accent-7);
@@ -86,6 +90,8 @@
   --clr-accent-4: oklch(0.81 0.07 74.77);
   --clr-accent-5: oklch(0.69 0.12 95.34);
 
+  --clr-selection: var(--clr-accent-1);
+  --clr-selection-text: var(--theme-c-text-dark);
   --clr-nav-link-active: var(--clr-accent-1);
   --clr-heading-underline: var(--clr-accent-1);
   --clr-heading-data: var(--clr-accent-1);
diff --git a/src/css/style.css b/src/css/style.css
index 5ea77bb..c0db3a8 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -23,3 +23,8 @@ h5,
 h6 {
   font-family: var(--font-family-headings);
 }
+
+::selection {
+  color: var(--clr-selection-text);
+  background-color: var(--clr-selection);
+}