From 642f4adbafd8d974f5312248717f2b4cacc4c5cb Mon Sep 17 00:00:00 2001 From: Jenish Boricha Date: Sun, 9 Aug 2026 20:17:50 +0530 Subject: [PATCH 1/2] feat: add Gemini userstyle --- README.md | 1 + styles/gemini/LICENSE | 21 ++ styles/gemini/README.md | 42 ++++ styles/gemini/rose-pine.user.less | 311 ++++++++++++++++++++++++++++++ styles/gemini/style.json | 5 + 5 files changed, 380 insertions(+) create mode 100644 styles/gemini/LICENSE create mode 100644 styles/gemini/README.md create mode 100644 styles/gemini/rose-pine.user.less create mode 100644 styles/gemini/style.json diff --git a/README.md b/README.md index 493395a..8f2d982 100644 --- a/README.md +++ b/README.md @@ -116,6 +116,7 @@ additional setup instructions or special requirements. - [ChatGPT](https://github.com/rose-pine/userstyles/tree/main/styles/chatgpt) - [Claude](https://github.com/rose-pine/userstyles/tree/main/styles/claude) +- [Gemini](https://github.com/rose-pine/userstyles/tree/main/styles/gemini) **Development** diff --git a/styles/gemini/LICENSE b/styles/gemini/LICENSE new file mode 100644 index 0000000..6018af3 --- /dev/null +++ b/styles/gemini/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 Rosé Pine + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/styles/gemini/README.md b/styles/gemini/README.md new file mode 100644 index 0000000..b941cda --- /dev/null +++ b/styles/gemini/README.md @@ -0,0 +1,42 @@ +

+ +

Rosé Pine for Gemini

+

All natural pine, faux fur and a bit of soho vibes for the classy minimalist

+

+ + + +

+ +## Usage + +1. Make sure you have the [Stylus](https://github.com/openstyles/stylus) browser + extension installed, then visit + [this link](https://github.com/rose-pine/userstyles/raw/main/styles/gemini/rose-pine.user.less) +2. Configure your preferred accent color and theme variant +3. Click install on the top left + +## Options + +- **Main Chat Width:** Adjust the conversation container width (`Default`, + `Regular`, `Medium`, `Large`, `Max`). +- **Disable Gemini Advance Upsell:** Hide the promotional upgrade container. +- **Disable Gemini Glow:** Turn off the background ambient glow effect. +- **Disable Gradient Fading:** Remove top and bottom scroll mask gradients in + chat history and input area. +- **Disable Hallucination Disclaimer:** Hide the footnoted AI accuracy + disclaimer message. +- **Disable Welcome Message:** Hide the standard Gemini splash text and sparkle + greeting on new chats. + +## Gallery + +Rosé Pine with Gemini + +Rosé Pine Moon with Gemini + +Rosé Pine Dawn with Gemini + +## Thanks to + +- [jenishboricha](https://github.com/jenishboricha) diff --git a/styles/gemini/rose-pine.user.less b/styles/gemini/rose-pine.user.less new file mode 100644 index 0000000..3c4ca50 --- /dev/null +++ b/styles/gemini/rose-pine.user.less @@ -0,0 +1,311 @@ +/* ==UserStyle== +@name Rosé Pine for Gemini +@description Soho vibes for Gemini +@version 1.0.0 +@license MIT +@author Jenish Boricha (https://github.com/jenishboricha) +@namespace https://github.com/rose-pine/ +@homepageURL https://github.com/rose-pine/userstyles +@updateURL https://github.com/rose-pine/userstyles/raw/main/styles/gemini/rose-pine.user.less +@preprocessor less + +@var select lightFlavor "Light Flavor" ["dawn:Rosé Pine Dawn*"] +@var select darkFlavor "Dark Flavor" ["main:Rosé Pine*", "moon:Rosé Pine Moon"] +@var select accentColor "Accent" ["love:Love*", "gold:Gold", "rose:Rose", "pine:Pine", "foam:Foam", "iris:Iris"] +@var select chatWidth "Main Chat Width" ["val_default:Default*", "val_regular:Regular", "val_medium:Medium", "val_large:Large", "val_max:Max"] + +@var checkbox hideUpsell "Disable Gemini Advance Upsell" 0 +@var checkbox hideGlow "Disable Gemini Glow" 0 +@var checkbox hideFading "Disable Gradient Fading" 0 +@var checkbox hideDisclaimer "Disable Hallucination Disclaimer" 0 +@var checkbox hideWelcome "Disable Welcome Message" 0 +==/UserStyle== */ + +/* Rosé Pine Palette */ +#rose-pine-vars(dawn) { + @base: #faf4ed; + @surface: #fffaf3; + @overlay: #f2e9e1; + @muted: #9893a5; + @subtle: #797593; + @text: #575279; + @love: #b4637a; + @gold: #ea9d34; + @rose: #d7827e; + @pine: #286983; + @foam: #56949f; + @iris: #907aa9; + @highlightLow: #f4ede8; + @highlightMed: #dfdad9; + @highlightHigh: #cecacd; +} + +#rose-pine-vars(main) { + @base: #191724; + @surface: #1f1d2e; + @overlay: #26233a; + @muted: #6e6a86; + @subtle: #908caa; + @text: #e0def4; + @love: #eb6f92; + @gold: #f6c177; + @rose: #ebbcba; + @pine: #31748f; + @foam: #9ccfd8; + @iris: #c4a7e7; + @highlightLow: #21202e; + @highlightMed: #403c58; + @highlightHigh: #524f67; +} + +#rose-pine-vars(moon) { + @base: #232136; + @surface: #2a273f; + @overlay: #393552; + @muted: #6e6a86; + @subtle: #908caa; + @text: #e0def4; + @love: #eb6f92; + @gold: #f6c177; + @rose: #ea9a97; + @pine: #3e8fb0; + @foam: #9ccfd8; + @iris: #c4a7e7; + @highlightLow: #2a283e; + @highlightMed: #44415a; + @highlightHigh: #56526e; +} + +#rose-pine-defaults(@flavor) { + #rose-pine-vars(@flavor); + @accent: @@accentColor; +} + +@-moz-document url-prefix("https://gemini.google.com") { + :root .dark-theme { + #rosePineTheme(@darkFlavor); + } + + :root .light-theme { + #rose-pine-defaults(@lightFlavor); + + /* Base/Surface Inversion for Dawn(Light) Mode */ + --lumi-sys-color--surface: @surface; + --lumi-sys-color--surface-bright: @base; + --lumi-sys-color--surface-dim: @base; + --gem-sys-color--surface-bright: @overlay; + --gem-sys-color--on-surface: @text; + --gem-sys-color--surface-container: @overlay; + --gem-sys-color--surface-container-high: @highlightMed; + --gem-sys-color--on-secondary-container: @surface; + --gem-sys-color--secondary-container: @accent; + --bard-color-lm-on-surface-variant: @muted; + --bard-color-lm-on-surface-low: @highlightLow; + + --lumi-sys-color--code-background: @base; + --lumi-sys-color--code-blue-text: @foam; + --lumi-sys-color--code-green-text: @pine; + --lumi-sys-color--code-grey-text: @muted; + --lumi-sys-color--code-pink-text: @rose; + --lumi-sys-color--code-primary-text: @text; + --lumi-sys-color--code-purple-text: @iris; + --lumi-sys-color--code-red-text: @love; + --lumi-sys-color--code-yellow-text: @gold; + + --lumi-sys-color-acc-color--accent: @accent; + --lumi-sys-color-acc-color--accent-container: @accent; + + bard-sidenav.collapsed { + background-color: @surface !important; + } + + bard-sidenav { + --lumi-sys-color--surface-dim: @surface; + } + + mat-icon[data-mat-icon-name="arrow_upward"], + mat-icon[fonticon="arrow_upward"] { + color: @surface !important; + } + } + + #rosePineTheme(@themeName) { + #rose-pine-defaults(@themeName); + + --lumi-sys-color--surface: @base; + --lumi-sys-color--surface-bright: @surface; + --lumi-sys-color--surface-dim: @surface; + --gem-sys-color--surface-bright: @overlay; + --gem-sys-color--on-surface: @text; + --gem-sys-color--surface-container: @overlay; + --gem-sys-color--surface-container-high: @highlightMed; + --gem-sys-color--on-secondary-container: @base; + --gem-sys-color--secondary-container: @accent; + --bard-color-lm-on-surface-variant: @muted; + --bard-color-lm-on-surface-low: @highlightLow; + + --lumi-sys-color--code-background: @surface; + --lumi-sys-color--code-blue-text: @foam; + --lumi-sys-color--code-green-text: @pine; + --lumi-sys-color--code-grey-text: @muted; + --lumi-sys-color--code-pink-text: @rose; + --lumi-sys-color--code-primary-text: @text; + --lumi-sys-color--code-purple-text: @iris; + --lumi-sys-color--code-red-text: @love; + --lumi-sys-color--code-yellow-text: @gold; + + --lumi-sys-color-acc-color--accent: @accent; + --lumi-sys-color-acc-color--accent-container: @accent; + + bard-sidenav.collapsed { + background-color: @base !important; + } + + bard-sidenav { + --lumi-sys-color--surface-dim: @base; + } + + mat-icon[data-mat-icon-name="arrow_upward"], + mat-icon[fonticon="arrow_upward"] { + color: @base !important; + } + } + + /* TOGGLES & VISIBILITY */ + + .chat-history-scroll-container.lm when (@hideFading = 1) { + -webkit-mask-image: none !important; + mask-image: none !important; + background: transparent !important; + } + + .input-gradient:before when (@hideFading = 1) { + -webkit-mask-image: none !important; + mask-image: none !important; + background: transparent !important; + } + + hallucination-disclaimer when (@hideDisclaimer = 1) { + > div p { + display: none; + } + margin-bottom: 0.75rem; + } + + .lm-mobile-sparkle-and-text when (@hideWelcome = 1) { + display: none; + } + + .buttons-container.adv-upsell.ng-star-inserted when (@hideUpsell = 1) { + display: none; + } + + .show-lm-background:before when (@hideGlow = 1) { + display: none; + } + + /* WIDE LAYOUT & TABLE CONTROLS */ + + .apply-custom-width(@widthValue) { + .main-content, + chat-window, + infinite-scroller { + width: 100% !important; + max-width: 100% !important; + } + + .conversation-container, + .bottom-container, + .input-area-container, + div[class*="line-clamp-"] { + max-width: @widthValue !important; + width: 100% !important; + margin-left: auto !important; + margin-right: auto !important; + } + + user-query, + user-query > div { + max-width: none !important; + width: 100% !important; + display: flex !important; + justify-content: flex-end !important; + margin: 0 !important; + padding: 0 !important; + } + + .user-query-bubble-with-background, + div[class*="user-query"] { + width: auto !important; + max-width: 85% !important; + margin-right: 0 !important; + display: inline-block !important; + text-align: left !important; + } + + .input-area-container form, + .input-field-container { + width: 100% !important; + box-sizing: border-box !important; + } + + .input-area-container .right-actions, + .input-field-container div[class*="actions"] { + padding-right: 16px !important; + margin-right: 0 !important; + } + + div[class*="message-content"], + div[class*="model-response"], + div[class*="answer"], + ms-message-author-reply, + .inner-container, + infinite-scroller > div { + max-width: none !important; + width: 100% !important; + } + + div[class*="table-"], + div[class*="render-"], + div[id*="table-"], + .rendered-table, + ms-g-table { + display: block !important; + max-width: 100% !important; + width: 100% !important; + overflow-x: auto !important; + } + + table { + display: table !important; + width: 100% !important; + min-width: 100% !important; + max-width: 100% !important; + table-layout: auto !important; + } + + table th, + table td { + min-width: 120px !important; + white-space: normal !important; + word-break: keep-all !important; + padding: 12px 16px !important; + } + } + + & when (@chatWidth = val_regular) { + .apply-custom-width(65%); + } + + & when (@chatWidth = val_medium) { + .apply-custom-width(75%); + } + + & when (@chatWidth = val_large) { + .apply-custom-width(85%); + } + + & when (@chatWidth = val_max) { + .apply-custom-width(95%); + } +} diff --git a/styles/gemini/style.json b/styles/gemini/style.json new file mode 100644 index 0000000..8beabe3 --- /dev/null +++ b/styles/gemini/style.json @@ -0,0 +1,5 @@ +{ + "name": "Gemini", + "author": "Jenish Boricha", + "category": "AI" +} From 1ee1dbbd6362855ac0593edeead621493408d077 Mon Sep 17 00:00:00 2001 From: Jenish Boricha Date: Mon, 10 Aug 2026 17:01:20 +0530 Subject: [PATCH 2/2] style(gemini): update to template format --- styles/gemini/rose-pine.user.less | 170 +++++++++++------------------- 1 file changed, 64 insertions(+), 106 deletions(-) diff --git a/styles/gemini/rose-pine.user.less b/styles/gemini/rose-pine.user.less index 3c4ca50..178b217 100644 --- a/styles/gemini/rose-pine.user.less +++ b/styles/gemini/rose-pine.user.less @@ -9,8 +9,8 @@ @updateURL https://github.com/rose-pine/userstyles/raw/main/styles/gemini/rose-pine.user.less @preprocessor less -@var select lightFlavor "Light Flavor" ["dawn:Rosé Pine Dawn*"] -@var select darkFlavor "Dark Flavor" ["main:Rosé Pine*", "moon:Rosé Pine Moon"] +@var select lightVariant "Light Variant" ["dawn:Rosé Pine Dawn*"] +@var select darkVariant "Dark Variant" ["main:Rosé Pine*", "moon:Rosé Pine Moon"] @var select accentColor "Accent" ["love:Love*", "gold:Gold", "rose:Rose", "pine:Pine", "foam:Foam", "iris:Iris"] @var select chatWidth "Main Chat Width" ["val_default:Default*", "val_regular:Regular", "val_medium:Medium", "val_large:Large", "val_max:Max"] @@ -21,117 +21,46 @@ @var checkbox hideWelcome "Disable Welcome Message" 0 ==/UserStyle== */ -/* Rosé Pine Palette */ -#rose-pine-vars(dawn) { - @base: #faf4ed; - @surface: #fffaf3; - @overlay: #f2e9e1; - @muted: #9893a5; - @subtle: #797593; - @text: #575279; - @love: #b4637a; - @gold: #ea9d34; - @rose: #d7827e; - @pine: #286983; - @foam: #56949f; - @iris: #907aa9; - @highlightLow: #f4ede8; - @highlightMed: #dfdad9; - @highlightHigh: #cecacd; -} - -#rose-pine-vars(main) { - @base: #191724; - @surface: #1f1d2e; - @overlay: #26233a; - @muted: #6e6a86; - @subtle: #908caa; - @text: #e0def4; - @love: #eb6f92; - @gold: #f6c177; - @rose: #ebbcba; - @pine: #31748f; - @foam: #9ccfd8; - @iris: #c4a7e7; - @highlightLow: #21202e; - @highlightMed: #403c58; - @highlightHigh: #524f67; -} - -#rose-pine-vars(moon) { - @base: #232136; - @surface: #2a273f; - @overlay: #393552; - @muted: #6e6a86; - @subtle: #908caa; - @text: #e0def4; - @love: #eb6f92; - @gold: #f6c177; - @rose: #ea9a97; - @pine: #3e8fb0; - @foam: #9ccfd8; - @iris: #c4a7e7; - @highlightLow: #2a283e; - @highlightMed: #44415a; - @highlightHigh: #56526e; -} - -#rose-pine-defaults(@flavor) { - #rose-pine-vars(@flavor); - @accent: @@accentColor; -} - @-moz-document url-prefix("https://gemini.google.com") { :root .dark-theme { - #rosePineTheme(@darkFlavor); + #rose-pine(@darkVariant); } :root .light-theme { - #rose-pine-defaults(@lightFlavor); - - /* Base/Surface Inversion for Dawn(Light) Mode */ - --lumi-sys-color--surface: @surface; - --lumi-sys-color--surface-bright: @base; - --lumi-sys-color--surface-dim: @base; - --gem-sys-color--surface-bright: @overlay; - --gem-sys-color--on-surface: @text; - --gem-sys-color--surface-container: @overlay; - --gem-sys-color--surface-container-high: @highlightMed; - --gem-sys-color--on-secondary-container: @surface; - --gem-sys-color--secondary-container: @accent; - --bard-color-lm-on-surface-variant: @muted; - --bard-color-lm-on-surface-low: @highlightLow; - - --lumi-sys-color--code-background: @base; - --lumi-sys-color--code-blue-text: @foam; - --lumi-sys-color--code-green-text: @pine; - --lumi-sys-color--code-grey-text: @muted; - --lumi-sys-color--code-pink-text: @rose; - --lumi-sys-color--code-primary-text: @text; - --lumi-sys-color--code-purple-text: @iris; - --lumi-sys-color--code-red-text: @love; - --lumi-sys-color--code-yellow-text: @gold; - - --lumi-sys-color-acc-color--accent: @accent; - --lumi-sys-color-acc-color--accent-container: @accent; + #rose-pine(@lightVariant); + } - bard-sidenav.collapsed { - background-color: @surface !important; + #rose-pine(@variant) { + @base: @rose-pine[@@variant][@base]; + @surface: @rose-pine[@@variant][@surface]; + @overlay: @rose-pine[@@variant][@overlay]; + @muted: @rose-pine[@@variant][@muted]; + @subtle: @rose-pine[@@variant][@subtle]; + @text: @rose-pine[@@variant][@text]; + @love: @rose-pine[@@variant][@love]; + @gold: @rose-pine[@@variant][@gold]; + @rose: @rose-pine[@@variant][@rose]; + @pine: @rose-pine[@@variant][@pine]; + @foam: @rose-pine[@@variant][@foam]; + @iris: @rose-pine[@@variant][@iris]; + @highlightLow: @rose-pine[@@variant][@highlightLow]; + @highlightMed: @rose-pine[@@variant][@highlightMed]; + @highlightHigh: @rose-pine[@@variant][@highlightHigh]; + @accent-color: @rose-pine[@@variant][@@accentColor]; + color-scheme: if(@variant = dawn, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); } - bard-sidenav { - --lumi-sys-color--surface-dim: @surface; + input, + textarea { + &::placeholder { + color: @highlightLow !important; + } } - mat-icon[data-mat-icon-name="arrow_upward"], - mat-icon[fonticon="arrow_upward"] { - color: @surface !important; - } - } - - #rosePineTheme(@themeName) { - #rose-pine-defaults(@themeName); - + /* Base theme color */ --lumi-sys-color--surface: @base; --lumi-sys-color--surface-bright: @surface; --lumi-sys-color--surface-dim: @surface; @@ -140,7 +69,7 @@ --gem-sys-color--surface-container: @overlay; --gem-sys-color--surface-container-high: @highlightMed; --gem-sys-color--on-secondary-container: @base; - --gem-sys-color--secondary-container: @accent; + --gem-sys-color--secondary-container: @accent-color; --bard-color-lm-on-surface-variant: @muted; --bard-color-lm-on-surface-low: @highlightLow; @@ -154,8 +83,8 @@ --lumi-sys-color--code-red-text: @love; --lumi-sys-color--code-yellow-text: @gold; - --lumi-sys-color-acc-color--accent: @accent; - --lumi-sys-color-acc-color--accent-container: @accent; + --lumi-sys-color-acc-color--accent: @accent-color; + --lumi-sys-color-acc-color--accent-container: @accent-color; bard-sidenav.collapsed { background-color: @base !important; @@ -169,6 +98,28 @@ mat-icon[fonticon="arrow_upward"] { color: @base !important; } + + /* Inversion for Dawn(Light) Mode - @surface/@base */ + & when (@variant = dawn) { + --lumi-sys-color--surface: @surface; + --lumi-sys-color--surface-bright: @base; + --lumi-sys-color--surface-dim: @base; + --gem-sys-color--on-secondary-container: @surface; + --lumi-sys-color--code-background: @base; + + bard-sidenav.collapsed { + background-color: @surface !important; + } + + bard-sidenav { + --lumi-sys-color--surface-dim: @surface; + } + + mat-icon[data-mat-icon-name="arrow_upward"], + mat-icon[fonticon="arrow_upward"] { + color: @surface !important; + } + } } /* TOGGLES & VISIBILITY */ @@ -309,3 +260,10 @@ .apply-custom-width(95%); } } + +/* deno-fmt-ignore */ +@rose-pine: { + @main: { @base: #191724; @surface: #1f1d2e; @overlay: #26233a; @muted: #6e6a86; @subtle: #908caa; @text: #e0def4; @love: #eb6f92; @gold: #f6c177; @rose: #ebbcba; @pine: #31748f; @foam: #9ccfd8; @iris: #c4a7e7; @highlightLow: #21202e; @highlightMed: #403d52; @highlightHigh: #524f67; }; + @moon: { @base: #232136; @surface: #2a273f; @overlay: #393552; @muted: #6e6a86; @subtle: #908caa; @text: #e0def4; @love: #eb6f92; @gold: #f6c177; @rose: #ea9a97; @pine: #3e8fb0; @foam: #9ccfd8; @iris: #c4a7e7; @highlightLow: #2a283e; @highlightMed: #44415a; @highlightHigh: #56526e; }; + @dawn: { @base: #faf4ed; @surface: #fffaf3; @overlay: #f2e9e1; @muted: #9893a5; @subtle: #797593; @text: #464261; @love: #b4637a; @gold: #ea9d34; @rose: #d7827e; @pine: #286983; @foam: #56949f; @iris: #907aa9; @highlightLow: #f4ede8; @highlightMed: #dfdad9; @highlightHigh: #cecacd; }; +}