Card component doesn't render correctly

[givaha]

Describe the bug
Card component doesn't render correctly since version 0.5.4 on Linux environment with Brave browser

To Reproduce
Steps to reproduce the behavior:

• Code:

"""Welcome to Reflex! This file outlines the steps to create a basic app."""

import reflex as rx
from rxconfig import config

class State(rx.State):
    title = "TEST"

def index() -> rx.Component:
    return rx.hstack(
        rx.card(
            rx.flex(
                rx.box(
                    rx.badge(f"Batch", variant="soft", size="3", color_scheme="green", radius="large", position="absolute", right="10px"),
                    rx.text(
                        "Card", font_weight="bold", 
                    ),
                ),
                spacing="2",
            ),
            margin="10vh",
            width="20vh",
            height="20vh",
            as_child=True,
        ),
        background_color="lightgrey",
        height="100vh"
    )
        
app = rx.App()
app.add_page(index)

• Reflex Version 0.5.3:

• Reflex Version 0.5.4 and beyond:

Specifics (please complete the following information):

• Python Version: 3.12.3
• Reflex Version: 0.5.4 - 0.5.10 (no problem with and before 0.5.3)
• OS: Ubuntu 24.04.1 LTS
• Browser (Optional): Brave Browser (no problem with Google Chrome and Edge)

[Lendemor]

This is due to this feature in 0.5.4:

• Default theme appearance to system light/dark setting

I'm assuming your system is in dark mode, so it's rendering your site with dark as default.
If you swap to light mode (with rx.color_mode.button() for example) you'll see the card render exactly like in your 0.5.3 screenshot.