diff --git a/extensions-builtin/sd_theme_editor/scripts/ui_theme.py b/extensions-builtin/sd_theme_editor/scripts/ui_theme.py index c9060b07..547a01cb 100644 --- a/extensions-builtin/sd_theme_editor/scripts/ui_theme.py +++ b/extensions-builtin/sd_theme_editor/scripts/ui_theme.py @@ -22,82 +22,85 @@ def on_ui_tabs(): with gr.Blocks(analytics_enabled=False) as ui_theme: with gr.Row(): - - themes_dropdown = gr.Dropdown(label="Themes", interactive=True, choices=get_files(themes_folder,[".css, .txt"]), type="value") - save_as_filename = gr.Text(label="Save as Name") - apply_button = gr.Button(elem_id="theme_apply_btn", value="Apply", variant="primary") - reset_button = gr.Button(elem_id="theme_reset_btn", value="Reset", variant="primary") - save_button = gr.Button(value="Save", variant="primary") - #delete_button = gr.Button(value="Delete", variant="primary") + with gr.Column(): + with gr.Row(): + themes_dropdown = gr.Dropdown(label="Themes", interactive=True, choices=get_files(themes_folder,[".css, .txt"]), type="value") + save_as_filename = gr.Text(label="Save as Name") + with gr.Row(): + reset_button = gr.Button(elem_id="theme_reset_btn", value="Reset", variant="primary") + apply_button = gr.Button(elem_id="theme_apply_btn", value="Apply", variant="primary") + save_button = gr.Button(value="Save", variant="primary") + #delete_button = gr.Button(value="Delete", variant="primary") #with gr.Accordion(label="Debug View", open=True): with gr.Row(): vars_text = gr.Textbox(label="Vars", elem_id="theme_vars", show_label=True, lines=7, interactive=False, visible=False) css_text = gr.Textbox(label="Css", elem_id="theme_css", show_label=True, lines=7, interactive=False, visible=False) #result_text = gr.Text(elem_id="theme_result", interactive=False, visible=False) - - with gr.Row(): - gr.Slider(elem_id="theme_hue", label='Hue', minimum=0, maximum=360, step=1) - gr.Slider(elem_id="theme_sat", label='Saturation', minimum=-100, maximum=100, step=1, value=0, interactive=True) - gr.Slider(elem_id="theme_brt", label='Lightness', minimum=-50, maximum=50, step=1, value=0, interactive=True) - with gr.Row(): - gr.Button(elem_id="theme_invert_btn", value="Invert", variant="primary") + with gr.Accordion(label="Theme Color adjustments", open=True): + with gr.Row(): + with gr.Column(scale=6): + gr.Slider(elem_id="theme_hue", label='Hue', minimum=0, maximum=360, step=1) + gr.Slider(elem_id="theme_sat", label='Saturation', minimum=-100, maximum=100, step=1, value=0, interactive=True) + gr.Slider(elem_id="theme_brt", label='Lightness', minimum=-50, maximum=50, step=1, value=0, interactive=True) + + gr.Button(elem_id="theme_invert_btn", value="Invert", variant="primary") with gr.Row(elem_id="ui_theme_settings"): - with gr.Column(): - with gr.Accordion(label="Main colors", open=True): - gr.ColorPicker(elem_id="--main-bg-color", interactive=True, label="Background color") - gr.ColorPicker(elem_id="--primary-color", label="Primary color") - - with gr.Accordion(label="Focus", open=True): - gr.ColorPicker(elem_id="--textarea-focus-color", label="Textarea color") - gr.ColorPicker(elem_id="--input-focus-color", label="Input color") + with gr.Column(): + with gr.Accordion(label="Main colors", open=True): + gr.ColorPicker(elem_id="--main-bg-color", interactive=True, label="Background color") + gr.ColorPicker(elem_id="--primary-color", label="Primary color") + + with gr.Accordion(label="Focus", open=True): + gr.ColorPicker(elem_id="--textarea-focus-color", label="Textarea color") + gr.ColorPicker(elem_id="--input-focus-color", label="Input color") - with gr.Accordion(label="Spacing", open=True): - gr.Slider(elem_id="--outside-gap-size", label='Gap size', minimum=0, maximum=16, step=1) - gr.Slider(elem_id="--inside-padding-size", label='Padding size', minimum=0, maximum=16, step=1) - - #with gr.Column(): - with gr.Accordion(label="Panel colors", open=True): - gr.ColorPicker(elem_id="--label-color", label="Label color") - gr.ColorPicker(elem_id="--panel-bg-color", label="Background color") - gr.ColorPicker(elem_id="--panel-border-color", label="Border color") - gr.Slider(elem_id="--panel-border-radius", label='Border radius', minimum=0, maximum=16, step=1) - - gr.ColorPicker(elem_id="--input-color", label="Input text color") - gr.ColorPicker(elem_id="--input-bg-color", label="Input background color") - gr.ColorPicker(elem_id="--input-border-color", label="Input border color") - - with gr.Column(elem_id="theme_sub-group-collapse"): - #with gr.row(elem_id="theme_sub-group-collapse"): - with gr.Accordion(label="Subgroup / Panel colors", open=True): - gr.ColorPicker(elem_id="--subgroup-bg-color", label="Subgoup background color") - - #gr.ColorPicker(elem_id="--subgroup-label-color", label="Label color", value="#000000") - gr.ColorPicker(elem_id="--subpanel-bg-color", label="Background color") - gr.ColorPicker(elem_id="--subpanel-border-color", label="Border color") - gr.Slider(elem_id="--subpanel-border-radius", label='Border radius', minimum=0, maximum=16, step=1) - - gr.ColorPicker(elem_id="--subgroup-input-color", label="Input text color") - gr.ColorPicker(elem_id="--subgroup-input-bg-color", label="Input background color") - gr.ColorPicker(elem_id="--subgroup-input-border-color", label="Input border color") - - #with gr.Column(): - with gr.Accordion(label="Navigation menu colors", open=True): - gr.ColorPicker(elem_id="--nav-bg-color", label="Background color") - gr.ColorPicker(elem_id="--nav-color", label="Text color") - gr.ColorPicker(elem_id="--nav-hover-color", label="Hover color") - - with gr.Accordion(label="Icon colors", open=True): - gr.ColorPicker(elem_id="--icon-color", label="Text color") - gr.ColorPicker(elem_id="--icon-hover-color", label="Hover color") - - with gr.Accordion(label="Other colors", open=True): - gr.ColorPicker(elem_id="--text-color", label="Text color") - gr.ColorPicker(elem_id="--placeholder-color", label="Placeholder color") - gr.ColorPicker(elem_id="--cancel-color", label="Cancel/Interrupt color") + with gr.Accordion(label="Spacing", open=True): + gr.Slider(elem_id="--outside-gap-size", label='Gap size', minimum=0, maximum=16, step=1) + gr.Slider(elem_id="--inside-padding-size", label='Padding size', minimum=0, maximum=16, step=1) + + with gr.Accordion(label="Panel colors", open=True): + gr.ColorPicker(elem_id="--label-color", label="Label color") + gr.ColorPicker(elem_id="--panel-bg-color", label="Background color") + gr.ColorPicker(elem_id="--panel-border-color", label="Border color") + gr.Slider(elem_id="--panel-border-radius", label='Border radius', minimum=0, maximum=16, step=1) + + gr.ColorPicker(elem_id="--input-color", label="Input text color") + gr.ColorPicker(elem_id="--input-bg-color", label="Input background color") + gr.ColorPicker(elem_id="--input-border-color", label="Input border color") + with gr.Column(): + with gr.Row(elem_id="theme_sub-group-collapse"): + + with gr.Accordion(label="Subgroup / Panel colors", open=True): + gr.ColorPicker(elem_id="--subgroup-bg-color", label="Subgoup background color") + #gr.ColorPicker(elem_id="--subgroup-label-color", label="Label color", value="#000000") + gr.ColorPicker(elem_id="--subpanel-bg-color", label="Background color") + gr.ColorPicker(elem_id="--subpanel-border-color", label="Border color") + gr.Slider(elem_id="--subpanel-border-radius", label='Border radius', minimum=0, maximum=16, step=1) + + gr.ColorPicker(elem_id="--subgroup-input-color", label="Input text color") + gr.ColorPicker(elem_id="--subgroup-input-bg-color", label="Input background color") + gr.ColorPicker(elem_id="--subgroup-input-border-color", label="Input border color") + + with gr.Row(): + with gr.Column(): + with gr.Accordion(label="Navigation menu colors", open=True): + gr.ColorPicker(elem_id="--nav-bg-color", label="Background color") + gr.ColorPicker(elem_id="--nav-color", label="Text color") + gr.ColorPicker(elem_id="--nav-hover-color", label="Hover color") + + with gr.Accordion(label="Icon colors", open=True): + gr.ColorPicker(elem_id="--icon-color", label="Text color") + gr.ColorPicker(elem_id="--icon-hover-color", label="Hover color") + + with gr.Accordion(label="Other colors", open=True): + gr.ColorPicker(elem_id="--text-color", label="Text color") + gr.ColorPicker(elem_id="--placeholder-color", label="Placeholder color") + gr.ColorPicker(elem_id="--cancel-color", label="Cancel/Interrupt color") + def save_theme( vars_text, css_text, filename):