Some UI edits that I personally made and use

[pflky]

Overall I think the changes listed below are a good change for the UI, without being intrusive, and keeping to the original theme while being more pleasing to the eye and to use, and I believe all or most of these should be the new default of the UI for Forge.

I used to create more extensive custom UI changes with my own theme, however, with gradio updates the naming of things like the ".svelte" elements tends to change all the time, so it was constantly broken and I whittled it down to much simpler and more basic changes that can be applied without getting too far from the base UI, making it simpler to edit things back to working order if changes do occur.

Of course some considerations have to be made for differences like a user using light mode and dark mode (although I think the majority of people prefer dark mode), which is why I think simple accent color options of elements in the UI should become apart of the default options. Most of the rest are just minor changes such as in alignment and sizing. I also created these changes to make the UI more OLED monitor friendly to keep from having "hotspot" elements that could increase burn-in.

For me, these changes are the necessary minimum before I'll even use WebUI, and I think most users would welcome them.

UI changes list:

SD/XL/FLUX capitalized for better legibility (easy main_entry.py edit).

Sampler and Scheduler centered in the box, made bold, and enlarged to 1.5em. Options like these should be more prominent in the UI, as people will be interacting with them the most. The dropdown list itself remains unchanged.

Thicker thumb slider and a color change to blend with the UI and be easier on the eyes. This also helps with usability by making the thumb track itself easier to click to move the thumb. Thumb color change to blend with the default UI.

Generate button color change to blend with the UI and be easier on the eyes (orange was always ugly and visually distracting, but this and the interrupt/skip bar should both at least have accent color options by default, along with things like thumbs and sliders).

Generate forever options made to look more streamlined (ideally there should be a built-in accent color option for these types of things).

Progress bar text aligned to the left (simple, but better, no shifting around when information changes).

Scrollbar is visually removed from main pages, but scrolling is still possible. This is a good look in general, but also great for if you fullscreen the WebUI, as you don't have a large glaring scrollbar to look at and you don't have to worry about accent coloring it to the theme. Of course you lose the ability to manually scroll by click holding the scrollbar, but you can still scroll by all other means such as scrollwheel and arrows even if no scrollbar is visible, so I think it could be a feature in the UI settings that can be toggled on/off.

Simplified Fullscreen image viewer with only a black background, no UI elements visible except when moused over, and generated image scaled to fit the entire screen. A UI settings option can be added that says something like "Enable No Distractions mode on Fullscreen image viewer". It's a great feature for if you want to just view an image in fullscreen with no distractions or want to "generate forever" and just see the results.

Not pictured: Number values centered in their boxes.

Not pictured: HTML log p.time and p.vram increased in size to 1.5em (basically, the generation time display and the active/reserved/all memory usage display). Elements like these should be larger as they will often be focused upon by the user,

Personally I edit things to hide the prompt used altogether, and only display the generation time and ram usage, but when I want to view the prompt information, I prefer it to be enlarged. So this could also be a UI settings toggle. The default should be 1.5em and the ability to toggle the visibility of it in the UI settings.

Added code to enable subsample antialiasing of fronts in the WebUI, makes text smooth and crisp.

Out of personal preference, I made the toolbar buttons under the generate area invisible, as I do not often swap images from txt2img to img2img. I do not suggest this to be the default, but for me it cleans up unused clutter in the UI. This code can be easily removed.

All of these changes are coded to apply to both txt2img and img2img.

It's a little sloppy and there's some lines of useless code, but here's the code I use to achieve the look in the screenshot:
add-to-style-css.txt