rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-02-09 08:38:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

separate chat and menu background color selection

Browse Source
This commit is contained in:
RossAscends 2023-09-22 16:54:51 +09:00
parent b84fbed800
commit b1ab1451ec
4 changed files with 24 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/css/toggle-dependent.css
View File

@ -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 {

12
public/index.html
View File

@ -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">
<toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
<span data-i18n="FastUI BG">FastUI BG</span>
</div> -->
<div class="flex-container">
<toolcool-color-picker id="chat-tint-color-picker"></toolcool-color-picker>
<span data-i18n="Chat Background">Chat Background</span>
</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>
@ -4545,4 +4545,4 @@
</script>
</body>
</html>
</html>

15
public/scripts/power-user.js
View File

@ -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');

5
public/style.css
View File

@ -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;
@ -3619,4 +3620,4 @@ a {
height: 100vh;
z-index: 9999;
}
}
}