ℹ️ A CSS modification for Microsoft Bing with visual improvements
📦 Want to see a collection of other themes I've created? | Click Here
✅ Perfectly tested on Chromium based browsers (Google Chrome, Microsoft Edge, etc)
⚠️ There is no guarantee that it will work flawlessly in Mozilla Firefox
❓ NOTE: It may not work perfectly with Bing extensions due to incompatible CSS customizations
🎨 You need Stylus Extension to apply this theme - Chromium Extension | Download Here - Mozilla Firefox Extension | Download Here
If you find a bug, want to help me or want to suggest something, feel free to contact me via Telegram
I made this as a hobby. I'll fix it when I have free time. Please be patient. Don't forget to leave me a review below. Hope you like it :)
- Okki Dwi -
Notes
✨ Features
Dark mode consistency
Other improvements
📝 Upcoming Plan
Add dark mode to Bing Chat (in development)
📜 Changelogs
v1.0 Initial release | 21/04/2023
Source code
/* ==UserStyle==
@name Better Bing+ | Dark Mode
@version 1.0
@namespace https://t.me/okkidwi
@description A CSS modification for Microsoft Bing with visual improvements
@author Okki Dwi
@license GNU General Public License v3.0
==/UserStyle== */
@-moz-document domain("bing.com") {
/* Global Settings */
:root {
--bb-bg-color: #222;
}
* {
color: #ccc !important;
color-scheme: dark light !important;
background-color: transparent !important;
}
/* Homepage */
/* Search Box */
.c_show_c.c_show_form_expanded.c_show_form.hassbi.sb_form {
background-color: var(--bb-bg-color) !important;
}
/* Search Box */
.cdxAcrylicContents,
.cdxAcrylicAnimated.cdxAcrylic,
.cdxPrompt {
background-color: var(--bb-bg-color) !important;
border-radius: 12px;
}
/* Article Title */
.hp_text {
background-color: var(--bb-bg-color) !important;
}
/* Body */
body {
background-color: #222 !important;
}
/* Search Bar */
.b_searchboxForm {
background-color: var(--bb-bg-color) !important;
}
/* Profile Menu */
input#id_a {
background-color: var(--bb-bg-color);
border: 1px solid #666;
border-radius: 6px;
}
.id_accountInfo {
background-color: var(--bb-bg-color) !important;
}
/* Settings Menu */
#HBContent {
background-color: var(--bb-bg-color) !important;
}
#sydwrap_wrapper {
background-color: var(--bb-bg-color) !important;
}
.b_antiSideBleed.b_antiTopBleed {
background-color: var(--bb-bg-color) !important;
}
#b_filterTabBar > a {
background-color: var(--bb-bg-color) !important;
border: 1px solid #666 !important;
}
#b_filterTabBar > a.selectedFilter {
background-color: #444 !important;
}
#overlayPanel {
background-color: var(--bb-bg-color) !important;
}
/* Menu Category */
/* Background */
.b_active::after {
background-color: #402dde !important;
border-radius: 2px;
}
.b_scopebar>ul>li>a {
color: #aaa !important;
}
/* "SEARCH" Menu */
.b_ds5 > .mfa_btn,
#sw_as > div,
#sw_as > div > div,
#sw_as > div > ul,
#sw_as > div > ul :active {
background-color: var(--bb-bg-color) !important;
}
#sw_as > div > ul :hover {
background-color: #444 !important;
border-radius: 6px;
}
/* "MORE" Menu */
.b_sp_over_menu {
background-color: var(--bb-bg-color) !important;
}
/* Header White Line */
#b_header {
border-bottom: none !important;
background-color: #222 !important;
z-index: 3 !important;
}
/* Search Result */
/* Website List Box */
#b_results>li {
background-color: var(--bb-bg-color) !important;
border-radius: 12px;
}
#b_results > li.b_algo.b_algoBorder.b_algo_feedback.b_snippetGobig.b_rcgbt_bg {
background-color: var(--bb-bg-color) !important;
}
#b_results>li#mfa_root.fabcolapse {
background-color: transparent !important;
}
div > div > a.na_ccw,
#na_ti > div > div > div.itm_cap.b_overflow.wimg,
#b_results > li > div > div.captionMediaCard > div {
background-color: #2a2a2a !important;
}
/* Website Title */
a {
color: cornflowerblue !important;
}
/* Website Link */
cite {
color: #58a02e !important;
}
/* Website Category Icon */
.algoSlug_icon {
padding: 3px 4px !important;
color: #fff !important;
border: none !important;
background-color: #444 !important;
}
/* In-line Tab Views*/
div.tab-head > div,
div.tab-head > div > ul,
div.tab-head > div > ul > li {
background-color: var(--bb-bg-color) !important;
}
.lite-entcard-blk {
background-color: #222 !important;
}
/* "Explore this Page" Menu */
.scs_box {
background-color: var(--bb-bg-color) !important;
}
/* Search Related Context Side Pane */
/* Background */
#b_context {
background-color: var(--bb-bg-color) !important;
border-radius: 12px !important;
}
#b_context > li > div > div > div.b_sideBleed.lite-entcard-ans > div.lite-entcard-exp.exp-rs {
background-color: transparent !important;
}
#tob_rail_slide,
#tob_rail_container,
#b_context > li > div > div > div.b_sideBleed.lite-entcard-ans {
background-color: transparent !important;
border-radius: 4px;
border: 1px solid var(--bb-bg-color) !important;
}
/* Related Searches */
#rs_lgw_list a {
background-color: var(--bb-bg-color) !important;
border-radius: 0 16px 16px 0 !important;
}
/* Search Related Context Bottom Pane */
#brsv3 > ul > li > a {
background-color: #222 !important;
}
/* Search Related Context Side Pane */
footer {
background-color: var(--bb-bg-color) !important;
}
/* Other Fixes */
div.user-prefix {
/* hide the text in this div
but do not change the size, otherwise
the tab button would be displayed
in a weird place */
color: transparent !important;
}
div.ghost {
color: #888 !important;
}
.openans_gradient_div {
background: linear-gradient(to right, var(--bb-bg-color), #222) !important;
}
.df_alsoAskCard {
border-color: #555 !important;
}
}
