[Bug] Dark reader fails spectacularly on the AI-powered Bing chat pages #10784
Comments
|
|
|
#10782 and #10853 appear to be duplicates of this issue. I'm not confident enough in my solution to make a PR, but adding cib-serp
div.icon
div.ac-textBlockunder https://i.imgur.com/9bOPDy1.png |
|
That looks phenomenon, but the issue I noticed with that chat interface's HTML is that it's behind a shadow DOM, which to my knowledge requires some JavaScript injections, as CSS alone won't cut it |
i also added in invert section |
|
Here is an updated way which removes the background image altogether and sets the content to the center of the page aswell: This is what it will look like when finished under Dev Tools in Dark Reader, find bing.com, and then replace the whole existing code with the following: to then get rid of the background aswell, use Adblock and insert the following line of code into the 'Manually edit your filters' section: (dont forget to hit save after you insert it!)
|
|
Were any of you able to make the font color white for when Bing replies? |
|
It seem that the mode Filter/Filter+ can work with Bing Chat. The only issue I could notice is the text is quite aliased though. |
|
My own version is a bit more transparent focused
And here's my DevTools fix. (Note: This should NOT be used in the final version because 1. I adjusted the website transparency style according to my liking and do not preserve the original transparency (color themes are still the same, for example, changing from Creative/Balanced/Precise style) 2. some hover dialogs are too transparent, and 3. light scheme is still broken) bing.com
INVERT
canvas[id^="Microsoft.Maps"]
cib-background
.attribution-item
.expand-button
CSS
.b_searchboxForm,
.b_searchboxForm:hover,
.b_focus .b_searchboxForm,
#sw_as #sa_ul:not(:empty) {
box-shadow: ${rgba(0, 0, 0, 0.1)} 0px 0px 0px 1px !important;
}
#b_results > li.b_ans.b_topborder, #b_results > li.b_ans.b_topborder.b_tophb.b_topshad {
box-shadow: ${rgba(13, 13, 13, 0.05)} 0px 0px 0px 1px !important;
}
.l_ecrd_imcolheader.gradient {
z-index: 2 !important;
}
#stop-responding-button > svg-icon {
filter: brightness(200%);
}
#b_content {
background-image: none !important
}
.options-list-container {
--cib-color-neutral-layer-card: rgba(255, 255, 255, 0.2);
}
#stop-responding-button {
background: var(--cib-color-brand-primary-background);
}
svg-icon[type="stop"] {
filter: brightness(200%);
}
.option button:not([selected])::before {
background: transparent !important;
}
.content .ac-container sup {
color: white !important;
background: var(--cib-color-brand-primary-background) !important;
}
* {
--darkreader-text--cib-color-neutral-foreground: ${black};
--darkreader-text--cib-color-brand-tertiary-foreground: ${white};
--cib-color-neutral-foreground: ${black} !important;
--cib-color-brand-secondary-background: rgba(255, 255, 255, 0.1) !important;
--cib-color-brand-secondary-background-hover: rgba(255, 255, 255, 0.2) !important;
--cib-color-neutral-layer-overlay: rgba(255, 255, 255, 0.1) !important;
}
.root .cbtn,
.cib-message-main[type="text"],
.item-content,
.main-container,
.suggestion-item > button.container {
background: rgba(255, 255, 255, 0.1) !important;
}
cib-feedback {
background: var(--cib-color-brand-secondary-background);
filter: brightness(250%);
}
IGNORE INLINE STYLE
.b_header_bg
.sp-tpwebicons.WIKI * |
|
At https://www.bing.com I'm getting a white square instead of the hamburger button. Could someone help me to fix this?
|
|
@warsponge how to change your code to match the bubble color used by the Bing Chat sidebar version?
According #10782 (comment) it uses |
|
@Get0457 finally a solution which is usable. Thank you. |
|
@Get0457 thanks! jfyi to make it work for the SERP box on the right side of the search page, you need to add |
|
@Kamikadashi what box are you talking about? |
|
@xilopaint the one on the right the script as it is now breaks it |
|
Right now I use default scheme with following CSS codes: As the results are all purple at the moment. Changed today for me. For SERP box, I use that userscript: Works great to me! |
|
Searched the PRs to see if someone had made some theming for Bing Chat, but neglected the issues lol. I submitted a PR (#10917) which should resolve the issues here (including the side rail, but I don't know where mine's gone?) Something that would help make theming this page significantly easier (but probably with a big cost to load performance) would be the ability to use JS to detect if we're in a shadow root, and to know what the tag is. I'm not trying to hijack this issue, but it'd be easier to just do something like: where the all-caps word |
You can also add |
|
Thank you guys for the fixes. It seems that Bing's script endlessly removes Dark Reader's style there. Your static fixes may help and will be included into the nearest release. |
Does this explain the failing to unstyle the page when switching back to light mode? |
|
For me switching off removes all the DR styles. If you mean choosing the Light color scheme, yes, the fixes can break, if colors like |
|
It would be great to contact their team and ask to not remove our styles (probably there is some mutation observer from some kind of framework). Or they could use adopted style sheets. |
|
Actually there is a dark color scheme for Bing Chat and this is the script that can be used via Tampermonkey: https://greasyfork.org/en/scripts/462516-bing-chat-dark-mode |
|
I sent out a Tweet to the relevant people working on the feature in the hope they look into this. |
|
I hope that version 5 of darkreader (which I don't understand why it has not been updated yet after 3 years since its announcement) can add dark mode to bing chat. |
|
Here is an update from my previous interpretation hybridising a bit of @Get0457 's code and my own, plus adding some more adblocker lines and some extra CSS to make it look as clean as possible. This also fixes the issue with the chat box on the right hand side of the search results being unreadable as shown below:
First, paste this over the top of your current settings for bing.com heading in the Dark Reader Dev Tools. It will also center the chat on the whole page so its not over to one side because that was annoying me: Heres What it should look like in Dark Reader:
To remove the background image completely and remove some of the other clutter on the page we need to use an adblocker extension. I previously used AdBlock, but I've since found that uBlockOrigin is much more stable and reliable. Within the settings for uBlockOrigin you can do this by adding the following code under the 'my filters' tab It should look like this (don't forget to hit 'Apply Changes' once you've done it!) It's also important to make sure that the 'Parse and enforce cosmetic filters' option is UNCHECKED in the 'Filter lists' tab. If not it can cause the space bar in the chat to no longer work, as well as general scrolling issues on the page . |
Thanks for the solution but this unfortunately it removes the borders of chat box which looks weird in regular search page. Are there any solution for that image for reference: |
I too got the exact same issue after implementing above methods. |
|
@warsponge I did what you said, but my page looks weird. It has transparent elements, too light messages, and those annoying bubbles in the center of the screen haven't disappeared yet
|
|
btw the native forced dark mode, which is activated via flags, looks pretty good if you activate filters via uBlock alongside it |
Ah yeah that was just an !important flag that was needed. I fixed my code for it now in the original post. |
Okay NOW it should be fixed. |
|
@Johnnycyan, works like a charm, thanks! You sent a little extra code, but it's nothin haha |
Oops lol. I removed that now. |
|
It seems that changing this icon to dark somehow creates another visual bug that is not present in the screenshots from the original code, but it's a minor issue. Anyway, thank you very much again! |
|
Removing |
Nice find. I updated my code above with this fix. |
|
New Chat history is little buggy with dark mode.
|
|
My guy works faster than the entire Bing team. Anyway, thanks! |
|
The code in the dev tools resets everytime the browser restarts right? Is there any fix for that or is that how it is supposed to work? |
I'm not sure why yours does that. Mine does not. |
I just tested it in other browsers and the setting seems to reset only in firefox browser. Might be a bug only for firefox browsers. |
|
I had made another versión with blue links. ================================
bing.com
INVERT
canvas[id^="Microsoft.Maps"]
cib-background
.attribution-item
.expand-button
CSS
.b_searchboxForm,
.b_searchboxForm:hover,
.b_focus .b_searchboxForm,
#sw_as #sa_ul:not(:empty) {
box-shadow: ${rgba(0, 0, 0, 0.1)} 0px 0px 0px 1px !important;
}
#b_results > li.b_ans.b_topborder, #b_results > li.b_ans.b_topborder.b_tophb.b_topshad {
box-shadow: ${rgba(13, 13, 13, 0.05)} 0px 0px 0px 1px !important;
}
.l_ecrd_imcolheader.gradient {
z-index: 2 !important;
}
#stop-responding-button > svg-icon {
filter: brightness(200%);
}
#b_content {
background-image: none !important
}
.options-list-container {
--cib-color-neutral-layer-card: rgba(255, 255, 255, 0.2);
}
#stop-responding-button {
background: var(--cib-color-brand-primary-background);
}
svg-icon[type="stop"] {
filter: brightness(200%);
}
.option button:not([selected])::before {
background: transparent !important;
}
.content .ac-container sup {
color: white !important;
background: var(--cib-color-brand-primary-background) !important;
}
.root .cbtn,
.cib-message[type="text"],
.item-content,
.main-container,
.suggestion-item > button.container {
background: rgba(255, 255, 255, 0.1) !important;
}
cib-feedback {
background: var(--cib-color-brand-secondary-background);
filter: brightness(250%);
}
* {
--darkreader-text--cib-color-neutral-foreground: ${black} !important;
--darkreader-text--cib-color-brand-tertiary-foreground: ${white} !important;
--cib-color-neutral-layer-card: rgba(255, 255, 255, 0.1) !important;
--cib-color-brand-secondary-background: rgba(255, 255, 255, 0.1) !important;
--cib-color-brand-secondary-background-hover: rgba(255, 255, 255, 0.2) !important;
--cib-color-neutral-layer-overlay: rgba(255, 255, 255, .2) !important;
--cib-color-neutral-foreground: ${black} !important;
--cib-color-neutral-layer-card-alt: #131516 !important;
--cib-color-neutral-app-background: #131516 !important;
--cib-color-neutral-drawer-background: rgba(255, 255, 255, .05) !important;
--cib-color-neutral-layer-card-disabled: rgba(255, 255, 255, 0.1) !important;
--cib-color-stealth-secondary-foreground: ${black} !important;
--cib-color-stealth-secondary-foreground-pressed: ${black} !important;
}
div > svg > g:nth-child(1) {
fill: #1d1f20 !important;
}
.cib-message[type="text"] {
background: #131516 !important;
}
/*Center Page*/
.scroller-positioner {margin:auto;}
#cib-action-bar-main {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: 25px;
position: unset;
}
.b_algo a:not(.b_attribution) {
color: #4893ed !important;
}
.b_ans.b_mop.b_mopb a:not(.b_attribution) {
color: #4893ed !important;
}
.b_ans.b_mop.b_vidAns a:not(.b_attribution) {
color: #4893ed !important;
}
.b_ans.b_dr_mod a:not(.b_attribution) {
color: #4893ed !important;
}
.b_topTitleAd a:not(.b_attribution) {
color: #4893ed !important;
}
.sb_add.sb_adTA a:not(.b_attribution) {
color: #4893ed !important;
}
IGNORE INLINE STYLE
.b_header_bg
.sp-tpwebicons.WIKI *
================================ |
This code has stopped working correctly for me |
|
Hello everyone, I can see that this topic is starting to go dark, so to speak. understandably it is getting a little tiresome and very time consuming having to battle the ever changing HTML structure, but heres another update for those that are still interested. its not perfect but it certainly does the job. The lengths we go for dark mode eh.. I've started to categorise things within the CSS for slightly easier reading, for the inevitable next time we have to correct this once again. I'm sure by now there are also a lot of redundant lines in there aswell but I havent made an attempt to sift through them myself. Hope everyone is well.
I've also updated the filters in uBlock Origin as follows: |
|
Broke again @warsponge I tried your code but it didn't fix it (the screenshot is using Dark Reader's default CSS values) |
|
Yes its changed again, at this rate its hardly worth the effort to continue updating it when it changes this often. One saving grace is that in the edge browser, using the Bing icon in the top right you can also access Bing chat and this version DOES have a native dark mode. In addition to dark mode it also has other features too like Compose and Insights, so maybe its best to just continue forward using this now instead.
|
|
=== WEBLINK TO BING CHAT PAGE WITH GENUINE NATIVELY SUPPORTED DARK MODE ===
Guys, i have found something i think you will all like... This is a link to Bing Chat which natively has dark mode enabled! Thats right, you read correctly, its native! I found this when I was playing around with the Bing Discover Bar, the feature i mentioned in my last post above. I thought that if this is delivering a native dark mode feature, it must be pulling that information from somewhere. And i found that if you right click inside this area, you can in fact get the option to inspect the element... So from here i simply browsed through the different element headings and found that what is being displayed here is simply doing so via a weblink, a weblink that can be copied, and visited. The full weblink to the Bing Chat page is actually as follows: but chopping it about a bit you can find that it works just fine when shortened to simply: In addition to this, there was also a weblink to the Bing Compose page which is as follows: And can be shortened to: Out of curiosity i did try entering this in on Chrome and I found it did open, however there are some serious issues, the spacebar, the backspace key, and the arrow keys do not work at all, which makes typing basically impossible, so it seems for now its best to just use Edge for it to work, but this is really not a big deal. I'll keep playing about with it and see if i can find a fix. Two small things that are slightly worse on this version than the official version:
I have saved this site as an 'App' now using the Edge settings so it appears as its own standalone app on my taskbar instead of opening edge when i want to access it. For a tutorial on how to do this here is a link: I have also changed the icon on mine to the Bing Logo, to do this, once the App first installs click the option to 'Create Desktop Shortcut' from here you can right click the newly created shortcut and chose properties, and then change the icon of the image with any icon file you like. Then after that open the program, and then right click it in the taskbar and click 'Pin to taskbar' and viola! Here is a link to the Image i used if you want to use the same one. |
|
FINAL UPDATE: Microsoft have finally provided a native dark mode on the Official Bing Chat page. 👌
|
Well I assume it is still in A/B testing it is not available for everyone yet. But it is good to see the official option. It is a pain to maintain it using darkreader... |
I have the same issue only on my windows 10, on my windows 11 the dark mode script works just fine. |
All the credit goes to warsponge @warsponge for this wonderful CSS
.root .cbtn,
.cib-message[type="text"],
.item-content,
.main-container,
.suggestion-item > button.container {
background: rgba(255, 255, 255, 0.1) !important;
}
.root .cbtn,
.cib-message[type="text"],
.item-content,
.main-container,
.suggestion-item > button.container {
background: #262626 !important;
}
svg-icon {fill:white!important;}
The updated CSS code: bing.com
INVERT
canvas[id^="Microsoft.Maps"]
cib-background
.attribution-item
.expand-button
CSS
* {
--darkreader-text--cib-color-neutral-foreground: ${black} !important;
--darkreader-text--cib-color-brand-tertiary-foreground: ${white} !important;
--cib-color-neutral-layer-card: rgba(255, 255, 255, 0.1) !important;
--cib-color-brand-secondary-background: rgba(255, 255, 255, 0.1) !important;
--cib-color-brand-secondary-background-hover: rgba(255, 255, 255, 0.2) !important;
--cib-color-neutral-layer-overlay: rgba(255, 255, 255, .2) !important;
--cib-color-neutral-foreground: ${black} !important;
--cib-color-neutral-layer-card-alt: #131516 !important;
--cib-color-neutral-app-background: #131516 !important;
--cib-color-neutral-drawer-background: rgba(255, 255, 255, .05) !important;
--cib-color-neutral-layer-card-disabled: rgba(255, 255, 255, 0.1) !important;
--cib-color-stealth-secondary-foreground: ${black} !important;
--cib-color-stealth-secondary-foreground-pressed: ${black} !important;
}
.b_searchboxForm,
.b_searchboxForm:hover,
.b_focus .b_searchboxForm,
#sw_as #sa_ul:not(:empty) {
box-shadow: ${rgba(0, 0, 0, 0.1)} 0px 0px 0px 1px !important;
}
#b_results > li.b_ans.b_topborder, #b_results > li.b_ans.b_topborder.b_tophb.b_topshad {
box-shadow: ${rgba(13, 13, 13, 0.05)} 0px 0px 0px 1px !important;
}
.l_ecrd_imcolheader.gradient {
z-index: 2 !important;
}
#stop-responding-button > svg-icon {
filter: brightness(200%);
}
#b_content {
background-image: none !important
}
.options-list-container {
--cib-color-neutral-layer-card: rgba(255, 255, 255, 0.2);
background: #262626 !important;
}
#stop-responding-button {
background: var(--cib-color-brand-primary-background);
}
svg-icon[type="stop"] {
filter: brightness(200%);
}
.option button:not([selected])::before {
background: transparent !important;
}
.content .ac-container sup {
color: white !important;
background: var(--cib-color-brand-primary-background) !important;
}
.root .cbtn,
.cib-message[type="text"],
.item-content,
.main-container,
.suggestion-item > button.container {
background: #262626 !important;
}
cib-feedback {
background: var(--cib-color-brand-secondary-background);
filter: brightness(250%);
}
div > svg > g:nth-child(1) {
fill: #1d1f20 !important;
}
.cib-message[type="text"] {
background: #131516 !important;
}
cib-message[source=bot][type=text] {background: #262626;}
pre {background: #0e0e0e !important;}
/**/
/*-Search AI-*/
cib-see-more-container, cib-message[source=bot][type=text][serp-slot=right-rail]{background: black;}
/**/
/*-Text-*/
:host{color: white;}
:host([type="text"]) .ac-container a.tooltip-target.hover {background: black !important;}
/**/
/*-Buttons-*/
button.js-code-copy {background: #4893ed;}
.expand-button,
.attribution-item {
color: #4893ed !important;
background: #fefefe !important;
}
button.container {background: #262626;}
button.container:hover {background: black;}
svg-icon {fill:white!important;}
IGNORE INLINE STYLE
.b_header_bg
.sp-tpwebicons.WIKI *Here are some pictures that demonstrate the use of this CSS code for Bing chat's dark mode: |
|
It seems like Bing and Bing Chat natively support dark mode |
|
Please check out the version 4.9.75. It has been released for Edge on Friday, passed the Chrome review this morning and still under review for unknown amount of time for Firefox. |
and others
Prerequisites
Bug Description
Just been playing with the new Bing, powered by ChatGPT. Bing chat is going to be hu-u-u-ge, but the response pages are horribly, blindingly light.Normally Dark Reader rides to the rescue, but cannot convert these pages. They are unreadable when automated dark mode is applied.
Website Address
https://www.bing.com/search?q
Steps To Reproduce
Expected Behavior
no glare when loading a new page
Actual Behavior
bright white flash on page load
Screenshots
No response
Operating System
Windows 11, dev channel 25295
Web Browser name and version
Edge 110.0.1587.41 (64-bit)
Dark Reader version
Dark Reader: 4.9.62.
Additional Context
No response
The text was updated successfully, but these errors were encountered: