From 6440fd384099047e07bc36e8475cdf9bd50b7d76 Mon Sep 17 00:00:00 2001
From: LenAnderson <Anderson.Len@outlook.com>
Date: Fri, 5 Apr 2024 11:20:55 -0400
Subject: [PATCH] add theming to autocomplete (theme, dark, light)

---
 public/scripts/slash-commands.js |  1 +
 public/style.css                 | 34 ++++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/public/scripts/slash-commands.js b/public/scripts/slash-commands.js
index 2c9e6079f..95bef534a 100644
--- a/public/scripts/slash-commands.js
+++ b/public/scripts/slash-commands.js
@@ -1995,6 +1995,7 @@ function setSlashCommandAutocomplete(textarea) {
 export function setNewSlashCommandAutoComplete(textarea, isFloating = false) {
     const dom = document.createElement('ul'); {
         dom.classList.add('slashCommandAutoComplete');
+        dom.classList.add('defaultThemed');
     }
     let isReplacable = false;
     let result = [];
diff --git a/public/style.css b/public/style.css
index f9101f6fa..46ccb1d45 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1062,6 +1062,39 @@ select {
     order: 3;
 }
 
+.slashCommandAutoComplete.defaultDark {
+    --ac-color-border: rgb(69 69 69);
+    --ac-color-background: rgb(32 32 32);
+    --ac-color-text: rgb(204 204 204);
+    --ac-color-matched-background: transparent;
+    --ac-color-matched-text: rgb(108 171 251);
+    --ac-color-selected-background: rgb(32 57 92);
+    --ac-color-selected-text: rgb(255 255 255);
+    --ac-color-hovered-background: rgb(43 45 46);
+    --ac-color-hovered-text: rgb(204 204 204);
+}
+.slashCommandAutoComplete.defaultLight {
+    --ac-color-border: rgb(200 200 200);
+    --ac-color-background: rgb(248 248 248);
+    --ac-color-text: rgb(59 59 59);
+    --ac-color-matched-background: transparent;
+    --ac-color-matched-text: rgb(61 104 188);
+    --ac-color-selected-background: rgb(232 232 232);
+    --ac-color-selected-text: rgb(0 0 0);
+    --ac-color-hovered-background: rgb(242 242 242);
+    --ac-color-hovered-text: rgb(59 59 59);
+}
+.slashCommandAutoComplete.defaultThemed {
+    --ac-color-border: var(--SmartThemeBorderColor);
+    --ac-color-background: var(--SmartThemeChatTintColor);
+    --ac-color-text: var(--SmartThemeEmColor);
+    --ac-color-matched-background: transparent;
+    --ac-color-matched-text: var(--SmartThemeQuoteColor);
+    --ac-color-selected-background: color-mix(in srgb, rgb(128 128 128) 75%, var(--SmartThemeChatTintColor));
+    --ac-color-selected-text: var(--SmartThemeBodyColor);
+    --ac-color-hovered-background: color-mix(in srgb, rgb(128 128 128) 30%, var(--SmartThemeChatTintColor));
+    --ac-color-hovered-text: var(--SmartThemeEmColor);
+}
 .slashCommandAutoComplete {
     --ac-color-border: rgb(69, 69, 69);
     --ac-color-background: rgb(32, 32, 32);
@@ -1088,6 +1121,7 @@ select {
     > .item {
         cursor: pointer;
         padding: 3px;
+        text-shadow: none;
         &:hover {
             background-color: var(--ac-color-hovered-background);
             color: var(--ac-color-hovered-text);