How to style Google AI Studio's user interface with Stylus

Google AI Studio
1

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 {
                    /* page header */
                    background-color: #a8a29e;
                }

                .container {
                    /* left container header */
                    background-color: #d6d3d1;
                }

                .console-right-panel.visible {
                    /* right container header */
                    background-color: #d6d3d1;
                }

                .tree-view-container {
                    /* file explorer */
                    background-color: #f0eee6;
                }

                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 - chat body text */
                    font-family: sans-serif;
                    color: black;
                    font-size: 14px;
                    line-height: 17.5px;
                }

                .turn-header {
                    /* user & assistant header */
                    background-color: #d6d3d1;
                    font-family: sans-serif;
                    font-size: 14px;
                    font-weight: 600;
                    line-height: 22px;
                    color: black;
                    gap: 10px;
                    margin-bottom: 10px;
                    margin-top: 16px;
                    margin-left: 0px;
                }

                .turn.input p {
                    /* user prompt text */
                    font-size: 15px !important;
                    font-weight: 300;
                    color: #2563eb !important;
                }


                .inline-code[_ngcontent-ng-c4139270029] {
                    background: #f0eee6;
                    color: #8a2424;

                }

                .suggestions-container .suggestions-header {
                    /* suggestions title */
                    background-color: #f0eee6;
                }

                ms-autoscroll-container {
                    /* left column header background */
                    background-color: #faf9f5;
                }

                blockquote {
                    /* inline blockquote */
                    background-color: #ffe4e6;
                    margin-left: 24px;
                    padding: 10px;
                }

                .bottom-container {
                    /* bottom container */
                    background-color: #f0eee6;
                    margin-bottom: 8px;
                }

                .container {
                    /* assistant thinking container */
                    background-color: lavender;
                    border: 0px solid;
                    border-radius: 8px;
                }

                h1 {
                    /* header title */
                    font-size: 14px;
                    font-weight: 600;
                    color: white;
                }

                h2 {
                    /* subtitles in assistant answers */
                    font-size: 14px;
                    font-weight: 600;
                    color: #8a2424;
                }

                h3 {
                    /* subtitles in assistant answers */
                    font-size: 14px;
                    font-weight: 600;
                    color: #8a2424;
                }

                .generation-table {
                    /* table of modified files */
                    background-color: #fff1f2;
                    border-radius: 8px;
                    border: 1px solid var(--color-v3-outline-var);
                    overflow: hidden;
                    padding: 4px;
                }

11'44-001
11'44-0011862×1476 255 KB

1 Like
2

Hey,

Hope you’re keeping well.

Google AI Studio doesn’t provide a built‑in API or settings to customize its UI styling, so using a browser extension like Stylus is purely a client‑side modification and won’t affect the app for other users or across devices. Keep in mind that Angular component selectors ([_ngcontent-…]) are generated dynamically and can change when AI Studio updates, so your CSS rules may break over time. If you want a more stable approach, target semantic class names or higher‑level containers rather than auto‑generated attributes. Also remember that since this is unsupported by Google, any UI changes you make won’t be preserved if the site’s structure changes.

Thanks and regards,
Taz

3

Those are valid comments. I am fully aware of what you have described, as I have been using Stylus for many years.

5

Hey,

Hope you’re keeping well.

Google AI Studio’s styling isn’t officially customizable through built‑in settings, so using a browser extension like Stylus is purely a client‑side tweak and won’t affect the app for other users or persist across devices. Since AI Studio’s DOM structure and CSS class names can change without notice during updates, your custom rules may break or need adjustments over time. If you want a more stable customization path, consider running your own front‑end that interacts with the AI Studio APIs, where you control all styling directly. For the current Stylus approach, keep your CSS selectors as generic as possible and avoid relying on auto‑generated _ngcontent attributes, since these are framework‑specific and volatile.

Thanks and regards,
Taz

1 Like
7

Thanks for the tips. I just updated the CSS selectors to be as generic as possible.

9

Here is another stylus CSS code for Google AI studio which gives the Chat… vibe:

/* =========================================
   1. USER MESSAGE (Light Grey Bubble)
   ========================================= */
.chat-turn-container.user {
    background-color: #f4f5f7 !important; /* Clean light grey background */
    border-radius: 16px !important;       /* Rounded corners */
    padding: 16px 24px !important;        /* Nice breathing room inside the box */
    margin: 16px 0 !important;            /* Spacing between messages */
    border: none !important;              /* Ensures no weird outlines */
}

/* Optional: Keep the user label looking clean */
.chat-turn-container.user .author-label {
    margin-top: 0 !important;
    padding-bottom: 8px !important;
}

/* =========================================
   2. MODEL MESSAGE (Transparent / Blends in)
   ========================================= */
.chat-turn-container.model {
    background-color: transparent !important; 
    border: none !important;
    padding: 16px 8px !important;
    margin: 16px 0 !important;
}

/* =========================================
   3. PREVENT HOVER BORDERS
   ========================================= */
/* Google AI Studio adds a border when you hover over messages. This hides it. */
.chat-turn-container.user:hover,
.chat-turn-container.model:hover {
    border-color: transparent !important;
}