rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

Theme selection functional with first two themes

Browse Source
This commit is contained in:
ebolam
2022-08-19 08:25:23 -04:00
parent a3fcbd751c
commit 58f0cf8f88
7 changed files with 321 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
aiserver.py
View File

@@ -6669,6 +6669,14 @@ def ui2_connect():
koboldai_vars.send_to_ui() koboldai_vars.send_to_ui()
pass pass
#==================================================================#
# UI V2 CODE Themes
#==================================================================#
@app.route('/themes/<path:path>')
def ui2_serve_themes(path):
return send_from_directory('themes', path)
#==================================================================# #==================================================================#
# File Popup options # File Popup options

152
static/koboldai.css
View File

@@ -10,158 +10,6 @@
} }
} }
:root {
/*----------------Palette Theme--------------------*/
--primary_palette: #afc6ff;
--on_primary_palette: #002d6c;
--primary_containter_palette: #004397;
--on_primary_containter_palette: #d9e2ff;
--secondary_palette: #f7c5ee;
--on_secondary_palette: #5c0059;
--secondary_container_palette: #d663bd;
--on_secondary_container_palette: #4e0039;
--tertiary_palette: #a8d473;
--on_tertiary_palette: #1f3700;
--tertiary_container_palette: #2f4f00;
--on_tertiary_container_palette: #c3f18c;
--error_palette: #ffb4ab;
--on_error_palette: #690005;
--error_container_palette: #93000a;
--on_error_container_palette: #ffdad6;
--background_palette: #1b1b1f;
--on_background_palette:#e3e2e6;
--layer1_palette: #212126;
--layer2_palette: #28282D;
--layer3_palette: #2F2F35;
--layer4_palette: #35353D;
--outline_palette: #8e9099;
--middle_palette: #232328;
--on_middle_palette: #86868e;
--surface_palette: #2f2f36;
--on_surface_palette: #e3e2e6;
/*----------------Advanced Theme--------------------*/
/*General*/
--background: var(--background_palette);
--gamescreen_background: var(--layer2_palette);
--input_background: var(--layer3_palette);
--text: var(--on_background_palette);
--text_to_ai_color: var(--on_background_palette);
--text_edit: var(--on_background_palette);
--statusbar_color: #002d6ca1;
--scrollbar-color: #9b9b9b80;
/*Buttons*/
--enabled_button_text: var(--on_primary_palette);
--enabled_button_background_color: var(--primary_palette);
--enabled_button_border_color: var(--on_primary_palette);
--disabled_button_text: #303030;
--disabled_button_background_color: #495762;
--disabled_button_border_color: #686c68;
/*Sequence, AKA Gens Per Action*/
--sequence_area_background: var(--layer1_palette);
--sequence_background: var(--primary_palette);
--sequence_text: var(--on_primary_palette);
/*Side Menus*/
--tab_color: var(--primary_containter_palette);
--flyout_background: var(--layer1_palette);
--flyout_background_pinned: var(--layer1_palette);
--setting_background: var(--surface_palette);
--setting_text: var(--on_surface_palette);
--sample_order_select_color: var(--primary_palette);
--sample_order_select_color_text: var(--on_primary_palette);
--dropdown_text: var(--on_secondary_palette);
--dropdown_background: var(--secondary_palette);
--rangeslider_background_color: var(--on_primary_containter_palette);
--rangeslider_color: var(--primary_containter_palette);
--rangeslider_circle_color: var(--on_primary_palette);
--help_icon: var(--secondary_palette);
--help_icon_text: var(--on_secondary_palette);
--tooltip_text: var(--on_secondary_palette);
--tooltip_background: var(--secondary_palette);
/*World Info*/
--wi_card_border_color: var(--on_primary_palette);
--wi_card_border_color_to_ai: var(--on_secondary_palette);
--wi_card_bg_color: var(--primary_palette);
--wi_card_text_color: var(--on_primary_palette);
--wi_card_tag_bg_color: var(--primary_palette);
--wi_card_tag_text_color:var(--on_primary_palette);
--wi_tag_color: var(--primary_containter_palette);
--wi_tag_text_color: var(--on_primary_containter_palette);
--wi_folder_background: var(--middle_palette);
/*Popup*/
--popup_background_color: var(--layer4_palette);
--popup_title_bar_color: var(--primary_palette);
--popup_title_bar_color_text: var(--on_primary_palette);
--popup_item_color: var(--surface_palette);
--popup_item_color_text: var(--on_surface_palette);
--popup_hover_color: var(--secondary_palette);
--popup_hover_color_text: var(--on_secondary_palette);
--popup_selected_color: var(--secondary_container_palette);
--popup_selected_color_text: var(--on_secondary_container_palette_palette);
--popup_button_color: var(--primary_containter_palette);
--popup_button_color_text: var(--on_primary_containter_palette);
--popup_cancel_button_color: var(--primary_palette);
--popup_cancel_button_color_text: var(--on_primary_palette);
/*Parameters*/
--scrollbar-size: 6px;
--light_shadow_value: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0px 0px 20px 0 rgba(0, 0, 0, 0.19);
--left_menu_strong_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 25px 0px 20px 0 rgba(0, 0, 0, 0.19);
--right_menu_light_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0px 0px 20px 0 rgba(0, 0, 0, 0.19);
--right_menu_strong_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), -25px 0px 20px 0 rgba(0, 0, 0, 0.19);
--radius_inputbox: 10px;
--radius_unpinned_menu: 20px;
--radius_sequence: 10px;
--radius_settings_background: 5px;
--radius_buttons: 5px;
--radius_item_popup: 2px;
--radius_wi_card: 5px;
/*----------------VARIABLES--------------------*/
--flyout_menu_closed_width: 0px;
--setting_menu_closed_width_no_pins_width: 0px;
--story_options_size: 30%;
--story_pinned_areas_left: "menuicon options gamescreen lefticon"
"menuicon theme theme lefticon"
"menuicon inputrow inputrow lefticon";
--story_pinned_areas_right: "menuicon gamescreen options lefticon"
"menuicon theme theme lefticon"
"menuicon inputrow inputrow lefticon";
--story_pinned_area_widths_left: 30px var(--story_options_size) auto 30px;
--story_pinned_area_widths_right: 30px auto var(--story_options_size) 30px;
--story_pinned_areas: var(--story_pinned_areas_left);
--story_pinned_area_widths: var(--story_pinned_area_widths_left);
}
/*----------------Custom Range Sliders--------------------*/ /*----------------Custom Range Sliders--------------------*/
/*Chrome*/ /*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {

7
static/koboldai.js
View File

@@ -1536,6 +1536,13 @@ function send_world_info(uid) {
} }
//--------------------------------------------General UI Functions------------------------------------ //--------------------------------------------General UI Functions------------------------------------
function Change_Theme(theme) {
console.log(theme);
var css = document.getElementById("CSSTheme");
css.setAttribute("href", "/themes/"+theme+".css");
}
function palette_color(item) { function palette_color(item) {
console.log(item); console.log(item);
console.log(item.id); console.log(item.id);

1
templates/index_new.html
View File

@@ -11,6 +11,7 @@
<script src="static/socket.io.min.js"></script> <script src="static/socket.io.min.js"></script>
<title>KoboldAI Client</title> <title>KoboldAI Client</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link href="themes/monochrome.css" rel="stylesheet" id="CSSTheme">
<link href="static/koboldai.css" rel="stylesheet"> <link href="static/koboldai.css" rel="stylesheet">
<script src="static/koboldai.js"></script> <script src="static/koboldai.js"></script>
<script src="static/favicon.js"></script> <script src="static/favicon.js"></script>

4
templates/settings flyout.html
View File

@@ -225,6 +225,10 @@
<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Theme</h4> <h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Theme</h4>
</div> </div>
<div class="setting_tile_area" id="Theme"> <div class="setting_tile_area" id="Theme">
<select style="color: black;" onchange="Change_Theme(this.value);">
<option selected>Monochrome</option>
<option>GuiAworld</option>
</select>
<div onclick="toggle_setting_category(this);"> <div onclick="toggle_setting_category(this);">
<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Palette</h4> <h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Palette</h4>
</div> </div>

151
themes/GuiAworld.css Normal file
View File

@@ -0,0 +1,151 @@
:root {
/*----------------Palette Theme--------------------*/
--primary_palette: #afc6ff;
--on_primary_palette: #002d6c;
--primary_containter_palette: #004397;
--on_primary_containter_palette: #d9e2ff;
--secondary_palette: #f7c5ee;
--on_secondary_palette: #5c0059;
--secondary_container_palette: #d663bd;
--on_secondary_container_palette: #4e0039;
--tertiary_palette: #a8d473;
--on_tertiary_palette: #1f3700;
--tertiary_container_palette: #2f4f00;
--on_tertiary_container_palette: #c3f18c;
--error_palette: #ffb4ab;
--on_error_palette: #690005;
--error_container_palette: #93000a;
--on_error_container_palette: #ffdad6;
--background_palette: #1b1b1f;
--on_background_palette:#e3e2e6;
--layer1_palette: #212126;
--layer2_palette: #28282D;
--layer3_palette: #2F2F35;
--layer4_palette: #35353D;
--outline_palette: #8e9099;
--middle_palette: #232328;
--on_middle_palette: #86868e;
--surface_palette: #2f2f36;
--on_surface_palette: #e3e2e6;
/*----------------Advanced Theme--------------------*/
/*General*/
--background: var(--background_palette);
--gamescreen_background: var(--layer2_palette);
--input_background: var(--layer3_palette);
--text: var(--on_background_palette);
--text_to_ai_color: var(--on_background_palette);
--text_edit: var(--on_background_palette);
--statusbar_color: #002d6ca1;
--scrollbar-color: #9b9b9b80;
/*Buttons*/
--enabled_button_text: var(--on_primary_palette);
--enabled_button_background_color: var(--primary_palette);
--enabled_button_border_color: var(--on_primary_palette);
--disabled_button_text: #303030;
--disabled_button_background_color: #495762;
--disabled_button_border_color: #686c68;
/*Sequence, AKA Gens Per Action*/
--sequence_area_background: var(--layer1_palette);
--sequence_background: var(--primary_palette);
--sequence_text: var(--on_primary_palette);
/*Side Menus*/
--tab_color: var(--primary_containter_palette);
--flyout_background: var(--layer1_palette);
--flyout_background_pinned: var(--layer1_palette);
--setting_background: var(--surface_palette);
--setting_text: var(--on_surface_palette);
--sample_order_select_color: var(--primary_palette);
--sample_order_select_color_text: var(--on_primary_palette);
--dropdown_text: var(--on_secondary_palette);
--dropdown_background: var(--secondary_palette);
--rangeslider_background_color: var(--on_primary_containter_palette);
--rangeslider_color: var(--primary_containter_palette);
--rangeslider_circle_color: var(--on_primary_palette);
--help_icon: var(--secondary_palette);
--help_icon_text: var(--on_secondary_palette);
--tooltip_text: var(--on_secondary_palette);
--tooltip_background: var(--secondary_palette);
/*World Info*/
--wi_card_border_color: var(--on_primary_palette);
--wi_card_border_color_to_ai: var(--on_secondary_palette);
--wi_card_bg_color: var(--primary_palette);
--wi_card_text_color: var(--on_primary_palette);
--wi_card_tag_bg_color: var(--primary_palette);
--wi_card_tag_text_color:var(--on_primary_palette);
--wi_tag_color: var(--primary_containter_palette);
--wi_tag_text_color: var(--on_primary_containter_palette);
--wi_folder_background: var(--middle_palette);
/*Popup*/
--popup_background_color: var(--layer4_palette);
--popup_title_bar_color: var(--primary_palette);
--popup_title_bar_color_text: var(--on_primary_palette);
--popup_item_color: var(--surface_palette);
--popup_item_color_text: var(--on_surface_palette);
--popup_hover_color: var(--secondary_palette);
--popup_hover_color_text: var(--on_secondary_palette);
--popup_selected_color: var(--secondary_container_palette);
--popup_selected_color_text: var(--on_secondary_container_palette_palette);
--popup_button_color: var(--primary_containter_palette);
--popup_button_color_text: var(--on_primary_containter_palette);
--popup_cancel_button_color: var(--primary_palette);
--popup_cancel_button_color_text: var(--on_primary_palette);
/*Parameters*/
--scrollbar-size: 6px;
--light_shadow_value: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0px 0px 20px 0 rgba(0, 0, 0, 0.19);
--left_menu_strong_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 25px 0px 20px 0 rgba(0, 0, 0, 0.19);
--right_menu_light_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0px 0px 20px 0 rgba(0, 0, 0, 0.19);
--right_menu_strong_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), -25px 0px 20px 0 rgba(0, 0, 0, 0.19);
--radius_inputbox: 10px;
--radius_unpinned_menu: 20px;
--radius_sequence: 10px;
--radius_settings_background: 5px;
--radius_buttons: 5px;
--radius_item_popup: 2px;
--radius_wi_card: 5px;
/*----------------VARIABLES--------------------*/
--flyout_menu_closed_width: 0px;
--setting_menu_closed_width_no_pins_width: 0px;
--story_options_size: 30%;
--story_pinned_areas_left: "menuicon options gamescreen lefticon"
"menuicon theme theme lefticon"
"menuicon inputrow inputrow lefticon";
--story_pinned_areas_right: "menuicon gamescreen options lefticon"
"menuicon theme theme lefticon"
"menuicon inputrow inputrow lefticon";
--story_pinned_area_widths_left: 30px var(--story_options_size) auto 30px;
--story_pinned_area_widths_right: 30px auto var(--story_options_size) 30px;
--story_pinned_areas: var(--story_pinned_areas_left);
--story_pinned_area_widths: var(--story_pinned_area_widths_left);
}

150
themes/Monochrome.css Normal file
View File

@@ -0,0 +1,150 @@
:root {
/*----------------Palette Theme--------------------*/--primary_palette: #afc6ff;
--on_primary_palette: #002d6c;
--primary_containter_palette: #004397;
--on_primary_containter_palette: #d9e2ff;
--secondary_palette: #f7c5ee;
--on_secondary_palette: #5c0059;
--secondary_container_palette: #d663bd;
--on_secondary_container_palette: #4e0039;
--tertiary_palette: #a8d473;
--on_tertiary_palette: #1f3700;
--tertiary_container_palette: #2f4f00;
--on_tertiary_container_palette: #c3f18c;
--error_palette: #ffb4ab;
--on_error_palette: #690005;
--error_container_palette: #93000a;
--on_error_container_palette: #ffdad6;
--background_palette: #1b1b1f;
--on_background_palette:#e3e2e6;
--layer1_palette: #18222a;
--layer2_palette: #28282D;
--layer3_palette: #2F2F35;
--layer4_palette: #35353D;
--outline_palette: #8e9099;
--middle_palette: #232328;
--on_middle_palette: #86868e;
--surface_palette: #2f2f36;
--on_surface_palette: #e3e2e6;
/*----------------Advanced Theme--------------------*/
/*General*/
--background: #222f39;
--gamescreen_background: #12181c;
--input_background: #111b22;
--text: #e0e0e0;
--text_to_ai_color: #cdd9e0;
--text_edit: #759bc5;
--statusbar_color: #002d6ca1;
--scrollbar-color: #3e536780;
/*Buttons*/
--enabled_button_text: #e0e0e0;
--enabled_button_background_color: #446899;
--enabled_button_border_color: #91acd4;
--disabled_button_text: #303030;
--disabled_button_background_color: #495762;
--disabled_button_border_color: #686c68;
/*Sequence, AKA Gens Per Action*/
--sequence_area_background: #161e24;
--sequence_background: #222f39;
--sequence_text: #e0e0e0;
/*Side Menus*/
--tab_color: #2b5471;
--flyout_background: #18222a;
--flyout_background_pinned:var(--layer1_palette);
--setting_background: #273141;
--setting_text: #e0e0e0;
--sample_order_select_color: #244c65;
--sample_order_select_color_text: #e0e0e0;
--dropdown_text: #cfd7a2;
--dropdown_background: #151e26;
--rangeslider_background_color: #1f2934;
--rangeslider_color: #244c65;
--rangeslider_circle_color: #1b354d;
--help_icon: #cfd7a2;
--help_icon_text: #282c2c;
--tooltip_text:var(--on_secondary_palette);
--tooltip_background:var(--secondary_palette);
/*World Info*/
--wi_card_border_color: #002d6c;
--wi_card_border_color_to_ai:var(--on_secondary_palette);
--wi_card_bg_color: #afc6ff;
--wi_card_text_color:var(--on_primary_palette);
--wi_card_tag_bg_color: #afc6ff;
--wi_card_tag_text_color:var(--on_primary_palette);
--wi_tag_color: #004397;
--wi_tag_text_color:var(--on_primary_containter_palette);
--wi_folder_background: #232328;
/*Popup*/
--popup_background_color: #1f262e;
--popup_title_bar_color: #2b5471;
--popup_title_bar_color_text: #e0e0e0;
--popup_item_color: #272f38;
--popup_item_color_text: #e0e0e0;
--popup_hover_color: #244c65;
--popup_hover_color_text: #e0e0e0;
--popup_selected_color: #2f677f;
--popup_selected_color_text:var(--on_secondary_container_palette_palette);
--popup_button_color: #446899;
--popup_button_color_text: #e0e0e0;
--popup_cancel_button_color: #446899;
--popup_cancel_button_color_text: #e0e0e0;
/*Parameters*/
--scrollbar-size: 6px;
--light_shadow_value: 0;
--left_menu_strong_shadow: 0;
--right_menu_light_shadow: 0;
--right_menu_strong_shadow: 0;
--radius_inputbox: 5px;
--radius_unpinned_menu: 10px;
--radius_sequence: 10px;
--radius_settings_background: 5px;
--radius_buttons: 5px;
--radius_item_popup: 2px;
--radius_wi_card: 5px;
/*----------------VARIABLES--------------------*/
--flyout_menu_closed_width: 0px;
--setting_menu_closed_width_no_pins_width: 0px;
--story_options_size: 30%;
--story_pinned_areas_left: "menuicon options gamescreen lefticon"
"menuicon theme theme lefticon"
"menuicon inputrow inputrow lefticon";
--story_pinned_areas_right: "menuicon gamescreen options lefticon"
"menuicon theme theme lefticon"
"menuicon inputrow inputrow lefticon";
--story_pinned_area_widths_left: 30px var(--story_options_size) auto 30px;
--story_pinned_area_widths_right: 30px auto var(--story_options_size) 30px;
--story_pinned_areas: var(--story_pinned_areas_left);
--story_pinned_area_widths: var(--story_pinned_area_widths_left);
}