Dark-Themes-SD-WebUI-Automatic1111 (user.css) UPDATE: 01/01/2023 - New Repository

[Nacurutu]

New Repository:

https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111

Info and steps there.

[cibernicola]

extremely perfect
well done!

[Nacurutu]

Thanks..!

[Nacurutu]

UPDATE -- 12/19/2022 - alpha-v1.01

New font for user inputs
Minor fixes

😉

[ice051128]

Custom Dark theme for Stable Diffusion WebUI

Disclamer:
I dont know anything about CSS or coding, so, this is a janky alpha version of a CSS file made by try and error that we can use to simulate a dark mode on the Stable Diffusion WebUI.

What you can get with this?

• Changes the dark theme color scheme for your Stable Diffusion WebUI
• Purely aesthetic changes

-Color Scheme: Black/Pink/Green
-Stable Diffusion WebUI Logo
-Stable Diffusion WebUI favicon
-Buttons backgound change on Hover
-Focus the last interaction
-"Source code pro" text font

-- Custom Dark theme for Stable Diffusion WebUI screenshot --

How to install

Steps:

• Activate dark mode on the webui-user.bat ->
  set COMMANDLINE_ARGS= --theme=dark
• Download and Save the user.css in your Stable Diffusion WebUI's root folder
  user.css -> https://pastebin.com/9y30m7dS -UPDATED -- 12/19/2022-
• Click on the next image (should open in a new tab)

• Right click on the image
• Save the image as logo.png in your Stable Diffusion WebUI's root folder
• Run webui-user.bat

Done.

Fav Icon

If you want to change the favicon, you will need to do the following

Steps:

• Click on the next image (should open in a new tab)

• Right click on the image
• Save the image as favicon.svg in your Stable Diffusion WebUI's root folder
• Add the favicon updating the webui.py file on line 134 with the following code:

favicon_path="favicon.svg",

Example:

app, local_url, share_url = demo.launch(
            share=cmd_opts.share,
            server_name="0.0.0.0" if cmd_opts.listen else None,
            server_port=cmd_opts.port,
            debug=cmd_opts.gradio_debug,
            auth=[tuple(cred.split(':')) for cred in cmd_opts.gradio_auth.strip('"').split(',')] if cmd_opts.gradio_auth else None,
            inbrowser=cmd_opts.autolaunch,
            favicon_path="favicon.svg",
            prevent_thread_lock=True
        )

Change font:

Change the font of user imputs and buttons. (Didnt change the UI fonts because I prefer to keep the UI and the user inputs with different fonts).

Steps:

• Download the "Source Code Pro" Family font from here: https://www.fontsquirrel.com/fonts/download/source-code-pro
• Extract SourceCodePro-Regular.otf into your Stable Diffusion WebUI's root folder.
  (just in case, install the font -> Right click on the font, then click install)

Done.

TO DO:

• Change Sliders color from blue to a new one
• Change the dropdown menu selection color from blue to a new one
• Change the Gradio logo animation with this one:

Logo Animation:

Anyone knows how to do anything from the TO DO list? 😉

Done:

• Change the font from the user.css file

UPDATE -- 12/19/2022 - alpha-v1.01

• New font for user inputs
• Minor fixes

• Thanks to @DarkVamprism, this was made using code from his user.css file posted here on github,
• Thanks to @ParityError for the Logo
• Thanks to @ParityError for the Logo Animation inspired by @Ladypoly
• Thanks to @masslevel for inspiring this theme color scheme,
• Thanks to all the comunity
  and
• Special thanks to Automatic1111 and team members for this great UI.

😉

What's with the neon color scheme bruh? It looks worse than vanilla dark theme

[Nacurutu]

if you dont like it, dnt use it.. 😉

[cibernicola]

I think you should make a repository for updates, etc....

[Nacurutu]

Dnt know how to do that :p, however, I think the job is almost done.

Searching over the internet I found that:

• Change Sliders color from blue to a new one -> until Gradio changes the way to modify/create themes, we cant change the sliders colors. (they are working on a easy/better way for theming Gradio apps, maybe coming soon).
• Change the dropdown menu selection color from blue to a new one -> It seems that is handled by the OS and not the Browser, so, the only way is applying box shadows directly to the text and not simple backgrounds, but thats to difficult for me to mess arround, also, I think in order to do that, I will need to modify some stuff on HTML that Gradio Apps dnt have.
• Change the Gradio logo animation with this one -> I need to mess arround with the Gradio App code and im not planning to play with that.

This was a personal project and a test, and I wanted to share it with the community.

I think it looks pretty good at the moment, and with the Gradio Themes coming arround, I will wait for them and then, start theming with their tools.

Thank you very much for your positive feedback,

And if you have another ideas/suggestions, im all ears. 😉

[cibernicola]

Precisely because of everything you say, I think it is important that you do it through a github repository. Managing suggestions, changes, registrations and ideas in the comments of another project is not going to be practical. :D
Take a look: https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository

[Nacurutu]

@cibernicola

Done.. I have created the repository

https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111

[Gerschel]

This project has support for extensions to apply custom css.
When it goes looking for extensions in the extensions directory. It will try to load three files, that I know of.

One of them is install.py, that runs during boot-up, so a project can inject dependencies.
In a test, I used this to check if another file exists, a flag for updates, so I can make a backup of a persons cofigurations, so it isn't overwritten with a git pull.

Another file, the important one here. It looks for style.css in that extension folder, then appends it to the end of loaded css rules.
Then loads rules from user.css to the end of that list.

File: ui.py

This means, that you can make an extension that is a dropdown of choices of styles to apply, on selection it grabs the file from a subfolder and replaces the style.css, then triggers a soft restart so it refreshes the interface (soft restart will redisplay in 5-6 seconds).

To style the range bar. https://nikitahl.com/style-range-input-css

[Gerschel]

Do me a favor, rename your user.css so the webui does not pick it up.
Go to extensions tab and install from url.
Put in this url https://github.com/Gerschel/sd-web-ui-quickcss

Then apply and restart.

Go to new tab called css app.

Pick neon style, your original, I didn't care about doing css, so I copy and pasted it, you can manage them yourself by putting them in
the style_choices folder in the extension folder

Click apply style, it'll copy the choosen style into style.css in extension directory.

Pick logo from dropdown. Click apply logo, It will replace logo.png in root directory of webui.

Pick favicon from dropdown. Click apply favicon. It will replace the favicon.svg with selected one.

Click soft restart, to it reloads page.

To disable it, click remove style, it deletes style.css from extension, restart button, you're back at default.

If anyone else wants to contribute styles and logos into the repo, make a pull request.

But it will only work if logo's are a png, and favicons are an svg, as OP @Nacurutu did. I don't care about making this all extensive. I liked what was being done, and wanted it to be easy for people to switch between them.

[Nacurutu]

I will try this on my free time...Thanks a lot..!!!!

U rock..!

[Ladypoly]

Except for the fav icon it works great. But this could be a window 11 problem on my side I already had on other cases.
In Firefox I had to clear the cache to get the new selected logo. In chrome everything was fine.

[Nacurutu]

@cibernicola give it a try.. :p

Also, @Gerschel when I get some free time, I will test it... I already made updates on the main post..!

[Ladypoly]

Can you reorient elements with a custom css file?
I never liked it, that the Denoising strength in the img2img tab is so far at the bottom. I managed it to move the element directly below the image input with the inspector but it won't save it.

[Gerschel]

Dude your in luck. Check this out. Just save a setting. Want it to affect all, check all boxes, want it to adjust one parameter, select a single box.

It's also now in your extensions tab in the webui.
https://github.com/Gerschel/sd_web_ui_preset_utils/

I literally just pushed the update. Add your components you want to show up in detailed settings by adding Label (element id's supported soon, so add them as well.)

[Nacurutu]

this is also great..!

[Gerschel]

@Ladypoly When you say it won't save it, do you mean the position, or do you mean the setting fails to work.

[masslevel]

@Nacurutu Thanks for the credit and sorry for not being more involved in this!

Here is my latest version: https://pastebin.com/0ivnKh8T
The code isn't pretty, usability still horrible and still uses lots of overwrites.

I'm using it with http://127.0.0.1:7860/?__theme=dark - so it has not being tweaked to completely transform the default light theme.

But it does contain a section ( /* range sliders */ ) to color the slider controls (steps, width, height, settings, quicksettings etc) including :hover effect. I was trying to target those elements a couple of times and found some info thanks to wdcqc's great custom theme.

Thanks for your work and keep creating!

[Gerschel]

I didn't do anything, just some bit of code to swap out the style sheets. so you guys can focus on creating.

I have some ideas for the quick css extension... open the discussion tab on that repository to share there what im thinking :)

Opened https://github.com/Gerschel/sd-web-ui-quickcss/discussions

[ClashSAN]

@masslevel @Gerschel @Nacurutu
this could be fun for customizing ui layout as well. wiki example:

Create a file named user.css near webui.py and put custom CSS code into it. For example, this makes the gallery taller:

#txt2img_gallery, #img2img_gallery{
min-height: 768px;
}

(It should not break through updates.)

[Nacurutu]

@ClashSAN was checking that on my file and i find it better the way it is right now. After u generate images and populate the gallery, looks better and fits better with the actual parameter on my end

[ClashSAN]

nice, oh I see its been mentioned already. There will always be that one Feature Request that is asking to balance the inpaint section in img2img, or make the gallery very large. So now people can request new designs with this..
(I will just link them to these resources, ty)

There are various issues related to mobile ui. solve with this - #2862

[Nacurutu]

@masslevel I managed to get the slider of the quicksettings down...

Example:

#setting_sd_hypernetwork_strength, {
display: grid !important;
}

It seems that only changing the display to grid on the id do the job. I tried with a lot of things not getting results, however was checking the original style.css and it has an override for all displays as inline-block. Overriding the display on the id to grid helped to lower the slider.

But I got a new issue, everytime I scroll the slider, a gray background appear (the Loading one) and covers all the setting until gets the new value, usually with flickering.

Im still strugling with this.

Also, do you know how to apply a global zoom on the user.css?
Because im making all of this but I always have Chrome with a zoom of 80%. If I change the Chrome zoom to 100% dosnt look great on my end.

So im also trying to make a change on the css file to start the webUI at 80%. But still cant figure it out.

Chrome Zoom at 100% ->

Chrome Zoom at 80% ->

Also, I think with this ->

#quicksettings {
display: grid !important;
}

You can achive what you want to get

[fichl]

Hi there, thanks for doing this.
I played around with the old version of the user.css posted here and came up with 2 versions.
Thought i might share them as well...

https://pastebin.com/v2MFT5vd

and

https://pastebin.com/0Fg26kHV

credits go to the original poster

cheers

[Nacurutu]

more than welcome.. Enjoy.. I have updated the user.css file...

[Gerschel]

WIP, for demo.
If you want to test changing the colors dynamically -> , Gerschel/sd-web-ui-quickcss#1 (reply in thread)

Here are some rules. You will need to apply the default provided stylesheet first. This will save it as style.css IN THE EXTENSION FOLDER, NOT ROOT. The default style.css never has to be touched, user.css never has to be written to. The webui reads this stylesheet last becuase of the name quickcss, starts with a q, near last in sort order, so it will override roots style.css, but not users.css. This is the sweet spot to be in, so a user can modify for accessibility reasons if they choose to do so.

It says so right here:

Now for a teaser:

[Nacurutu]

looking great..!!!

[Gerschel]

Some updates to quickcss dynamic branch:
Gerschel/sd-web-ui-quickcss#1 (reply in thread)

[Gerschel]

Merged dynamic branch to master branch.
Now supports creating colorpickers and sliders, and saving. But I need a clean, minimal customizations sheet. Basic enough for others to demo, maybe inspire others to create more intricate sheets.

[Kettukaa]

I want to share my themes I made in collaboration with Catppuccin using user.css!
https://github.com/catppuccin/Stable-Diffusion-Web-UI

[Kettukaa]

I want to share my themes I made in collaboration with Catppuccin using user.css! https://github.com/catppuccin/Stable-Diffusion-Web-UI

I also just added extension support to the repo! Now you can install it and then be able to update it from the app!

[w-e-w]

@Kettukaa
the name of the repository "stable-diffusion-webui" may be problematic in the future
as the extension installer installers it into a dir of the same name
I suggest changing the repo to "stable-diffusion-webui-catppuccin-themes" or anything that's more unique

I'm aware that changing names of a repository would cause issues
though a user can change the directory manually if they wish, but most users probably don't know what git is

if you do decide to change the name @me when you do so and I will change the url on the wiki and index

it's possible we could Implement something to address conflicts

[Kettukaa]

@Kettukaa the name of the repository "stable-diffusion-webui" may be problematic in the future as the extension installer installers it into a dir of the same name I suggest changing the repo to "stable-diffusion-webui-catppuccin-themes" or anything that's more unique

I'm aware that changing names of a repository would cause issues
though a user can change the directory manually if they wish, but most users probably don't know what git is

if you do decide to change the name @me when you do so and I will change the url on the wiki and index

it's possible we could Implement something to address conflicts

Hey @w-e-w. I was hoping this could be resolved through an issue I made with WebUI, but I don't know if they'll implement it. Let me know if you're still interested in making this change.

[Kettukaa]

@Kettukaa the name of the repository "stable-diffusion-webui" may be problematic in the future as the extension installer installers it into a dir of the same name I suggest changing the repo to "stable-diffusion-webui-catppuccin-themes" or anything that's more unique

I'm aware that changing names of a repository would cause issues
though a user can change the directory manually if they wish, but most users probably don't know what git is

if you do decide to change the name @me when you do so and I will change the url on the wiki and index
it's possible we could Implement something to address conflicts

Hey @w-e-w. I was hoping this could be resolved through an issue I made with WebUI, but I don't know if they'll implement it. Let me know if you're still interested in making this change.

@w-e-w I've decided to just change the name of the repo since multiple people have raised an issue with me about it. I do not have the ability to change the name of the repo, but I pinged someone who does. We will be changing the name to catppuccin-theme-sd-webui, I will let you know when this happens! Thanks.

[w-e-w]

ping me when the change happens and I will change the index repo url

[Boolbazaver]

I have a question about the location of SD controls.
this is the location of the dots on my SD Click
and everyone I've seen has this button layout Click
please teach me how to change button layout like in this example: Click

can we help me?
I tried to follow your example, but at the stage of adding code to line 134, I got stuck. the console keeps getting errors referring to different lines in ui.py and launch.py, but eventually CMD had this error: IndexError: list index out of range
then like this: SyntaxError: invalid syntax
...but I just inserted the code into the file, as it was written .. The SD just breaks. maybe you can just share the css and config files in which the positions of the buttons are defined as in your screenshots?

[Nacurutu]

Recent updates on the webUI changed the button order from vertical to horizontal...

The examples you provided are from previous versions of the webUI.. from what I know, nothing to do...

[Boolbazaver]

Is it possible to take the SD of the previous version? it's just that videos with the "old" interface appear every day, the guys even stream the installation of SD and they also have an old-style interface, where they also get this version of SD .. you understand, all training videos are all screenshots of SD with the old interface, and me with the new one. and at the moment, with my level of knowledge, for me this difference is colossal, as if I'm watching a lesson on Davinci Resolve, and trying to work in Photoshop.

[Nacurutu]

@Boolbazaver I recommend you to keep the most updated version of the webUI, because it includes more fixes than the old ones.. and just to get a different alignment of the buttons...? better to have the updates... if you are following tutorials, the webUI works the same, just with relocations of the buttons and some new functions...

Keep the webUI updated.. my recommendation.

[Gerschel]

@Boolbazaver
On the backend a person can specify components. Components are a bundle of html, css, and javacript. Some of the components that gradio uses, are self overwriting. Meaning, changes you push on to an element could be lost on a screen update. But this is not true for all components.

Bundled in are components that serve as layout, not just inputs. Such as rows and columns.

These buttons at one point were in the component type of column, so it came with some default styling to show it as a column.
After they added another button, and where in the process of making things more compact, it forced a huge gap. So they switched it to the layout type to "row".

There was no change in the css itself that moved these. There was css, but it was the from the component bundle. These css rules target the classes of the element. "Flex flexcol gap-4" etc. The css that this webui added, were for cleaning up extra div borders, border width, margins, padding, etc, that changed the look, but not the position.

If you want to try to override these. You can try to do so in the user.css file.

You would target #txt2img_actions_column and #img2img_actions_column
You would force the layout to display:grid on the parent, and specify the shape of 'grid-template-columns: auto auto', to create two columns.

Then you would need to target the #txt2img_tools, and set it's display to flex and the flex-direction to column, so the children are vertical.
You would also put a rule on the tools that interact with the parents grid, declare that it needs to be in the first column 'grid-column: 1' and say that it is two rows long, 'grid-row: 1/2' (starts at one and goes through two).

Do this same thing for #img2img_tools.

You will also have to target the buttons in the tools, and drop their margin to 0.

Specify on the two other elements that they need to be in the grid column 2.

This should get you to this:

I wont focus on this, because this is the opposite direction most others are looking for, plus the amount of free time is small.
But this should give you a direction.
Fine tuning it will be a huge pain, the amount gained can be quickly lost on the next update, and there are a lot of updates.

[gmorks]

was tweaking one css for me, I'll just want to share it
night_neon.zip

[Vilsepi]

I've been also working on a dark theme, dark-diffusion, started out as a fork of @Nacurutu's & @Gerschel's theme as well.