Gruvbox colors
Hover effects
Hide Bard Location
Bard experiment logo removed
Better colors in code blocks
Better colors in table
Better Google Bard Light theme (location bar gone by bilalazh
Mirrored from a private source
Details
Authorbilalazh
LicenseGNU GPLv3
Categorybard.google.com
Created
Updated
Size15 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Not just your pretty theme comes with other helpful features like
Gruvbox colors --> changed the colors to be easier on eyes and less harsh
Hover effects --> changes the color of font when you hover over it for better reading
Hide Bard Location --> helpful for screenshots and privacy
removed the Bard experiment logo --> also changed the color of top bar to be less harsh to better suit the theme
Better colors in code blocks --> Added gruvbox colors to code blocks which will change based on the language you are using but also stays consistent i.e colors in all languages are shown in light red color and so- on
Better colors in table view --> added better colors for the table view to make it easier to read
you can raise issues in github if you want some feature added or if you want be to port this theme to different
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Google Bard Gruvbox Light
@namespace github/bilalazh
@version 1.0.0
@description "A Light Theme for Google Bard \"bard.google.com\""
@author heybilalazhar@gmail.com
@license NO-REDISTRIBUTION==/UserStyle== */
@-moz-document domain(bard.google.com) {
:root{
--v-ani-mode: rbw2;
--v-ani-time: 3.5s;
--ani-rbw2-col: #2cedb3;
}
/*FRONT PAGE CHANGES GO HERE */
/*HELLO AGAIN H! HEADING*/
/* Recommended to use h1 selector */
h1 {
color: #665c54 !important;
}
/*H2 color change */
/*Tell me What's on your mind */
h2 {
color: #3c3836 !important;
}
/*Prompts Containter backgound color*/
div.prompt-example{
/* CSS styles for the prompt suggestion card element */
background-color: #d6bc8c !important;
}
/*Little line under the chat prompts page* /
/*Chat scoller ugly */
.chat-history:after {
content: "";
background-color: #fbf1c7 !important ;
display: block;
position: -webkit-sticky;
position: sticky;
padding-top: 4px;
width: 100%;
z-index: 1;
}
/*Enter prompt*/
/*Bytton color*/
.text-input-field {
background-color: #fbf1c7 !important;
}
/*Black text man */
.ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
color : #282828 !important ;
margin: 0;
padding: 0;
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
/*Button black */
/* new cchat button upper there too */
span.gmat-subtitle-2{
color : black !important ;
}
ql-editor {
color : #076678 !important ;
}
/*all the buttons*/
/*icons buttons*/
:root .dark-theme .gmat-mdc-button.mat-mdc-icon-button {
--mdc-icon-button-icon-color: #3c3836;
--mat-mdc-button-persistent-ripple-color: rgb(35, 35, 35);
--mat-mdc-button-ripple-color: rgba(232,234,237,0.1);
}
/*Prompt Suggestion Color*/
:root .dark-theme .gmat-mdc-chip.mat-mdc-chip .mdc-evolution-chip__text-label{
color:#fb4934;
}
/*Selected all three UNDDERSTAND < CREATE < EXPLORE< */
.prompt-example h3.gradient.gradient-1,
.prompt-example h3.gradient.gradient-2 ,
.prompt-example h3.gradient.gradient-3 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #282828 !important;
text-fill-color: initial !important;
}
/*sugested prompts property color*/
.mat-mdc-chip-action-label {
color: #ebdbb2 !important;
}
/*SUGGESTED PROMPTS BUTTON*/
/*Suggested Prompts Button color */
/*Added custom roundess to the button as well*/
.mdc-evolution-chip__action {
background-color: #3c3836 !important;
border-radius: 25px !important;
}
/*Change of color when you hover over the button */
.mdc-evolution-chip__action:hover {
background-color: #fb4934 !important;
}
/*Baclground color of the chat container*/
/*Breaks often */
.chat-container {
background-color: #f9f5d7 !important;
}
/*Enter Prompt Button*/
.ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6{
color:#d6bc8c ;
}
/*Old chats color*/
/*Sidebar conversations color fixed as well */
.conversation-title {
color: rgb(35, 35, 35) !important;
}
/*The selextion color of the convo */
/*Old ugly green color will be replaced here */
.conversation.selected {
background-color: #fabd2f !important;
}
/*This is the button which was hard to select man */
.conversations-container .conversation:hover {
background-color: #fb4934;
}
/*THis was pain please send help */
/*Hover over the buttons make it white please */
.conversations-container .conversation:hover{
background-color : #d6bc8c !important ;
}
/*SIDE BAR COLOR CHANGED*/
/*side bar chat title colors*/
.gmat-body-2 {
color: #666363 !important;
}
/*This is the code which changes the inline code color */
/*Inline code */
.markdown code {
background-color: #f9f5d7 !important;
}
/*This is the button rectangle cover*/
/*What did i do */
.mat-mdc-button .mat-mdc-button-touch-target, .mat-mdc-unelevated-button .mat-mdc-button-touch-target, .mat-mdc-raised-button .mat-mdc-button-touch-target, .mat-mdc-outlined-button .mat-mdc-button-touch-target {
position: absolute;
background-color: #ebdbb2 !important ;
top: 50%;
height: 48px;
left: 0;
right: 0;
transform: translateY(-50%);
}
/*The selextion color of the convo */
/*Old ugly green color will be replaced here */
.conversation.selected :hover{
background-color: #fb4934 !important;
}
/*LOCATOIN TAGS */
/* BARD LOCATION HIDDEN TAGS */
/* Hides actual location */
.location-footer-name {
visibility: hidden !important;
}
/* Bard location From your IP address */
.footer-text-style,
.location-buttons-dot,
.location-footer-atl-text,
.location-footer-name,
.update-location-text {
font-family: Google Sans, Helvetica Neue, sans-serif;
font-size: .6875rem;
line-height: 1rem;
font-weight: 500;
letter-spacing: .00625rem;
visibility: hidden !important;
}
/* Inspect location property more specific */
mat-icon.mat-icon.notranslate.filled.location-icon {
visibility: hidden !important;
}
/* Inspect location property less specific */
.location-icon {
visibility: hidden !important;
}
/* Hide Entire botton div section */
location-footer.ng-star-inserted {
visibility: hidden !important;
}
/*Top black bar*/
/*Top bard experiment hidden*/
.gb_Ka .gb_ld.gb_qd.gb_rd {
opacity:0.5 ;
}
/*Bard experiment hidden*/
.gb_Kc {
visibility : hidden !important;
opacity: 0 !important ;
}
/* Change the background color of the header */
header.gb_Ka {
background-color: #666363 !important; /* Green background */
}
/* Style for the fixed position header */
.gb_od {
position: fixed;
top: 0;
width: 100%;
background-color: #d6bc8c; /* Dark background */
}
.gb_od:hover {
position: fixed;
top: 0;
width: 100%;
background-color: #d1bca8; /* Dark background */
}
/*Front PAGE DONE*/
/*Front PAGE DONE*/
/*Front PAGE DONE*/
/*home PAGE DONE*/
/*home PAGE DONE*/
/*home PAGE DONE*/
/*home PAGE DONE*/
/*Home PAGE DONE*/
/*home PAGE DONE*/
/*All the hover effects go first*/
/*hover on text can change it's color to helo you read a line better*/
.markdown p[data-sourcepos]:hover {
color: #d65d0e !important; /* Override other styles */
}
div.markdown.markdown-main-panel ol li:hover, div.markdown.markdown-main-panel ul li:hover {
color: #fb4934 !important;
}
/*JUST HERE FOR REDUNACNY TO CHECK LATER WHY THE HELL COLROS WERE BROKEN BEFORR*/
/*Hover on the list items in the repsonse they will change the colors , this will make focus on part of text better*/
.markdown[_ngcontent-ng-c2853002834] ol li:hover,
.markdown[_ngcontent-ng-c2853002834] ul li:hover {
/* Change to your desired margin */
color: #fb4934 !important
}
/* Hover Effect */
.chat-history.ng-star-inserted>div>user-query>div>div>h2:hover,
div.markdown>p:hover,
/* ... other selectors ... */
.mat-icon.notranslate.mat-mdc-list-item-icon.google-symbols.mat-icon-no-color.mdc-list-item__start:hover {
color: rgb(35, 35, 35) !important; /* Change to your desired hover color */
}
/*Mardown table contents*/
/*Table top bar */
.markdown[_ngcontent-ng-c2853002834] table th {
font-size: .875rem;
font-weight: 500;
line-height: 1.25rem;
font-family: Google Sans,Helvetica Neue,sans-serif;
letter-spacing: normal;
background-color: #665c54;
text-align: left;
}
/* Add coloumn line color in the markdown tables */
.markdown[_ngcontent-ng-c2853002834] table td {
font-size: .875rem;
font-weight: 400;
line-height: 1.25rem;
font-family: Google Sans,Helvetica Neue,sans-serif;
letter-spacing: normal;
border-top: 1px solid #ebdbb2;
padding: 16px;
}
/*Markdown table bottom bar */
.table-block[_ngcontent-ng-c3151600046] .table-footer[_ngcontent-ng-c3151600046] {
background-color: #993c3c;
padding-right: 8px;
border-top: 1px solid var(--bard-color-outline-variant);
}
/*Markdown table text */
.markdown[_ngcontent-ng-c2853002834] {
--animation-duration: 600ms;
color: #ebdbb2;
-webkit-margin-end: 24px;
-moz-margin-end: 24px;
}
/*BACKgournd chat container **/
.response-container{
background-color : #ebdbb2 !important ;
}
/*CODE CONTAINER*/
.code-block, .code-container{
background-color : #fbf1c7 !important ;
}
h1 , h2 , h3 , h4 , h5, h6 {
color : #282828 !important ;
}
/*Chat container*/
/*Bard response color*/
.model-response-text {
color: #fb4934 !important;
}
/*Hide the location icon*/
.location-icon {
display: none;
}
/*Trying lines being hi...