Slimmed down Bing AI Dark Theme

theme.js

(function() {
    'use strict';

    // Disable scroll up: https://greasyfork.org/vi/scripts/461533-disable-bingchat-scroll-up/code
    window.addEventListener("wheel", e=>{
        if(e.target.className.includes("cib-serp-main")) e.stopPropagation();
    });

    // Core theme CSS, based on: https://github.com/darkreader/darkreader/issues/10784#issuecomment-1500925640
    function injectCSS(node, shadowRoot) {
        let css = `
canvas[id^="Microsoft.Maps"],
cib-background {
    filter: invert(1) contrast(0.8) hue-rotate(180deg);
}

.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;
}
* {
    --cib-color-neutral-foreground: white !important;
    --cib-color-brand-link-foreground: #00f2ff !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%);
}

.scroller-positioner {margin:auto;}
#cib-action-bar-main {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: 25px;
position: unset;
}
#b_header, #b_content {
    display: none;
}
:host .item-content:hover::before, :host .container:focus-visible .item-content::before {
    opacity: 0.2 !important;
}

/* Suggested responses */
.suggestion-items, .root .cbtn {
    filter: brightness(1.7);
}
cib-tooltip {
    --cib-color-neutral-layer-overlay: rgb(60 60 60) !important;
}
#stop-responding-button > div {
    filter: brightness(3);
}
.expand-button, .attribution-item, .ac-container a.tooltip-target.hover, .ac-container span.tooltip-target.hover {
    filter: invert(1) hue-rotate(180deg);
}
.attribution-item > .background {
    display: none;
}
#gir_attr > .qr, #gir_attr > .attr {
    filter: invert(1);
}
.control.submit {
    filter: brightness(1.5);
}

.content .ac-container .ac-textBlock pre {
    background: #0d111794 !important;
}

/* Show newlines in input text */
.text-message-content {
    white-space: pre-wrap;
    display: block;
    unicode-bidi: embed;
}

.hljs {
  color: #c9d1d9 !important;
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #ff7b72 !important;
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #d2a8ff !important;
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #79c0ff !important;
}

.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #a5d6ff !important;
}

.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  color: #ffa657 !important;
}

.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  color: #8b949e !important;
}

.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #7ee787 !important;
}

.hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #c9d1d9 !important;
}

.hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #1f6feb !important;
  font-weight: bold !important;
}

.hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #f2cc60 !important;
}

.hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #c9d1d9 !important;
  font-style: italic !important;
}

.hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #c9d1d9 !important;
  font-weight: bold !important;
}

.hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #aff5b4;
  background-color: #033a16 !important;
}

.hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #ffdcd7;
  background-color: #67060c !important;
}

.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  color: #c9d1d9 !important;
}
.main-container {
    background: rgb(26, 26, 26) !important;
}
`;
        if(node.tagName === 'CIB-SUGGESTION-ITEM') {
            css += `
button.container:hover {
    filter: brightness(1.2) !important;
    background: var(--cib-color-brand-secondary-background) !important;
}
`;
        } else if(node.tagName === 'CIB-NOTIFICATION') {
            css += `
.text-container {
    filter: brightness(2);
}
`;
        } else if(node.tagName === 'CIB-HOVER-CARD') {
            css += `
.container {
    background: #000000cc !important;
}
.link-container > h4.ellipsis {
    color: #0035ff !important;
}
`;
        } else if(node.tagName === 'CIB-MESSAGE') {
            css += `
:host {
    background: rgb(255 255 255 / 10%) !important;
}
`;
        }
        const styleSheet = new CSSStyleSheet();
        styleSheet.replaceSync(css);
        shadowRoot.adoptedStyleSheets.push(styleSheet);
    }

    // We must inject the theme into all shadow roots

    // Watch for new shadow roots
    const originalAttachShadow = Element.prototype.attachShadow;
    Element.prototype.attachShadow = function() {
        const newShadowRoot = originalAttachShadow.apply(this, arguments);
        injectCSS(this, newShadowRoot);
        return newShadowRoot;
    };

    // Iterate through all existing shadow roots
    function processShadowRoots(node) {
        if (node.shadowRoot && node.shadowRoot.mode === 'open') {
            injectCSS(node, node.shadowRoot);
            // Recursively process any nested shadow roots
            node.shadowRoot.querySelectorAll('*').forEach(processShadowRoots);
        }
    }
    document.querySelectorAll('*').forEach(processShadowRoots);

    // Also inject into root document
    injectCSS(document, document);

})();