Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark mode and CSS cleanup for claude, bing, and chatGPT #61

Merged
merged 11 commits into from
Jul 14, 2023
Merged

Dark mode and CSS cleanup for claude, bing, and chatGPT #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2a27fcf
style changes to hide header and welcome panel in Bing provider
seanoliver Jul 13, 2023
eed48c5
dark mode styles for Claude2 provider.
seanoliver Jul 13, 2023
c8ca588
bug fixes and improvements to Bing provider
seanoliver Jul 13, 2023
58a6d82
hide unnecessary elements on Bing search page due to UI changes.
seanoliver Jul 13, 2023
ba2f973
fix hover background color on cmdk items
seanoliver Jul 13, 2023
2272528
update openai provider styling
seanoliver Jul 13, 2023
aa508e2
hide bing serp feedback
seanoliver Jul 14, 2023
c26ac52
hide welcome back title
seanoliver Jul 14, 2023
6870b61
update bing.js: adjust styling and remove elements
seanoliver Jul 14, 2023
36adf74
force dark mode for chatgpt
seanoliver Jul 14, 2023
cfb97c0
minor cleanup of claude dark mode
swyxio Jul 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 60 additions & 33 deletions providers/bing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,53 +54,80 @@ class Bing extends Provider {
`);
}

/** Bing requires MS Edge user agent. */
static getUserAgent() {
return 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.37'
}

/**
* Bing has a lot of nested shadow DOMs, so we have to use JS to access the
* elements we want to hide / style.
*
* FIXME: Still can't seem to get this working yet. There might be some funny
* scripts running in the background that are resetting styles.
*
* Thankfully, the event listeners are still working for input and submit, so
* we can still send prompts to the chatbot.
*/
static handleCss() {
// this.webview.executeJavaScript(`
// // Hide Header Bar
// var headerBar = document.querySelector('header');
// headerBar.remove();

// // // Access SERP Shadow DOM
// // var serpDOM = document.querySelector('.cib-serp-main').shadowRoot;

// // // Conversation Shadow DOM
// // var conversationDOM = serpDOM.querySelector('#cib-conversation-main').shadowRoot;

// // // Welcome Container Shadow DOM
// // var welcomeDOM = conversationDOM.querySelector('cib-welcome-container').shadowRoot;
// // console.log('welcomeDOM', welcomeDOM);

// // // Hide all welcome container items except tone selector
// // welcomeDOM.querySelector('div.container-logo').setAttribute('style', 'display: none !important');
// // welcomeDOM.querySelector('div.container-title').setAttribute('style', 'display: none !important');
// // welcomeDOM.querySelector('div.container-subTitle').setAttribute('style', 'display: none !important');
// // welcomeDOM.querySelector('div.container-item').setAttribute('style', 'display: none !important');
// // welcomeDOM.querySelector('div.learn-tog-item').setAttribute('style', 'display: none !important');
// // welcomeDOM.querySelector('div.privacy-statement').setAttribute('style', 'display: none !important');
// }`);
this.getWebview().addEventListener('dom-ready', () => {
// hide message below text input, sidebar, suggestions on new chat
setTimeout(() => {
this.getWebview().insertCSS(`
html, body {
overflow: hidden;
scrollbar-width: none;
}
body {
background-color: #1d1d1d !important;
color: #d7d7d7 !important;
}
#b_sydBgCover {
background: black !important;
}
header {
display: none !important;
}
#b_sydWelcomeTemplate {
display: none !important;
}
.preview-container {
display: none !important;
}
`);
}, 1000);
setTimeout(() => {
this.getWebview().executeJavaScript(`
// Access SERP Shadow DOM
var serpDOM = document.querySelector('.cib-serp-main').shadowRoot;

// Conversation Shadow DOM
var conversationDOM = serpDOM.querySelector('#cib-conversation-main').shadowRoot;

// Action Bar Shadow DOM
var actionBarDOM = serpDOM.querySelector('#cib-action-bar-main').shadowRoot;

// Text Input Shadow DOM
var textInputDOM = actionBarDOM.querySelector('cib-text-input').shadowRoot;

// Welcome Container Shadow DOM
var welcomeDOM = conversationDOM.querySelector('cib-welcome-container').shadowRoot;

// Hide all welcome container items except tone selector
// welcomeDOM.querySelector('div.preview-container').setAttribute('style', 'display: none !important;');

// Hide all welcome container items except tone selector
welcomeDOM.querySelector('div.container-logo').setAttribute('style', 'display: none !important');
welcomeDOM.querySelector('div.container-title').setAttribute('style', 'color: white !important');
welcomeDOM.querySelector('div.container-subTitle').setAttribute('style', 'display: none !important');
welcomeDOM.querySelector('div.container-item').setAttribute('style', 'display: none !important');
welcomeDOM.querySelector('div.learn-tag-item').setAttribute('style', 'display: none !important');
welcomeDOM.querySelector('div.privacy-statement').setAttribute('style', 'display: none !important');

// Remove feedback widget
serpDOM.querySelector('cib-serp-feedback').setAttribute('style', 'display: none !important');

// Remove background gradients
serpDOM.querySelector('cib-background').remove();
conversationDOM.querySelector('.fade.top').remove();
conversationDOM.querySelector('.fade.bottom').remove();

// Recolor text input
textInputDOM.querySelector('textarea').setAttribute('style', 'background-color: #1d1d1d !important; color: #d7d7d7 !important;');
actionBarDOM.querySelector('.main-container.body-2').setAttribute('style', 'background-color: #1d1d1d !important; color: #d7d7d7 !important;');

`);
}, 1000);
});
}

Expand Down
26 changes: 7 additions & 19 deletions providers/claude2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,25 +34,6 @@ class Claude2 extends Provider {
/* black background */
body {
background-color: #1d1d1d !important;
color: #d7d7d7 !important;
}
/* reset text colors for user input and history displays */
fieldset {
color: black !important;
}
div[cmdk-group-items] {
color: black !important;
}

/* messages */
.text-stone-900.bg-white {
background-color: #1d1d1d !important;
color: #d7d7d7 !important;
}

header, .container {
background-color: white;
/* single line dark mode ftw */
filter: invert(100%) hue-rotate(180deg);
}
/* hide the claude avatar in response */
Expand All @@ -63,8 +44,15 @@ class Claude2 extends Provider {
.mx-4.md\:mx-12.mb-2.md\:mb-4.mt-2.w-auto {
margin: 0 !important;
}

`);
}, 1000);
setTimeout(() => {
this.getWebview().executeJavaScript(`
// hide welcome back title
document.querySelector('h2').style.display = 'none';
`);
}, 1000);
});
}

Expand Down
18 changes: 17 additions & 1 deletion providers/openai.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,10 @@ class OpenAi extends Provider {
this.getWebview().addEventListener('dom-ready', () => {
// hide message below text input, sidebar, suggestions on new chat
this.getWebview().insertCSS(`
.text-xs.text-center {
body {
scrollbar-width: none;
}
.text-xs.text-center {
opacity: 0;
height: 0;
margin-bottom: -10px;
Expand All @@ -59,6 +62,19 @@ class OpenAi extends Provider {


`);
setTimeout(() => {
this.getWebview().executeJavaScript(`
// Get the root element
const root = document.querySelector(':root');

// Set the color-scheme CSS variable
root.style.setProperty('--color-scheme', 'dark');

// Add the .dark class to the body
document.body.classList.add('dark');

`);
}, 0);
});
}

Expand Down