separate chat and menu background color selection

public/css/toggle-dependent.css

@@ -257,28 +257,11 @@ body.no-blur #bg_custom {
 
 }
 
-body:not(.bubblechat).no-blur #chat,
 body.no-blur #top-bar,
 body.no-blur #send_form {
     background-color: var(--SmartThemeBlurTintColor) !important;
 }
 
-
-/* body.no-blur #options,
-body.no-blur .ui-widget-content,
-body.no-blur #floatingPrompt,
-body.no-blur #extensionsMenu,
-body.no-blur .list-group,
-body.no-blur #character_popup,
-body.no-blur #world_popup,
-body.no-blur #dialogue_popup,
-body.no-blur #select_chat_popup,
-body.no-blur .drawer-content,
-body.no-blur .select2-results__options {
-    background-color: black !important;
-}
- */
-
 /* wAIfu mode*/
 
 body.waifuMode #top-bar {

public/index.html

@@ -2721,13 +2721,13 @@
                                     <toolcool-color-picker id="shadow-color-picker"></toolcool-color-picker>
                                     <span data-i18n="Shadow Color">Text Shadow</span>
                                 </div>
-                                <!--                             <div class="flex-container">
+                                <div class="flex-container">
-                                    <toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
+                                    <toolcool-color-picker id="chat-tint-color-picker"></toolcool-color-picker>
-                                    <span data-i18n="FastUI BG">FastUI BG</span>
+                                    <span data-i18n="Chat Background">Chat Background</span>
-                                </div> -->
+                                </div>
                                 <div class="flex-container">
                                     <toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
-                                    <span data-i18n="Blur Tint">UI Background</span>
+                                    <span data-i18n="UI Background">UI Background</span>
                                 </div>
                                 <div class="flex-container">
                                     <toolcool-color-picker id="border-color-picker"></toolcool-color-picker>

public/scripts/power-user.js

@@ -123,6 +123,7 @@ let power_user = {
     italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`,
     quote_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeQuoteColor').trim()}`,
     blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`,
+    chat_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeChatTintColor').trim()}`,
     user_mes_blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeUserMesBlurTintColor').trim()}`,
     bot_mes_blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBotMesBlurTintColor').trim()}`,
     shadow_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeShadowColor').trim()}`,
@@ -223,6 +224,7 @@ const storage_keys = {
     italics_text_color: "TavernAI_italics_text_color",
     quote_text_color: "TavernAI_quote_text_color",
     blur_tint_color: "TavernAI_blur_tint_color",
+    chat_tint_color: "TavernAI_chat_tint_color",
     user_mes_blur_tint_color: "TavernAI_user_mes_blur_tint_color",
     bot_mes_blur_tint_color: "TavernAI_bot_mes_blur_tint_color",
     blur_strength: "TavernAI_blur_strength",
@@ -515,6 +517,9 @@ async function applyThemeColor(type) {
     if (type === 'blurTint') {
         document.documentElement.style.setProperty('--SmartThemeBlurTintColor', power_user.blur_tint_color);
     }
+    if (type === 'chatTint') {
+        document.documentElement.style.setProperty('--SmartThemeChatTintColor', power_user.chat_tint_color);
+    }
     if (type === 'userMesBlurTint') {
         document.documentElement.style.setProperty('--SmartThemeUserMesBlurTintColor', power_user.user_mes_blur_tint_color);
     }
@@ -574,6 +579,7 @@ async function applyTheme(name) {
         { key: 'italics_text_color', selector: '#italics-color-picker', type: 'italics' },
         { key: 'quote_text_color', selector: '#quote-color-picker', type: 'quote' },
         { key: 'blur_tint_color', selector: '#blur-tint-color-picker', type: 'blurTint' },
+        { key: 'chat_tint_color', selector: '#chat-tint-color-picker', type: 'chatTint' },
         { key: 'user_mes_blur_tint_color', selector: '#user-mes-blur-tint-color-picker', type: 'userMesBlurTint' },
         { key: 'bot_mes_blur_tint_color', selector: '#bot-mes-blur-tint-color-picker', type: 'botMesBlurTint' },
         { key: 'shadow_color', selector: '#shadow-color-picker', type: 'shadow' },
@@ -892,6 +898,7 @@ function loadPowerUserSettings(settings, data) {
     $("#quote-color-picker").attr('color', power_user.quote_text_color);
     //$("#fastui-bg-color-picker").attr('color', power_user.fastui_bg_color);
     $("#blur-tint-color-picker").attr('color', power_user.blur_tint_color);
+    $("#chat-tint-color-picker").attr('color', power_user.chat_tint_color);
     $("#user-mes-blur-tint-color-picker").attr('color', power_user.user_mes_blur_tint_color);
     $("#bot-mes-blur-tint-color-picker").attr('color', power_user.bot_mes_blur_tint_color);
     $("#shadow-color-picker").attr('color', power_user.shadow_color);
@@ -1229,6 +1236,7 @@ async function saveTheme() {
         quote_text_color: power_user.quote_text_color,
         //fastui_bg_color: power_user.fastui_bg_color,
         blur_tint_color: power_user.blur_tint_color,
+        chat_tint_color: power_user.chat_tint_color,
         user_mes_blur_tint_color: power_user.user_mes_blur_tint_color,
         bot_mes_blur_tint_color: power_user.bot_mes_blur_tint_color,
         shadow_color: power_user.shadow_color,
@@ -1934,6 +1942,13 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $("#chat-tint-color-picker").on('change', (evt) => {
+        power_user.chat_tint_color = evt.detail.rgba;
+        applyThemeColor('chatTint');
+        saveSettingsDebounced();
+    });
+
+
     $("#user-mes-blur-tint-color-picker").on('change', (evt) => {
         power_user.user_mes_blur_tint_color = evt.detail.rgba;
         applyThemeColor('userMesBlurTint');

public/style.css

@@ -47,6 +47,7 @@
     --SmartThemeQuoteColor: rgb(225, 138, 36);
     /* --SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9); */
     --SmartThemeBlurTintColor: rgba(23, 23, 23, 1);
+    --SmartThemeChatTintColor: rgba(23, 23, 23, 1);
     --SmartThemeUserMesBlurTintColor: rgba(0, 0, 0, 0.3);
     --SmartThemeBotMesBlurTintColor: rgba(60, 60, 60, 0.3);
     --SmartThemeBlurStrength: calc(var(--blurStrength) * 1px);
@@ -485,7 +486,7 @@ hr {
     border-left: 1px solid var(--SmartThemeBorderColor);
     border-right: 1px solid var(--SmartThemeBorderColor);
     backdrop-filter: blur(var(--SmartThemeBlurStrength));
-    background-color: var(--SmartThemeBlurTintColor);
+    background-color: var(--SmartThemeChatTintColor);
     -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
     text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
     scrollbar-width: thin;