Textshadow color and width are now customizable.

public/index.html

@@ -1183,6 +1183,17 @@
                                         <span id="blur_strength_counter">select</span>
                                     </div>
                                 </div>
+                                <div id="shadow-width-block" class="range-block">
+                                    <div class="range-block-title">
+                                        Text Shadow Width
+                                    </div>
+                                    <div class="range-block-range">
+                                        <input type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
+                                    </div>
+                                    <div class="range-block-counter">
+                                        <span id="shadow_width_counter">select</span>
+                                    </div>
+                                </div>
 
                             </div>
                             <div>
@@ -1251,6 +1262,10 @@
                                 <toolcool-color-picker id="quote-color-picker"></toolcool-color-picker>
                                 Quote Text
                             </div>
+                            <div class="flex-container">
+                                <toolcool-color-picker id="shadow-color-picker"></toolcool-color-picker>
+                                Shadow Color
+                            </div>
                             <div class="flex-container">
                                 <toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
                                 FastUI BG

public/scripts/power-user.js

@@ -72,12 +72,14 @@ let power_user = {
     sort_rule: null,
     font_scale: 1,
     blur_strength: 10,
+    shadow_width: 2,
 
     main_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBodyColor').trim()}`,
     italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`,
     quote_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeQuoteColor').trim()}`,
     fastui_bg_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeFastUIBGColor').trim()}`,
     blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`,
+    shadow_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeShadowColor').trim()}`,
 
     waifuMode: false,
     movingUI: false,
@@ -99,6 +101,9 @@ const storage_keys = {
     fastui_bg_color: "TavernAI_fastui_bg_color",
     blur_tint_color: "TavernAI_blur_tint_color",
     blur_strength: "TavernAI_blur_strength",
+    shadow_color: "TavernAI_shadow_color",
+    shadow_width: "TavernAI_shadow_width",
+
 
     waifuMode: "TavernAI_waifuMode",
     movingUI: "TavernAI_movingUI",
@@ -183,6 +188,9 @@ async function applyThemeColor(type) {
     if (type === 'blurTint') {
         document.documentElement.style.setProperty('--SmartThemeBlurTintColor', power_user.blur_tint_color);
     }
+    if (type === 'shadow') {
+        document.documentElement.style.setProperty('--SmartThemeShadowColor', power_user.shadow_color);
+    }
 }
 
 async function applyBlurStrength() {
@@ -192,6 +200,13 @@ async function applyBlurStrength() {
 
 }
 
+async function applyShadowWidth() {
+    power_user.shadow_width = Number(localStorage.getItem(storage_keys.shadow_width) ?? 2);
+    document.documentElement.style.setProperty('--shadowWidth', power_user.shadow_width);
+    $("#blur_strength_counter").text(power_user.shadow_width);
+
+}
+
 
 async function applyFontScale() {
     power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
@@ -212,12 +227,20 @@ async function applyTheme(name) {
         { key: 'quote_text_color', selector: '#quote-color-picker', type: 'quote' },
         { key: 'fastui_bg_color', selector: '#fastui-bg-color-picker', type: 'fastUIBG' },
         { key: 'blur_tint_color', selector: '#blur-tint-color-picker', type: 'blurTint' },
+        { key: 'shadow_color', selector: '#shadow-color-picker', type: 'shadow' },
         {
             key: 'blur_strength',
             action: async () => {
                 localStorage.setItem(storage_keys.blur_strength, power_user.blur_strength);
                 await applyBlurStrength();
             }
+        },
+        {
+            key: 'shadow_width',
+            action: async () => {
+                localStorage.setItem(storage_keys.shadow_width, power_user.shadow_width);
+                await applyShadowWidth();
+            }
         }
     ];
 
@@ -289,17 +312,22 @@ function loadPowerUserSettings(settings, data) {
     $(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
     $(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
     $(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
+
     $("#font_scale").val(power_user.font_scale);
     $("#font_scale_counter").text(power_user.font_scale);
 
     $("#blur_strength").val(power_user.blur_strength);
     $("#blur_strength_counter").text(power_user.blur_strength);
 
+    $("#shadow_width").val(power_user.shadow_width);
+    $("#shadow_width_counter").text(power_user.shadow_width);
+
     $("#main-text-color-picker").attr('color', power_user.main_text_color);
     $("#italics-color-picker").attr('color', power_user.italics_text_color);
     $("#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);
+    $("#shadow-color-picker").attr('color', power_user.shadow_color);
 
     for (const theme of themes) {
         const option = document.createElement('option');
@@ -318,7 +346,7 @@ function sortCharactersList(selector = '.character_select') {
     const compareFunc = (first, second) => {
         switch (power_user.sort_rule) {
             case 'boolean':
-                return Number(first[power_user.sort_field] == "true") -  Number(second[power_user.sort_field] == "true");
+                return Number(first[power_user.sort_field] == "true") - Number(second[power_user.sort_field] == "true");
             default:
                 return typeof first[power_user.sort_field] == "string"
                     ? first[power_user.sort_field].localeCompare(second[power_user.sort_field])
@@ -474,6 +502,13 @@ $(document).ready(() => {
         await applyBlurStrength();
     });
 
+    $(`input[name="shadow_width"]`).on('input', async function (e) {
+        power_user.shadow_width = Number(e.target.value);
+        $("#shadow_width_counter").text(power_user.shadow_width);
+        localStorage.setItem(storage_keys.shadow_width, power_user.shadow_width);
+        await applyShadowWidth();
+    });
+
     $("#main-text-color-picker").on('change', (evt) => {
         power_user.main_text_color = evt.detail.rgba;
         applyThemeColor('main');
@@ -485,7 +520,7 @@ $(document).ready(() => {
         applyThemeColor('italics');
         saveSettingsDebounced();
     });
-	
+
     $("#quote-color-picker").on('change', (evt) => {
         power_user.quote_text_color = evt.detail.rgba;
         applyThemeColor('quote');
@@ -504,6 +539,12 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $("#shadow-color-picker").on('change', (evt) => {
+        power_user.shadow_color = evt.detail.rgba;
+        applyThemeColor('shadow');
+        saveSettingsDebounced();
+    });
+
     $("#themes").on('change', function () {
         const themeSelected = $(this).find(':selected').val();
         power_user.theme = themeSelected;
@@ -526,6 +567,8 @@ $(document).ready(() => {
             quote_text_color: power_user.quote_text_color,
             fastui_bg_color: power_user.fastui_bg_color,
             blur_tint_color: power_user.blur_tint_color,
+            shadow_color: power_user.shadow_color,
+            shadow_width: power_user.shadow_width,
         };
 
         const response = await fetch('/savetheme', {
@@ -595,7 +638,7 @@ $(document).ready(() => {
         const value = $(this).find(':selected').val();
         power_user.tokenizer = Number(value);
         saveSettingsDebounced();
-        
+
         // Trigger character editor re-tokenize
         $("#rm_ch_create_block").trigger('input');
         $("#character_popup").trigger('input');

public/style.css

@@ -43,6 +43,8 @@
     --SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9);
     --SmartThemeBlurTintColor: rgba(0, 0, 0, 0.5);
     --SmartThemeBlurStrength: calc(var(--blurStrength) * 1px);
+    --SmartThemeShadowColor: rgba(0, 0, 0, 0.5);
+
 
     --sheldWidth: 800px;
     /*base variable calculated in rems*/
@@ -51,6 +53,10 @@
 
     /* base variable for blur strength slider calculations */
     --blurStrength: 10;
+
+    /* base variable for shadow width slider calculations */
+    --shadowWidth: 2;
+
     color-scheme: only light;
 
 
@@ -63,7 +69,7 @@
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    text-shadow: 0px 0px 3px black;
+    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
 }
 
 html {
@@ -276,7 +282,7 @@ code {
     backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--SmartThemeBlurTintColor);
     -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
-    text-shadow: #000 0 0 3px;
+    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
     scrollbar-width: thin;
     /* transition: all 1s ease-in-out; */
     flex-direction: column;
@@ -390,7 +396,7 @@ code {
     border: 1px solid var(--white30a);
     border-radius: 15px;
     box-shadow: 0 0 5px black;
-    text-shadow: 0 0 3px black;
+    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
     backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
     /* min-width: 200px; */
     z-index: 2000;
@@ -654,7 +660,7 @@ select {
     padding: 6px;
     font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
     margin: 0;
-    text-shadow: #000 0 0 3px;
+    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
     flex: 1;
 }
 
@@ -1844,7 +1850,7 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
     width: max-content;
     margin-left: 5px;
     font-size: calc(var(--mainFontSize) - 0.2rem);
-    color: var(--white50a);
+    color: var(--SmartThemeBodyColor);
 }
 
 .range-block-range {
@@ -2539,7 +2545,7 @@ h5 {
     bottom: 10px;
     margin: 10px;
     opacity: 0.85;
-    text-shadow: 2px 2px 2px var(--black60a);
+    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
 }
 
 .missing-avatar {
@@ -2820,7 +2826,7 @@ a {
     border: 1px solid var(--white30a);
     border-radius: 15px;
     box-shadow: 0 0 5px black;
-    text-shadow: 0 0 3px black;
+    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
 }
 
 .list-group-item:hover {

public/themes/Aqua Blue.json

@@ -4,5 +4,7 @@
     "main_text_color": "rgba(160, 190, 190, 1)",
     "italics_text_color": "rgba(170, 200, 200, 1)",
     "fastui_bg_color": "rgba(7, 54, 66, 0.9)",
-    "blur_tint_color": "rgba(0, 43, 54, 0.8)"
+    "blur_tint_color": "rgba(0, 43, 54, 0.8)",
+    "shadow_color": "rgba(0, 0, 0, 0.5)",
+    "shadow_width": 2
 }

public/themes/Default (Dark).json

@@ -4,5 +4,7 @@
     "main_text_color": "rgb(220, 220, 210)",
     "italics_text_color": "rgb(175, 175, 175)",
     "fastui_bg_color": "rgba(0, 0, 0, 0.9)",
-    "blur_tint_color": "rgba(0, 0, 0, 0.5)"
+    "blur_tint_color": "rgba(0, 0, 0, 0.5)",
+    "shadow_color": "rgba(0, 0, 0, 0.5)",
+    "shadow_width": 2
 }

public/themes/Megumin Red.json

@@ -4,5 +4,7 @@
     "main_text_color": "rgba(230, 230, 230, 1)",
     "italics_text_color": "rgba(200, 200, 200, 1)",
     "fastui_bg_color": "rgba(70, 5, 5, 0.9)",
-    "blur_tint_color": "rgba(50, 10, 10, 0.75)"
+    "blur_tint_color": "rgba(50, 10, 10, 0.75)",
+    "shadow_color": "rgba(0, 0, 0, 0.5)",
+    "shadow_width": 2
 }