Skip to content

Styles

Styles for the app.

LiteralColorScheme = Literal['amber', 'blue', 'bronze', 'brown', 'crimson', 'cyan', 'gold', 'grass', 'gray', 'green', 'indigo', 'iris', 'jade', 'lime', 'mint', 'orange', 'pink', 'plum', 'purple', 'red', 'ruby', 'sky', 'teal', 'tomato', 'violet', 'yellow'] module-attribute

accent_color = rx.color('accent', 1) module-attribute

accent_text_color = rx.color('accent', 10) module-attribute

control_drawer_style = dict(open_button=dict(right='1em', **_drawer_open_button_style), header=_drawer_header_style, content=dict(left='auto', **_drawer_content_style), scroll_area=_drawer_scroll_area_style) module-attribute

controls = dict(button=dict(height='auto', min_height='var(--base-button-height)', padding_y='0.2em'), select=dict(width='100%')) module-attribute

conversation_drawer_style = dict(open_button=dict(left='1em', **_drawer_open_button_style), header=_drawer_header_style, content=dict(right='auto', **_drawer_content_style), scroll_area=_drawer_scroll_area_style) module-attribute

image_gen = dict(image=dict(max_height='90vh', max_width='90vw'), download_button=dict(position='absolute', variant='surface', size='3', top='0', right='0', margin='1em')) module-attribute

markdown_style = {'code': lambda text: rx.code(text, color=accent_text_color, bg=accent_color), 'a': lambda text, **props: rx.link(text, **props, font_weight='bold', color=accent_text_color, text_decoration='underline', text_decoration_color=accent_text_color, _hover={'color': accent_color, 'text_decoration': 'underline', 'text_decoration_color': accent_color})} module-attribute

submit_button_style = dict(border_radius='0.5rem', box_shadow='rgba(67, 32, 128, 0.8) 0 15px 30px -10px', background='linear-gradient(45deg, #970b99, #240fa8)', box_sizing='border-box', margin_top='0.25em', _hover={'opacity': '0.7'}) module-attribute

Theme

accent_color = rx.color(accent_color_name, 6) class-attribute instance-attribute

accent_color_name = 'indigo' class-attribute instance-attribute

accent_text_color = rx.color(accent_color_name, 9) class-attribute instance-attribute

app_theme = rx.theme(accent_color=accent_color_name, appearance='inherit', panel_background='translucent', radius='large', gray_color='auto', scaling='100%') class-attribute instance-attribute

bg_navbar = f'linear-gradient({rx.color(accent_color_name, 2)}, {rx.color(accent_color_name, 3)})' class-attribute instance-attribute

bg_primary = f'radial-gradient(circle at 70% 20%, {accent_color}, transparent 70%),radial-gradient(circle at 30% 80%, {secondary_color}, transparent 70%);' class-attribute instance-attribute

box_shadow = '\n 0 0.5rem 0.6rem rgba(0, 0, 0, 0.2),\n 0 0.2rem 0.3rem rgba(0, 0, 0, 0.15);\n ' class-attribute instance-attribute

secondary_color = rx.color(secondary_color_name, 6) class-attribute instance-attribute

secondary_color_name = 'violet' class-attribute instance-attribute

secondary_text_color = rx.color(secondary_color_name, 9) class-attribute instance-attribute