[Bug] 设置主题之后，刷新网页会存在在不同主题之间来回切换的效果

[xcyeye]

📦 部署环境

Official Preview, Docker

📌 软件版本

latest

💻 系统环境

Windows

🌐 浏览器

Chrome

🐛 问题描述

当设置的主题色和系统相反时(lobechat设置为浅色，windows颜色模式设置为深色)，刷新网页时，会出现先深色后浅色的情况。我在lobechat.com，本地以及自建的Docker中也发现了这个问题。 我追踪了一下，出现这种情况的原因是(lobechat的主题为浅色，windows系统色为深色)：

1. 当处于浅色模式时刷新网页，这一步会将cookie中的LOBE_THEME_APPEARANCE修改为dark
2. 再次刷新网页时，会出现先深色然后再切换到浅色的情况，并且会将LOBE_THEME_APPEARANCE修改为light
3. 后面会按照上面两步一直循环

我在Chrome和Edge浏览器中都发现了这个问题。

📷 复现步骤

1. 在windows中将颜色模式选择为深色
2. 在LobeChat将主题选择为浅色(cookie中LOBE_THEME_APPEARANCE值为light)
3. 刷新网页。这次刷新不会出现深色到浅色变化的情况，但是会将cookie中LOBE_THEME_APPEARANCE的值设置dark
4. 再次刷新网页，这一步就会出现主题色先深色后浅色的情况，LOBE_THEME_APPEARANCE的值变为了light
5. 后面会一直在2~4之间循环。windows设置为浅色，lobechat设置为深色，同样也会出现这种情况

🚦 期望结果

No response

📝 补充信息

No response

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

📦 Deployment environment

Official Preview, Docker

📌 Software version

latest

💻 System environment

Windows

🌐 Browser

Chrome

🐛 Problem description

When the set theme color is opposite to that of the system (lobechat is set to light color, and the windows color mode is set to dark), when refreshing the web page, the dark color will appear first and then the light color. I also found this problem in lobechat.com, local and self-built Docker. I tracked it down and found that the reason for this situation is (lobechat's theme is light and the windows system color is dark):

1. Refresh the webpage when it is in light mode. This step will change the LOBE_THEME_APPEARANCE in the cookie to dark.
2. When refreshing the web page again, it will first change to dark color and then switch to light color, and LOBE_THEME_APPEARANCE will be changed to light
3. The above two steps will be followed later.

I'm seeing this issue in both Chrome and Edge browsers.

📷 Steps to reproduce

1. Select the color mode as dark in windows
2. Select the theme as light color in LobeChat (the LOBE_THEME_APPEARANCE value in the cookie is light)
3. Refresh the web page. This refresh will not change from dark to light, but will set the value of LOBE_THEME_APPEARANCE in the cookie to dark.
4. Refresh the web page again. In this step, the theme color will first be dark and then light, and the value of LOBE_THEME_APPEARANCE will change to light.
5. It will continue to cycle between 2 and 4. If windows is set to light color and lobechat is set to dark color, the same situation will occur.

🚦 Expected results

No response

📝 Supplementary information

No response

[lobehubbot]

👀 @xcyeye

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible. Please make sure you have given us as much context as possible.\ 非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[dosubot[bot]]

@xcyeye Hello there! I'm here to help you with any bugs, questions, or contributions you have. I'm an expert bot designed to assist you while you wait for a human maintainer. Let me know how I can assist you!

I found a similar closed issue that might be related to the problem you're experiencing. The issue was about a brief switch to light mode when navigating to assistant settings in dark mode. It was resolved by a refactor in the Next.js app router ^[1].

For your specific issue, it seems like the theme appearance cookie (LOBE_THEME_APPEARANCE) is being updated incorrectly during page refreshes, causing the theme to switch back and forth. This might be due to how the theme is being set based on system settings and user preferences.

You might want to check the logic that updates the LOBE_THEME_APPEARANCE cookie to ensure it aligns with the intended behavior. The onAppearanceChange event is used to update this cookie, so reviewing how this event is triggered and handled could be helpful ^[2].

To continue talking to Dosu, mention @dosu.