Dark Mode Toggle Not Working in 0.6.6 - Regression from 0.6.5 #4464

ebonura-fastly · 2024-12-03T10:48:00Z

Describe the bug
The dark mode toggle functionality from the official Reflex documentation breaks in version 0.6.6. The same example works correctly in version 0.6.5.

To Reproduce
Steps to reproduce the behavior:

Use the example code from https://reflex.dev/docs/recipes/others/dark-mode-toggle/
Run the code with Reflex 0.6.6
Attempt to toggle dark mode
Toggle fails to function as expected

Code/Link to Repo: Using official documentation example from https://reflex.dev/docs/recipes/others/dark-mode-toggle/

Expected behavior
Dark mode toggle should switch between light and dark themes as demonstrated in the documentation and as functioning in Reflex 0.6.5.

Specifics

Python Version: 3.12
Reflex Version: 0.6.6 (broken), 0.6.5 (working)
OS: MacOS
Browser: Tested in Chrome and Safari

Additional context
The issue appears to be a regression as the official documentation example functions correctly in version 0.6.5 but breaks in 0.6.6. The bug is reproducible across different browsers.

linear · 2024-12-03T10:48:04Z

ENG-4163 Dark Mode Toggle Not Working in 0.6.6 - Regression from 0.6.5

Lendemor · 2024-12-03T14:17:53Z

Tested locally.
I can reproduce the problem.

After further checking, it seems like the theme value is set correctly (see DevTools > Application > Local Storage > theme), but is somehow ignored.

Lendemor · 2024-12-03T14:47:40Z

@ebonura-fastly
Hum, I've been doing more testing but it's not happening anymore despite not changing anything in the code.
Can you try running reflex init again maybe on your project and tell me if it keep happening?

edit: Managed to make it happens again.

Lendemor · 2024-12-03T15:24:42Z

So overall it's a pretty weird issue.

Here is a list of a few things I tried (all on the latest commit of main):

Open the page in Safari: ✅
Open the page in Chrome Incognito: ✅
Refresh existing tab for the page: ✅
Sometimes the toggle fail on the existing page, but it works again after refresh of the page.

I added an integration tests that should be pretty exhaustive to catch those issues, and it seems to be passing, but I can't explain why it sometimes happens like that.

Lendemor · 2024-12-03T15:44:49Z

After more testing, it seems like a page refresh seems to trigger the bug consistently.

Open the page
Go to light mode (when it's working)
Do a page reload.
Page is in dark mode even though all the variable are set to light.

Once the color mode is broken, it stay broken even with refresh.

However, if you do:

Switch back to color_mode dark.
Refresh the page.
Switch to color_mode light.
The page is in light mode again.

I ran the test above on multiple browser:
Google Chrome ❌
Google Chrome Incognito ✅
Safari ✅
Firefox ✅

Lendemor · 2024-12-03T15:49:14Z

I added a page reload in the test above to try and catch the issue, but it doesn't, at least locally.

I suspect some browser specific issue.

Lendemor · 2024-12-03T16:03:14Z

While inspecting the page, I've noticed that the attributes dark-native-active show up in the <html> tag of the page, which seems to supersede the actual color mode management in reflex.

@ebonura-fastly do you also see this attribute ?

Seikened · 2024-12-05T06:27:48Z

Captura de pantalla 2024-12-05 a la(s) 12 26 30 a m

Do you mean of this?

ebonura-fastly · 2024-12-05T12:00:16Z

Thanks for checking this, @Lendemor . When switching between dark/light modes, the HTML tag only switches between:

class="light" style="color-scheme: light"

or

class="dark" style="color-scheme: dark"

I've tested this across multiple versions (0.6.5, 0.6.6, and 0.6.6.post2) on both Chrome and Safari, and don't see the dark-native-active attribute you mentioned.

I've also tried running reflex init and refreshing the page multiple times, but the issue persists

Lendemor · 2024-12-05T13:13:43Z

This show up for me if I refresh while in light mode.
Which seems to override the page and make it render in dark mode despite the other attribute being set to light.
This is the only case where I reproduced the issue.

Edit: I found the extension in my browser that was messing with the page and adding that attribute. Once I turned it off, I don't reproduce that issue anymore 🤔

ebonura-fastly · 2024-12-05T13:52:24Z

@Lendemor I've double-checked the issue with Chrome incognito and Safari (no extensions installed) - it persists in both. While I do use Dark Reader, the problem seems to occur even with all extensions disabled.

Lendemor · 2024-12-05T14:02:26Z

I'm running out of idea on what to test / how to find the problem.

This is the app I'm using to test :

import reflex as rx
from reflex.style import set_color_mode, color_mode, resolved_color_mode

app = rx.App()


@app.add_page
def index():
    return (
        rx.segmented_control.root(
            rx.segmented_control.item(
                rx.icon(tag="monitor", size=20),
                value="system",
            ),
            rx.segmented_control.item(
                rx.icon(tag="sun", size=20),
                value="light",
            ),
            rx.segmented_control.item(
                rx.icon(tag="moon", size=20),
                value="dark",
            ),
            on_change=set_color_mode,
            variant="classic",
            radius="large",
            value=color_mode,
        ),
        rx.text(rx.constants.Reflex.VERSION),
        # rx.color_mode.button(allow_system=True),
        rx.text(color_mode, id="current_color_mode"),
        rx.text(resolved_color_mode, id="resolved_color_mode"),
        rx.text(rx.color_mode_cond("LightMode", "DarkMode"), id="color_mode_cond"),
    )

ebonura-fastly · 2024-12-05T16:40:49Z

Hey @Lendemor I think I found the root cause, it is related to the appearance setting in rx.theme, which in 0.6.6 will override whatever is set in the segmented control, this was not happening in previous versions.

The reason why I couldn't switch is because I had the appearance set to light in my rx.theme to provide a default.

Thanks for your help and patience while we debugged this! I think the issue can be closed, I'll leave it to you and your team if this is the expected behavior, I do believe it should be noted in https://reflex.dev/docs/recipes/others/dark-mode-toggle/ though, just to avoid confusion as people may not have it working as expected

For reference, here's a minimal example showing the difference:

import reflex as rx
from reflex.style import set_color_mode, color_mode, resolved_color_mode

def example_theme(appearance: str = None):
    return rx.theme(
        appearance=appearance
    )

def dark_mode_toggle():
    return rx.segmented_control.root(
        rx.segmented_control.item(rx.icon(tag="monitor", size=20), value="system"),
        rx.segmented_control.item(rx.icon(tag="sun", size=20), value="light"),
        rx.segmented_control.item(rx.icon(tag="moon", size=20), value="dark"),
        on_change=set_color_mode,
        variant="classic",
        radius="large",
        value=color_mode,
    )

def index():
    return rx.vstack(
        rx.heading("Dark Mode Demo"),
        dark_mode_toggle(),
        rx.text("Current mode: ", color_mode),
        rx.text("Resolved mode: ", resolved_color_mode),
        rx.text(rx.color_mode_cond("Light Theme", "Dark Theme")),
    )

# Comment/uncomment to see difference
# app = rx.App(theme=example_theme("light"))
app = rx.App(theme=example_theme())

app.add_page(index)

Lendemor · 2024-12-06T15:03:00Z

Hi @ebonura-fastly, thanks for figuring that out.

Imo it's definitely a regression, the appearance should only be the default for how the page is supposed to be when first opened, not a fixed value.

I'm not sure how to fix that bug (yet) but I'll update the test to take this use-case into account.

Lendemor · 2024-12-11T13:56:15Z

Found a fix for this, added it in #4467

Lendemor added the bug Something isn't working label Dec 3, 2024

Lendemor linked a pull request Dec 3, 2024 that will close this issue

add test for color mode (initial and toggle) #4467

Open

picklelo assigned Lendemor Dec 9, 2024

Lendemor closed this as completed Dec 11, 2024

Lendemor reopened this Dec 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dark Mode Toggle Not Working in 0.6.6 - Regression from 0.6.5 #4464

Dark Mode Toggle Not Working in 0.6.6 - Regression from 0.6.5 #4464

ebonura-fastly commented Dec 3, 2024

linear bot commented Dec 3, 2024

Lendemor commented Dec 3, 2024

Lendemor commented Dec 3, 2024 •

edited

Loading

Lendemor commented Dec 3, 2024 •

edited

Loading

Lendemor commented Dec 3, 2024 •

edited

Loading

Lendemor commented Dec 3, 2024

Lendemor commented Dec 3, 2024 •

edited

Loading

Seikened commented Dec 5, 2024

ebonura-fastly commented Dec 5, 2024

Lendemor commented Dec 5, 2024 •

edited

Loading

ebonura-fastly commented Dec 5, 2024

Lendemor commented Dec 5, 2024

ebonura-fastly commented Dec 5, 2024

Lendemor commented Dec 6, 2024

Lendemor commented Dec 11, 2024

Dark Mode Toggle Not Working in 0.6.6 - Regression from 0.6.5 #4464

Dark Mode Toggle Not Working in 0.6.6 - Regression from 0.6.5 #4464

Comments

ebonura-fastly commented Dec 3, 2024

linear bot commented Dec 3, 2024

Lendemor commented Dec 3, 2024

Lendemor commented Dec 3, 2024 • edited Loading

Lendemor commented Dec 3, 2024 • edited Loading

Lendemor commented Dec 3, 2024 • edited Loading

Lendemor commented Dec 3, 2024

Lendemor commented Dec 3, 2024 • edited Loading

Seikened commented Dec 5, 2024

ebonura-fastly commented Dec 5, 2024

Lendemor commented Dec 5, 2024 • edited Loading

ebonura-fastly commented Dec 5, 2024

Lendemor commented Dec 5, 2024

ebonura-fastly commented Dec 5, 2024

Lendemor commented Dec 6, 2024

Lendemor commented Dec 11, 2024

Lendemor commented Dec 3, 2024 •

edited

Loading

Lendemor commented Dec 3, 2024 •

edited

Loading

Lendemor commented Dec 3, 2024 •

edited

Loading

Lendemor commented Dec 3, 2024 •

edited

Loading

Lendemor commented Dec 5, 2024 •

edited

Loading