Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Code Block Theme Issue #4170

Open
LineIndent opened this issue Oct 14, 2024 · 3 comments
Open

Code Block Theme Issue #4170

LineIndent opened this issue Oct 14, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@LineIndent
Copy link

Describe the bug
Setting the rx.code_block background color works when the page loads. However, toggling between the light/dark theme resets the background color.

To Reproduce
Steps to reproduce the behavior:

import reflex as rx


@rx.page("/test")
def test_code_block_theme():
    return rx.center(
        rx.vstack(
            rx.color_mode.switch(),
            rx.code_block(
                "test code block theme color",
                width="100%",
                font_size="13px",
                language="markup",
                wrap_long_lines=True,
                scrollbar_width="none",
                code_tag_props={"pre": "transparent"},
                custom_style={
                    "backgroundColor": "blue",
                    "color": rx.color("gray", 12),
                },
            ),
            max_width="30em",
            align="center",
            justify="center",
        ),
        width="100%",
        height="100vh",
    )
@LineIndent LineIndent added the bug Something isn't working label Oct 14, 2024
@adhami3310
Copy link
Member

the background color of a codeblock is part of its theme, so i'm not very surprised this happens, you could also set the theme to theme=rx.code_block.themes.[whatever]

@LineIndent
Copy link
Author

I just tested with the theme and it seems that the custom_style prop still does not stay intact - meaning that whatever theme is set PLUS a custom background, the custom background reverts to the default.

Strictly from a UI perspective the code_block can be altered to look good, but I thought I'd bring it up here in case others come across it

@adhami3310
Copy link
Member

you can add !important and use style prop for this to work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants