/* ==UserStyle==
@name Brave Search Catppuccin
@namespace github.com/catppuccin/userstyles/styles/brave-search
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/brave-search
@version 2026.01.15
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/brave-search/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Abrave-search
@description Soothing pastel theme for Brave Search
@author Catppuccin
@license MIT
@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */
@import "https://userstyles.catppuccin.com/lib/lib.less";
@-moz-document domain("search.brave.com") {
:root.light {
#catppuccin(@lightFlavor);
}
:root.dark {
#catppuccin(@darkFlavor);
}
:root:not(.light, .dark) {
@media (prefers-color-scheme: light) {
#catppuccin(@lightFlavor);
}
@media (prefers-color-scheme: dark) {
#catppuccin(@darkFlavor);
}
}
#catppuccin(@flavor) {
#lib.palette();
#lib.defaults();
color: @text; // inherited text (e.g. feedback modal)
--color-text-primary: @text;
--color-text-secondary: @subtext1;
--color-text-tertiary: @subtext0;
--color-text-disabled: @overlay1;
--color-icon-default: @overlay2;
--color-icon-secondary: @overlay1;
--color-icon-disabled: @surface2;
--color-divider-subtle: @surface0;
--color-divider-strong: @surface2;
--color-button-disabled: @surface1;
--color-search-background-page: @base;
--color-search-background-search-bar: @surface0;
--color-search-background-container: @surface0;
--color-search-links-link: @blue;
--color-search-background-settings: @mantle;
--color-search-background-highlight: @surface1;
--color-search-background-interactive-normal: fade(@accent, 20%);
--color-search-divider-subtle: @surface1;
--color-search-divider-subtle-container: @surface1;
--color-search-divider-interactive: fade(@accent, 30%);
--color-search-background-enrichment-cards: @surface0;
--color-search-background-suggest-highlight: @surface1;
--color-search-background-user-message-bubble: @surface0;
--color-primary-20: fade(@accent, 30%); // rerank
--color-neutral-20: @surface1; // search elsewhere link hover border
--color-neutral-5: @surface0; // location sharing ip address info
--color-white: @text;
--color-schemes-primary: @accent;
--color-schemes-on-primary: @base;
--color-link-visited: @lavender;
// Tooltips
--color-primitive-neutral-98: @text;
--color-primitive-neutral-0: @surface0;
/* Search Results */
--color-serp-header-background: @base;
.related-query .icon {
color: @overlay2;
}
// Pagination "Next"
.button.type--plain, .button.type--plain-outlined-subtle {
--dsbtn-hover-background: @surface1 !important;
}
/* Settings */
--color-page-background: @base;
--color-container-background: @surface0;
--color-primary-50: @accent; // icons
.form-switch {
--switch-off-background-color: @overlay0;
--switch-off-background-color-hover: @overlay1;
--switch-off-dot-color: @text;
--switch-on-background-color: @accent;
--switch-on-background-color-hover: lighten(@accent, 5%);
--switch-on-dot-color: @base;
}
/* Search Home */
.example-searches {
.card {
background: @surface0;
&:hover {
background: @surface1;
}
}
}
.download-cta-background::before {
background-image: linear-gradient(
90deg,
@surface0 0%,
@surface1 100%
) !important;
mask: none;
}
.suggestions {
border-top-color: @surface1 !important;
}
// LLM
--gradient-icons-active: linear-gradient(
321.5013deg,
@peach 3%,
@pink 40%,
@mauve 99%
);
#gradient-icons-active stop {
&:nth-child(1) {
stop-color: @peach !important;
}
&:nth-child(2) {
stop-color: @pink !important;
}
&:nth-child(3) {
stop-color: @mauve !important;
}
}
.subutton:hover:not(:disabled, .unavailable), .subutton:focus-visible {
background: linear-gradient(
314deg,
@peach 8.49%,
@pink 43.72%,
@mauve 99.51%
);
.icon {
fill: @base !important;
}
}
.suggestion.ask .ask-badge::before {
background-image: linear-gradient(
352deg,
fade(@peach, 15%) 3%,
fade(@pink, 15%) 40%,
fade(@mauve, 15%) 99%
);
}
#logo img, #nav-logo img, .logo-large {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
.nav-logo .logo-small, .logo-wrapper img {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
.waves-bottom {
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}") !important;
}
.waves-top {
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}") !important;
}
}
}