/* ==UserStyle==
@name Stylus Catppuccin
@namespace github.com/catppuccin/userstyles/styles/stylus
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/stylus
@version 2025.09.06
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/stylus/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astylus
@description Soothing pastel theme for Stylus
@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 url-prefix("moz-extension://"),
url-prefix("chrome-extension://") {
:root {
&[data-ui-theme="light"] {
#catppuccin(@lightFlavor);
}
&[data-ui-theme="dark"] {
#catppuccin(@darkFlavor);
}
}
#catppuccin(@flavor) {
#lib.palette();
#lib.defaults();
--bg: @base;
--fg: @text;
--c30: @subtext1;
--c40: @overlay0;
--c45: @surface2;
--c50: @subtext0;
--c60: @subtext0;
--c65: @surface2;
--c75: @overlay1;
--c80: @surface1;
--c85: @surface0;
--c90: @base;
--c95: @mantle;
--c97: @mantle;
--c98: @base;
--c99: @base;
--c100: @base;
--red1: @red;
--accent-1: @accent;
--accent-2: @accent;
--accent-3: fade(@accent, 25%);
.slider {
--color-on: fade(@accent, 25%);
--color-off: @surface2;
}
:focus {
--focus-color1: @accent !important;
--focus-color2: fade(@accent, 25%) !important;
}
.active #filters-stats,
.dirty #save-button,
.dirty #save-button + button {
background-color: @accent;
border-color: @accent;
color: @base;
}
#header-resizer {
color: @surface1;
}
#message-box-title::before {
@fade_color: fade(@accent, 67%);
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}");
}
[src="moz-extension://8fc71d5e-96b2-44a4-8d6f-ead6ff4d3c56/images/icon/16.png"],
img[src="/images/icon/128.png"] {
@fade_color: fade(@accent, 67%);
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
#message-box.danger {
#message-box-title {
background-color: @red;
color: @base;
&::before {
@fade_color: fade(@red, 67%);
@svg: escape(
''
);
background: url("data:image/svg+xml,@{svg}") !important;
}
}
#message-box-close-icon i {
color: var(--c40);
&:hover {
color: var(--bg);
}
}
}
#filters label:hover,
#filters .filter-selection:hover {
background-color: @surface0;
}
.oldUI .disabled h2::after,
.entry.usercss .style-name-link::after {
background-color: fade(@accent, 25%);
}
/* Syntax highlighting */
.CodeMirror-activeline-background {
background: @mantle;
}
.CodeMirror-linenumber {
color: @subtext0;
}
div.CodeMirror span.CodeMirror-matchingbracket {
color: @green;
}
.cm-s-default {
.cm-string {
color: @green;
}
.cm-qualifier {
color: @yellow;
}
.cm-variable-2 {
color: @mauve;
}
.cm-keyword {
color: @mauve;
}
.cm-atom {
color: @red;
}
.cm-number {
color: @peach;
}
.cm-def {
color: @mauve;
}
.cm-tag {
color: @blue;
}
.cm-builtin {
color: @red;
}
.cm-variable-3 {
color: @teal;
}
.cm-comment {
color: @overlay2;
}
.cm-operator {
color: @yellow;
}
.cm-variable {
color: @blue;
}
.cm-property {
color: @blue;
}
}
button:disabled,
select:disabled,
option:disabled,
select[disabled] > option {
color: @subtext0;
}
.applies-to input,
.applies-to select {
background: @base;
border-color: @surface0;
color: @subtext0;
}
button {
color: @text !important;
background: @mantle !important;
border-color: @surface0;
&:hover {
border-color: @text;
}
}
#save-button[disabled] {
background: @surface0 !important;
}
#message-box-title {
color: @text;
}
.svg-icon {
fill: @overlay0;
&:hover {
fill: @overlay1;
}
}
.onoffswitch input:checked + span {
background-color: fade(@accent, 25%);
&::before {
background-color: @accent;
}
}
#options-title {
color: @base;
}
h2 {
color: @accent !important;
}
.installed .configure-usercss {
i {
color: @accent;
}
svg,
&:hover svg {
fill: @accent !important;
}
}
#live-reload-install-hint {
color: @teal;
}
#menu.delete {
header {
background: fade(@red, 25%);
}
> div,
[data-cmd="delete"] {
border-color: @red;
}
}
.entry.odd {
background-color: fade(@surface0, 25%);
}
.updater-icons > :not(.check-update)::after {
border-color: @yellow;
background: @base;
}
.split-btn-menu {
border-color: @accent;
> :hover {
background: fade(@accent, 25%);
}
}
#help-popup .title {
background: @mantle;
}
#toc li:hover {
background: fade(@accent, 20%);
}
input:invalid {
background: fade(@red, 10%);
color: @red;
}
}
}