Style <mark>ed text.

mattbischoff · Apr 13, 2024 · 6fa0277 · 6fa0277
1 parent 87bfc91
commit 6fa0277
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/_sass/abstracts/_variables.scss b/_sass/abstracts/_variables.scss
@@ -16,11 +16,13 @@ $light-mode-text-secondary: color(display-p3 0.364 0.036 0.08 / 0.7);
 $light-mode-text-emphasized: color(display-p3 0.036 0.004 0.008);
 $light-mode-accent: color(display-p3 0.9 0.09 0.2);
 $light-mode-link-underline: color(display-p3 0.9 0.09 0.2 / 0.5);
+$light-mode-highlight: color(display-p3 0.9 0.09 0.2 / 0.2);
 
 
 $dark-mode-background: color(display-p3 0.018 0.002 0.004);
 $dark-mode-text: color(display-p3 0.988 0.892 0.903);
 $dark-mode-text-secondary: color(display-p3 0.988 0.892 0.903 / 0.7);
 $dark-mode-text-emphasized: color(display-p3 0.998 0.982 0.984);
 $dark-mode-accent: color(display-p3 0.9 0.3 0.4);
-$dark-mode-link-underline: color(display-p3 0.9 0.09 0.2 / 0.5);
+$dark-mode-link-underline: color(display-p3 0.9 0.09 0.2 / 0.5);
+$dark-mode-highlight: color(display-p3 0.9 0.3 0.4 / 0.6);
diff --git a/_sass/themes/_themes.scss b/_sass/themes/_themes.scss
@@ -7,13 +7,15 @@ $themes: (
 		text-emphasized: $light-mode-text-emphasized,
 		accent: $light-mode-accent,
 		link-underline: $light-mode-link-underline,
-		text-secondary: $light-mode-text-secondary),
+		text-secondary: $light-mode-text-secondary,
+		highlight: $light-mode-highlight),
 	dark: (background: $dark-mode-background,
 		text: $dark-mode-text,
 		text-emphasized: $dark-mode-text-emphasized,
 		accent: $dark-mode-accent,
 		link-underline: $dark-mode-link-underline,
-		text-secondary: $dark-mode-text-secondary)
+		text-secondary: $dark-mode-text-secondary,
+		highlight: $dark-mode-highlight)
 );
 
 @mixin theme($theme) {
@@ -86,6 +88,12 @@ $themes: (
 	footer {
 		border-color: map.get($colors, link-underline);
 	}
+
+
+	mark {
+		color: inherit;
+		background: map.get($colors, highlight);
+	}
 }
 
 @media (prefers-color-scheme: light) {