Add color to UI!!!

Google AI Studio
,
1

¡Por supuesto! Aquí tienes la traducción al inglés del párrafo que redactaste:

Add Color to UI!!!

The current Google AI Studio interface, which is predominantly dark and monochromatic, is difficult to use and lacks the necessary intuitiveness. The combination of a black background with small icons in a subtle blue tone drastically reduces contrast, making visibility difficult and forcing users to repeatedly search for key elements. We urgently request the addition of more color and higher contrast to UI elements, such as buttons and icons, to significantly improve the user experience (UX) and make the tool more accessible and efficient.

2 Likes
3

Hi @Silvia_Llorens , Welcome to forum!!!
Thank you for your feedback. We appreciate you taking the time to share your thoughts, and we truly value your input. We’ll be submitting a feature request based on your suggestion.

1 Like
5

Hi Silvia, you can easily tweak the look and feel of any website’s interface to your preference by installing a Chromium browser extension that overrides its CSS styling.

I did this for the Google AI Studio web app, and it works great (see attached screenshot). The extension I used is called “Stylus.”

Here are the CSS styling rules to modify some of the CSS styles on the Google AI Studio web app; adjust them to your own liking:

.page-header[_ngcontent-ng-c1275382003] {
/* page header */
background-color: lightgray;

}

.container[_ngcontent-ng-c2323767193] {
/* left container header */
background-color: gainsboro;
}

.console-right-panel.visible[_ngcontent-ng-c1275382003] {
/* right container header */
background-color: gainsboro;
}

.tree-view-container[_ngcontent-ng-c1275382003] {
/* file explorer */
background-color: whitesmoke;
}

ms-cmark-node blockquote,
ms-cmark-node div,
ms-cmark-node dl,
ms-cmark-node dt,
ms-cmark-node td,
ms-cmark-node th,
ms-cmark-node li,
ms-cmark-node p,
ms-cmark-node section {
/* left container content */
font-family: sans-serif;
font-size: 14.5px;
line-height: 17.5px;
}

.turn-header[_ngcontent-ng-c2323767193] {
/* user & assistant header */
background-color: darkslateblue;
font-family: sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 30px;
color: white;
gap: 8px;
margin-bottom: 6px;
margin-top: -6px;
margin-left: 0px;
}

.turn.input[_ngcontent-ng-c2323767193] {
/* user prompt */
background-color: lavender;
font-size: 14.5px;
color: var(–color-on-surface);
padding: 6px;
margin-left: 0px;
margin-bottom: 16px;
}

ms-expandable-turn[_ngcontent-ng-c2323767193] {
/* assistant thinking */
background-color: aliceblue;
margin-left: 0px;
margin-bottom: 16px;
}

.container.expandable[_ngcontent-ng-c1894153289] {
background: aliceblue;
cursor: pointer;
}

.inline-code[_ngcontent-ng-c4139270029] {
/* left container - inline code */
background: gainsboro;
font-family: JetBrains Mono NL, monospace;
}

.suggestions-container[_ngcontent-ng-c2323767193] .suggestions-header[_ngcontent-ng-c2323767193] {
/* suggestions title */
background-color: gainsboro;
}

ms-autoscroll-container[_ngcontent-ng-c2323767193] {
/* left column header background */
background-color: whitesmoke;
}

blockquote[_ngcontent-ng-c4139270029] {
/* inline blockquote */
background-color: thistle;
margin-left: 24px;
padding: 10px;
}

.bottom-container[_ngcontent-ng-c2323767193] {
/* bottom container */
background-color: gainsboro;
margin-bottom: 8px;
}

.container[_ngcontent-ng-c1894153289] {
/* assistant thinking container */
border: 1px solid;
border-radius: 8px;
.container.expandable[_ngcontent-ng-c1894153289] {
border: 1px solid;
border-radius: 8px;
cursor: pointer;
}

.content[_ngcontent-ng-c1894153289] p {
    /* assistant thinking  */
    font-size: 12.5px;
    margin-bottom: 0;
}

07'00-001
07'00-0012176×1382 261 KB

6

Okay, thank you, but my point isn’t about simply changing the color scheme. While a dark environment is great for focused writing sessions, the platforms—specifically Gemini, Google AI Studio, and NotebookLM—all share a similar, visually uniform aesthetic. They currently lack distinct visual elements like color variation or unique icons. I believe there is a missed opportunity in the UI design for better differentiation and visual appeal. To enhance this visual identity, I suggest incorporating Google’s four bold colors (blue, red, yellow, and green) to introduce subtle but recognizable color accents or unique visual cues for each product.

7

Got it now, it wasn’t very clear (to me) in your original post what you meant. If you’re a designer, you could ask Nano Banana Pro to add color to a screenshot of Google AI Studio you’ve uploaded, then prompt it to redesign it to your taste. After that, submit the redesign here so the Google team present can share it with their colleagues.

9

I should be part of the Google team.