/* ==UserStyle==
@name web.dev Catppuccin
@namespace github.com/Sebagabones/userstyles/styles/web.dev
@homepageURL https://github.com/Sebagabones/userstyles/tree/main/styles/web.dev
@version 2026.03.04
@updateURL https://github.com/Sebagabones/userstyles/raw/main/styles/web.dev/catppuccin.user.less
@supportURL https://github.com/Sebagabones/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aweb.dev
@description Soothing pastel theme for web.dev
@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://raw.githubusercontent.com/Sebagabones/userstyles/refs/heads/main/lib/lib.less";
// Exclude https://pagespeed.web.dev/, which is (currently) poorly themed.
@-moz-document url-prefix("https://web.dev") {
:root {
@media (prefers-color-scheme: light) {
#catppuccin(@lightFlavor);
}
@media (prefers-color-scheme: dark) {
#catppuccin(@darkFlavor);
}
}
#catppuccin(@flavor) {
#lib.palette();
#lib.defaults();
:focus-visible {
outline-color: @accent;
}
--webdev-background-gray: @surface0;
--webdev-background-gray-2: @surface1;
--webdev-background-oficial-gray: @surface0;
--webdev-background-white: @base;
--webdev-google-colors-blue-50: @base;
--webdev-google-colors-blue-600: @accent;
--webdev-google-colors-blue-800: @accent;
--webdev-primary: @accent;
--webdev-text-text-1: @text;
--webdev-text-text-2: @subtext1;
--webdev-text-text-3: @subtext0;
--webdev-illustration-colors-blue: @blue;
--webdev-illustration-colors-gray: @surface2;
--webdev-illustration-colors-green: @green;
--webdev-illustration-colors-red: @red;
--devsite-secondary-text-color: @subtext1;
--devsite-primary-border: 1px solid @surface0;
--devsite-secondary-border: 1px solid @surface2;
--devsite-contrast-link-color: @accent;
--devsite-header-link-color-active: @text;
--devsite-button-disabled-background: @surface0;
--devsite-button-disabled-color: @subtext0;
--devsite-button-primary-background-active: @accent;
--devsite-button-primary-color-active: @crust;
--devsite-button-primary-border-hover: 2px solid transparent;
--devsite-input-background: @surface0;
--devsite-input-background-focus: fade(@accent, 30%);
devsite-multiple-choice {
.devsite-multiple-choice-question {
color: @text;
}
--devsite-multiple-choice-background: @surface0;
--devsite-multiple-choice-correct-background: fade(@green, 10%);
--devsite-multiple-choice-correct-color: @green;
--devsite-multiple-choice-incorrect-background: fade(@red, 10%);
--devsite-multiple-choice-incorrect-color: @red;
}
body:not([codelabs-content-type="paginated"]) {
--devsite-notice-link-background-hover: @mantle;
--devsite-caution-notice-background: fade(@red, 10%);
--devsite-caution-notice-color: @red;
--devsite-key-point-notice-background: fade(@sapphire, 10%);
--devsite-key-point-notice-color: @sapphire;
--devsite-key-term-notice-background: fade(@mauve, 10%);
--devsite-key-term-notice-color: @mauve;
--devsite-note-notice-background: fade(@blue, 10%);
--devsite-note-notice-color: @blue;
--devsite-status-notice-color: @teal;
--devsite-success-notice-background: fade(@green, 10%);
--devsite-success-notice-color: @green;
--devsite-warning-notice-background: fade(@peach, 10%);
--devsite-warning-notice-color: @peach;
}
devsite-code,
devsite-code[dark-code],
devsite-content {
--devsite-code-background: @mantle;
--devsite-code-color: @text;
--devsite-code-buttons-color: @overlay2;
--devsite-code-buttons-hover: @subtext1;
--devsite-var-color: @mauve;
--devsite-code-comments-color: @overlay2;
--devsite-code-keywords-color: @mauve;
--devsite-code-numbers-color: @peach;
--devsite-code-strings-color: @green;
--devsite-code-types-color: @yellow;
}
devsite-header devsite-language-selector {
--devsite-select-color: @text;
}
devsite-playlist {
.devsite-playlist--header h1:first-of-type,
.devsite-playlist--header-badge-info,
.devsite-playlist--header-details-info {
color: @crust;
}
.devsite-playlist--sections .devsite-playlist--section[expanded] {
color: @crust;
}
devsite-bookmark {
--devsite-bookmark-icon-color: @crust;
--devsite-bookmark-icon-arrow-color: @crust;
--devsite-dropdown-list-toggle-color-hover: @crust;
}
}
devsite-content {
--devsite-search-results-breadcrumb-color: @subtext0;
}
.devsite-site-logo {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
.wd-footer-promo {
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}");
}
}
}