/Dark-Themes-SD-WebUI-Automatic1111

Custom user.css files for Automatic1111 Stable Diffusion WebUI

Primary LanguageCSSMIT LicenseMIT

Project paused until further notice

Logo
Dark Themes for Stable Diffusion Web UI

rainbow-rainbow-bar



What can you get with this?

  • Changes the dark theme color scheme of your Stable Diffusion WebUI
  • Purely aesthetic changes
- Color Scheme: Use predefined styles or Make your own
- Stable Diffusion WebUI Logo
- Stable Diffusion WebUI favicon
- Button backgounds change on Hover
- Button animations on hover
- Focus last interaction
- "Source code pro" text font on inputs
- Change sliders colors

- Prefered Browser's zoom at 75% to have a better experience

Important:

If the changes does not apply properly (Style - logo - favicon), refresh your browser cache:

How to refresh your browser cache? To force your browser to refresh take the following steps:

⇧ Shift-click the Refresh button.

While pressing the Refresh button on your browser’s address bar will only do a standard refresh, you can force a refresh from the server by pressing ⇧ Shift and clicking it instead.

Custom Dark theme examples for Stable Diffusion WebUI

🔶 Alani
🟣 Neon

Compatible with sd-web-ui-quickcss Extension

How to use with the extension:

Just install the Extension. Theme included there.

For more information regarding the extension, please visit this repository:

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

Thank you very much Gerschel

Old method - Not using Gerschel sd-web-ui-quickcss Extension:

How to install

Steps:

  • Activate dark mode on the webui-user.bat -> set COMMANDLINE_ARGS= --theme=dark

  • Download and Save one of the .css files from the repo (style_choices folder) into your Stable Diffusion WebUI's root folder

  • Rename the file to user.css on your SD root folder

or on \extensions\sd-web-ui-quickcss\style_choices if you are going to use the extension (do not need to rename the file names).

  • 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

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
  • If you are going to use the extension, save the logo.png on: extensions/sd-web-ui-quickcss/favicons/
  • 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 inputs and buttons. (Didnt change the UI fonts because I prefer to keep the UI and the user inputs with different fonts).

Steps:

Done.

Make your own color palette:

Steps:

Change the color variables on the user.css for the ones you want.

/*THEME VARIABLES*/
:root, * , quickcss_target{
    --Primary_color: #E94822;
    --Secondary_color: #F2910A;
    --Input_text_color: #EFD510;
    --Input_text_color_focus: #ffffff;
    --App_color: #F2910A;
    --Background_color: #2C2D34;
    --Checked_text: #F2910A;
    /*ENDCOLORPICKERS*/
    --UI_radius: 0;
    --left_pannel_width: 40;
    --cards_size: 50;
    /*BREAKFILEREADER*/
    --logo: url('file=logo.png');
    --favicon: url('file=favicon.svg');
    --left-column: calc(20px *var(--left_pannel_width));
}

The Variables you need to change on the user.css file are:

  • --Primary_color: #------;
  • --Secondary_color: #------;
  • --Input_text_color: #------;
  • --Input_text_color_focus: #------;
  • --App_color: #------;
  • --Background_color #------:

You can use HEX or RGB values. (HEX to be compatible with the Extension)

Done.

-- UPDATES --

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

  • New font for user inputs
  • Minor fixes

UPDATE -- 12/21/2022

UPDATE -- 12/27/2022

  • New User.css file:
  • Added Sliders color change
  • user.css code cleaned a little and Variables added for an easier way to change colors (primary, secondary, text input, app borders and background).

UPDATE -- 01/01/2023

  • Minor fixes
  • Code cleaned a bit.
  • Added Normalize.css on code:

What is Normalize.css? A modern, HTML5-ready alternative to CSS resets Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

https://necolas.github.io/normalize.css/

UPDATE -- 01/05/2023

  • Minor fixes
  • Code cleaned a bit.

UPDATE -- 01/14/2023

  • Minor fixes
  • Code cleaned a bit.

UPDATE -- 01/24/2023

  • Fixed errors after new webUI updates
  • Added a slider to resize new extra networks cards

TO DO:

  • Change the dropdown menu selection color from blue to a new one (it seems that this is handled by the OS and not the browser)

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

Done:

  • Change the font from the user.css file
  • Change Sliders color from blue to a new one

💙 Big Thanks to:

  • @DarkVamprism, @masslevel, nectar9000 and @vladmandic, this was made using some code from their user.css files posted here on github
  • @ParityError for the Logo and Logo Animation inspired by @Ladypoly
  • @masslevel for inspiring the Neon color palette
  • All the community
  • @Gerschel for the extension.
  • Special thanks to Automatic1111 and team members for this great UI.


🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟

> Disclaimer:
> 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.

945617

Logo