"""IBM Research Monochrome theme for gradio demos. This version is a variation of CarbonSoft style, where the primary button is dark gray to create monochrome style. This version uses the style from Research demos such as Bee to make it more playful with rounded corners, a larger font family to enhance readability, and the IBM Cool Gray color palette for better consistency with other IBM Research demos, such as Bee. """ import gradio as gr from gradio.themes.utils import sizes theme = gr.themes.Base( primary_hue=gr.themes.Color( c100="#EDF5FF", c200="#D0E2FF", c300="#A6C8FF", c400="#78A9FF", c50="#F9F9FB", c500="#4589FF", c600="#0F62FE", c700="#0043CE", c800="#002D9C", c900="#001D6C", c950="#001141", ), secondary_hue=gr.themes.Color( c100="#EDF5FF", c200="#D0E2FF", c300="#A6C8FF", c400="#78A9FF", c50="#F9F9FB", c500="#4589FF", c600="#0F62FE", c700="#0043CE", c800="#002D9C", c900="#001D6C", c950="#001141", ), neutral_hue=gr.themes.Color( c100="#F2F4F8", c200="#DDE1E6", c300="#C1C7CD", c400="#A2A9B0", c50="#F9F9FB", c500="#878D96", c600="#697077", c700="#4D5358", c800="#393939", c900="#21272A", c950="#121619", ), spacing_size=sizes.spacing_md, # change spacing to default size radius_size=sizes.radius_md, # change spacing to default size and Keep Radius to make demo feel more playful text_size=sizes.text_md, # change fontsize to default size # spacing_size: sizes.Size | str = sizes.spacing_md, #change spacing to default size # radius_size: sizes.Size | str = sizes.radius_md, #change spacing to default size and Keep Radius to make # demo feel more playful # text_size: sizes.Size | str = sizes.text_lg, #change fontsize to default size font=["IBM Plex Sans", "ui-sans-serif", "system-ui", "sans-serif"], # update font font_mono=["IBM Plex Mono", "ui-monospace", "Consolas", "monospace"], # update font ).set( # Colors background_fill_primary="*neutral_100", # Coolgray10 background background_fill_primary_dark="*neutral_950", # Coolgray95 background for dark mode # Change blue to black to create monochrome style slider_color="*neutral_900", slider_color_dark="*primary_500", # Shadows shadow_drop="0 1px 4px 0 rgb(0 0 0 / 0.1)", shadow_drop_lg="0 2px 5px 0 rgb(0 0 0 / 0.1)", # Block Labels block_background_fill="white", block_label_background_fill="white", # same color as blockback gound fill block_label_radius="*radius_md", block_label_text_size="*text_md", block_label_text_weight="600", block_label_text_color="black", block_label_text_color_dark="white", block_title_radius="*block_label_radius", block_title_background_fill="*block_label_background_fill", block_title_text_weight="400", block_title_text_color="black", block_title_text_color_dark="white", block_label_margin="*spacing_md", # Inputs input_background_fill="white", input_background_fill_dark="*block-background-fill", input_border_color="*neutral_100", input_shadow="*shadow_drop", input_shadow_dark="0 1px 4px #000", input_shadow_focus="*shadow_drop_lg", checkbox_shadow="none", # Buttons shadow_spread="6px", button_primary_shadow="*shadow_drop_lg", button_primary_shadow_hover="*shadow_drop_lg", button_primary_shadow_active="*shadow_inset", button_secondary_shadow="*shadow_drop_lg", button_secondary_shadow_hover="*shadow_drop_lg", button_secondary_shadow_active="*shadow_inset", checkbox_label_shadow="*shadow_drop_lg", # Change blue to black to create monochrome style button_primary_background_fill="*neutral_900", button_primary_background_fill_dark="*neutral_600", button_primary_background_fill_hover="*neutral_700", button_primary_background_fill_hover_dark="*primary_500", # hover to be blue button_primary_text_color="white", button_secondary_background_fill="white", button_secondary_background_fill_hover="*neutral_100", button_secondary_background_fill_dark="*neutral_800", # Secondary cool gray 80 button_secondary_background_fill_hover_dark="*primary_500", button_secondary_text_color="*neutral_800", button_cancel_background_fill="*button_secondary_background_fill", button_cancel_background_fill_hover="*button_secondary_background_fill_hover", button_cancel_background_fill_hover_dark="*button_secondary_background_fill_hover", button_cancel_text_color="*button_secondary_text_color", checkbox_label_background_fill_selected="*primary_200", checkbox_label_background_fill_selected_dark="*primary_500", checkbox_border_width="1px", checkbox_border_color="*neutral_200", checkbox_background_color_dark="*neutral_700", # Jan 18 test to fix checkbox, radio button background color checkbox_background_color_selected="*primary_600", checkbox_background_color_selected_dark="*primary_500", checkbox_border_color_focus="*primary_600", checkbox_border_color_focus_dark="*primary_500", checkbox_border_color_selected="*primary_600", checkbox_border_color_selected_dark="*primary_500", checkbox_label_text_color_selected="black", # Borders block_border_width="1px", # test example border panel_border_width="1px", # Chatbubble related colors # light # color_accent = "*secondary_400", border_color_accent_subdued="*color_accent_soft", # chatbubble human border color, use Blue 20 as an accent color color_accent_soft="*secondary_200", # chatbubble human color # darkmode # chatbubble human border color in darkmode, use Blue 20 as an accent color border_color_accent_subdued_dark="*secondary_500", color_accent_soft_dark="*secondary_500", # chatbubble human color in dark mode # Chatbot related font chatbot_text_size="*text_md", # make it larger # additional dark mode related tweaks: # block_background_fill_dark="*neutral_950", # Jan 18 test coolgray95 background for dark mode block_label_background_fill_dark="*neutral_800", # same color as blockback gound fill block_title_background_fill_dark="*block_label_background_fill", # input_background_fill_dark="*neutral_800", #This attribute help match fill color cool gray 80 to match background # however cause the problem for the general theme. # input_shadow_dark="*shadow_drop", #Test if it could make the border without the color # input_border_color_dark="*neutral_200",#add attribute for border Jan 18 checkbox_border_color_dark="*neutral_600", # Jan 18 test to fix border )