proper selection colors

3 files changed, 23 insertions, 2 deletions

diff --git a/src/App.scss b/src/App.scss
index 97d3f516..484039d2 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -887,3 +887,8 @@ option {
   padding: 0;
   position: absolute;
 }
+
+*::selection {
+  color: var(--selectionText);
+  background-color: var(--selectionBackground);
+}
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 40c53172..3e840a52 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -21,6 +21,7 @@ export default {
         '--fg': 'color | #182230',
         '--text': 'color | #b9b9ba',
         '--link': 'color | #d8a070',
+        '--accent': 'color | #d8a070',
         '--cRed': 'color | #FF0000',
         '--cBlue': 'color | #0095ff',
         '--cGreen': 'color | #0fa00f',
@@ -32,7 +33,11 @@ export default {
 
         // Fallback no-background-image color
         // (also useful in some other places like scrollbars)
-        '--wallpaper': 'color | --bg, -2'
+        '--wallpaper': 'color | --bg, -2',
+
+        // Selection colors
+        '--selectionBackground': 'color | --accent',
+        '--selectionText': 'color | $textColor(--accent, --text)'
       }
     }
   ]
diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js
index 2715c827..074a88f0 100644
--- a/src/services/theme_data/theme3_slot_functions.js
+++ b/src/services/theme_data/theme3_slot_functions.js
@@ -1,5 +1,5 @@
 import { convert, brightness } from 'chromatism'
-import { alphaBlend, relativeLuminance } from '../color_convert/color_convert.js'
+import { alphaBlend, getTextColor, relativeLuminance } from '../color_convert/color_convert.js'
 
 export const process = (text, functions, { findColor, findShadow }, { dynamicVars, staticVars }) => {
   const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[#a-zA-Z0-9-,.'"\s]*)\)/.exec(text).groups
@@ -23,6 +23,17 @@ export const colorFunctions = {
       return { ...colorArg, a: amount }
     }
   },
+  textColor: {
+    argsNeeded: 2,
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
+      const [backgroundArg, foregroundArg, preserve = 'preserve'] = args
+
+      const background = convert(findColor(backgroundArg, { dynamicVars, staticVars })).rgb
+      const foreground = convert(findColor(foregroundArg, { dynamicVars, staticVars })).rgb
+
+      return getTextColor(background, foreground, preserve === 'preserve')
+    }
+  },
   blend: {
     argsNeeded: 3,
     exec: (args, { findColor }, { dynamicVars, staticVars }) => {