Custom css for interface

[usxrc]

Hello. Its possible to add custom css? it would be great to change the interface and share it

[altryne]

@nnorbi not sure what you mean?
What changes would you like?
We use custom css within frontend.py, and gradio is based on tailwind, but we don't get access to gradio's tailwind config so adding any custom CSS is going to be a bit of a pain with edge cases.

[usxrc]

@altryne I suggest adding the ability to choose a color theme for the interface. This is for those who want to change the appearance. For example dark/light theme. I made my own theme as an example by changing the file \frontend\css\styles.css adding a few lines of css:

#body {background-image: linear-gradient(135deg, #0f3836 0%, #3b2156 100%);} #txt2img_gallery_output {background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; background-image: url(https://i.imgur.com/TK1m3Bg.jpg);} #tabss {background-image: linear-gradient(120deg, #000000 0%, #3b2156 100%);}

This is my result

[DrABolton]

Could you post your full CSS for the dark config? Tks

[usxrc]

https://pastebin.com/GNY3G1Gr

[DrABolton]

Cheers... The image looks different to how it turns out on the current build - sliders/buttons. How did you recolor the buttons? I manage to recolor them but it seems to put just slightly recolor them vs. putting a flat color on like you have.

I am picking apart the ID's by looking at the generated page code....pain in the A... but getting there.

Tks for posting.

[altryne]

How does it look on light mode?

[codedealer]

Not a fan of this idea but we can add a feature to specify a --theme parameter in arguments. Css bundler already takes opts in to hook up no_progress_bar.css it can similarly look for a .css file there with a name defined in --theme and add it at the end of styles.

[usxrc]

@altryne i am not some ux/ui guy and frontend dev at all, that what i get
`#body {background-color: #FDF5DF;
color: black;}

#body p {
color: black;
}

#body .text-gray-500{
color: black;
}
#body .font-medium{
color: black;
}
#body input {
background-color: #fdf5df;
}
#body .gr-box {
background-color: #fdf5df;
}

#body .gr-button {
border-color: #5EBEC4;
--tw-gradient-to: #3b82f6;
--tw-gradient-from: #2dd4bf;
--tw-gradient-stops: var(--tw-gradient-from),#3b82f6;
}

#body .gr-input-label {
border-color: #5EBEC4;
--tw-gradient-to: #3b82f6;
--tw-gradient-from: #2dd4bf;
--tw-gradient-stops: var(--tw-gradient-from),#3b82f6;
}

#txt2img_gallery_output {background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(https://i.imgur.com/TK1m3Bg.jpg);}

#tabss {background-color: #FDF5DF;}
#tabss .bg-white{
background-color: #c9c9c9;
color: black;
}

#generate {
border-color: #5EBEC4;
--tw-gradient-to: #3b82f6;
--tw-gradient-from: #2dd4bf;
--tw-gradient-stops: var(--tw-gradient-from),#3b82f6;
}
#prompt_input input{
background-color: #fdf5df;
}
`

maybe someone will want to modify this css code later