"fix dark mode" in hugging face🤗 and for local demo
Keldos-Li opened this issue · 2 comments
At first, I wrote the same thing in the hugging face community, and then I realized that I should write in Github so that it would be easier for you to reach. So, I'm sorry that I opened another issue here. (And here is the revised version)
Hi, I'm Keldos from ChuanhuChatGPT. It's so nice to hear that you guys have built a demo for your great work based on our project.
In fact, we are also in the process of rapid development. Our code for demo styles is also constantly updated. I have noticed that you committed in hugging face trying to "fix dark mode", but I see nothing happened. Emm..... I have to admit that the CSS I wrote at that time was not so compatible with the principles of gradio, which led to this problem. I also tried to solve this problem in our repo in other ways yesterday, but when I saw your commit, I realized that I should combine the two...
For now, you should write the CSS part like this:
/* bright (default) */
#chuanhu_chatbot {
background-color: var(--chatbot-color-light) !important;
color: #000000 !important;
}
[data-testid = "bot"] {
background-color: #FFFFFF !important;
}
[data-testid = "user"] {
background-color: #95EC69 !important;
}
/* dark */
.dark #chuanhu_chatbot {
background-color: var(--chatbot-color-dark) !important;
color: #FFFFFF !important;
}
.dark [data-testid = "bot"] {
background-color: #2C2C2C !important;
}
.dark [data-testid = "user"] {
background-color: #26B561 !important;
}Yes, you should delete @media (prefers-color-scheme: light) and @media (prefers-color-scheme: dark).
In this way, when the system changes from dark to bright, the chatbot will no longer automatically change to a bright background, but will be consistent with the system framework of gradio. And our settings for dark or bright mode still works when we refresh the web page.
Yesterday, I wrote a JavaScript script to make the whole gradio page adaptable when the system switches between bright and dark mode. But maybe gradio intended to automatically switch from bright to dark, and not automatically switch from dark to bright. I don't know why it want to act like this. If you like, you can check our new JavaScript script (custom.js) (In fact, when I first saw your repository, I found that you even kept this blank js file that I had reserved, which shocked me).
Today I tried to add a toggle for users to override system bright-or-dark mode for the page. It worked. Later it would be pushed and merged into our main branch.
You are welcome to contact me (you can find my email on my github profile page) if you need more help on the demo UI (styles). It's also recommended to check our amazing updates on user interface and interaction. (I am responsible for writing ChangeLog documents, but no one is pressing me, so it may not be written in time. :-))
By the way, I'm glad to tell you that we updated our wiki documents: licenses. Now you can check how to cite our work and how to specify our copyleft information in the source code. But don't worry, it's not necessarily needed. We are already very happy that you have marked the source of the demo code part.
Hope everything is going fine~
Hi @Keldos-Li Thanks for reaching out. Big fan of your project.
Indeed I tried to fix the CSS for gradio on HF Space but it's not completely working. Thanks for pointing us to the solution. I will update the CSS so the demo will display normally.
Thanks again for your great work on ChuanhuGPT ;)
