Demos/Utilities/theme.py

# code from Mahé DUVAL
import gradio as gr
from gradio.themes.utils import colors

# Custom color palette matching the GREYC logo color scheme
greyc_color = colors.Color(
    name="fuchsia",
    c50="#FBDEF4",
    c100="#F5B4E8",
    c200="#EE86DB",
    c300="#E056CB",
    c400="#C139AF",
    c500="#9C2A8D",
    c600="#76216B",
    c700="#631D59",
    c800="#501948",
    c900="#3E1438",
    c950="#2C0D27",
)
"""

"""

# Custom theme based on the default Gradio theme but with some changes to match the GREYC color scheme and look
theme = gr.themes.Default(
    primary_hue=greyc_color,
    radius_size="lg",
    font_mono=[gr.themes.GoogleFont('IBM Plex Mono'), 'ui-monospace', 'Consolas', 'monospace'],
).set(
    body_text_weight='300',
    button_border_width_dark='1px',
    button_transition='all 0.3s ease',
    button_large_radius='*radius_md',
    button_small_radius='*radius_md',
    button_primary_border_color_hover_dark='*primary_900',
    button_secondary_border_color_hover_dark='*neutral_700',
    button_cancel_background_fill='*secondary_300',
    button_cancel_border_color_dark='hsl(0, 73%, 30%)',
    button_cancel_border_color_hover='hsl(0, 73%, 60%)',
    button_cancel_border_color_hover_dark='hsl(0, 73%, 60%)',
    loader_color="#78216b",
    block_info_text_color="#797986",
    block_info_text_color_dark="#bbbbc2",
    body_text_color_subdued="#797986",
    body_text_color_subdued_dark="#bbbbc2",
)

HTML_CUSTOM_HEAD = """
    <title>
        Nifty
    </title>
    <meta name="Nifty demo app" content="A non-local image flow matching for texture synthesis">
"""

# Footer and links to the paper and code
HTML_FOOTER ="""
    <div style="text-align: center; padding: 0px;;margin-top:30px;">
        <a href="https://hal.science/hal-05287967">HAL</a>
        <a href="https://github.com/PierrickCh/Nifty">Github</a>
        <a href="https://arxiv.org/abs/2509.22318" >ArXiv</a>
    </div>
"""

HTML_SEPARATOR = """
    <div class='separator'>
    </div>
"""
HTML_V_SEPARATOR = """
    <div class='v_separator'>
    </div>
"""

HTML_LOGO_HEADER = """
    <header>
        <a href="https://www.greyc.fr/">
            <img id="logo-light" src="https://www.greyc.fr/wp-content/uploads/2020/05/Greyc_violet.svg" style="position: absolute; width: 12em; display: block;">
            <img id="logo-dark" src="https://greycflix.greyc.fr/demo-portal/images/logo-GREYC-dark.svg" style="position: absolute; width: 12em; display: none;">
        </a>
    </header>
"""


HTML_HEADER = """
    <div style="text-align: center; padding: 0px;" class="custom_header_title">
        <h1 id="title">
            NIFTY
        </h1>
        <p id="subtitle">
            A NON-LOCAL IMAGE FLOW MATCHING FOR TEXTURE SYNTHESIS
        </p>
    </div>
"""

HTML_AUTHORS = """
    <div style="text-align: center; padding: 0px;">
        <p id="authors">Pierrick Chatillon, Julien Rabin, David Tschumperlé, Mahé Duval</p>
    </div>
"""

CUSTOM_CSS = """

footer {visibility: hidden}

#title{
    font-size: 48px; 
    font-weight: 700; 
    margin: 0; 
    color: var(--body-text-color);
    letter-spacing: -0.02em;
}

#subtitle{
    font-size: 20px; 
    color: var(--body-text-color-subdued);
    margin:0;
    font-weight: 400;
}
#authors{
    font-size: 15px; 
    color: #86868b; 
    margin:0;
    font-style: italic;
}

.radio_group .wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
}

.generating {
    border-color: #76216B !important;
}

.separator{
    border : none !important;
    background-color: var(--button-primary-background-fill-hover) !important;
    padding:2px;
    height: 4px !important;
    border-radius: 5px!important;
}

.v_separator{
    border : none !important;
    background-color: var(--button-primary-background-fill-hover) !important;
    padding:2px;
    width: 4px !important;
    height: 100% !important;
    border-radius: 5px!important;
}




.tabitem{
	display:flex;
	flex:auto;
}
.tabs{
	display: flex;
	flex-basis: content;
	flex-direction: column;
	flex-grow: inherit;
}

.filled_flex_display {display: flex !important; align-content: stretch; justify-content: space-between;}
.filled_flex_display > div{display: grid !important; align-content: stretch; align-items: stretch; justify-items: stretch; flex-grow: 1 !important;}
.full_width {
    width: -webkit-fill-available !important;
    }


.full_height {
    height: -webkit-fill-available !important;
    }

.column{
    justify-content: space-between;
}


/**#input_row{height: 300px !important;}**/
/**#input_column{height: -webkit-fill-available;}**/
/**#output_row{height : 256px !important;}**/


.shrink{
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    min-inline-size: fit-content;
    min-width: unset !important;
}


.full_size_image { 
	margin: 0px !important;
	width: 100% !important;
	height: 100% !important;
}

.output_column {
height: -webkit-fill-available;
}
#input_general_settings{
	height: -webkit-fill-available;
	justify-content: space-between;
}
[data-testid="imageslider-image"] {
    max-block-size: -webkit-fill-available !important;
}

/* Switch the visibility of the GREYC logo based on  Gradio's color scheme (light or dark theme) by hidding the right logo */
@media (prefers-color-scheme: light) {
    #logo-light { display: block !important; }
    #logo-dark { display: none !important; }
}

@media (prefers-color-scheme: dark) {
    #logo-light { display: none !important; }
    #logo-dark { display: block !important; }
}
"""