/* ==UserStyle==
@name gleam.run Catppuccin
@namespace github.com/Sebagabones/userstyles/styles/gleam.run
@homepageURL https://github.com/Sebagabones/userstyles/tree/main/styles/gleam.run
@version 2025.09.06
@updateURL https://github.com/Sebagabones/userstyles/raw/main/styles/gleam.run/catppuccin.user.less
@supportURL https://github.com/Sebagabones/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agleam.run
@description Soothing pastel theme for gleam.run
@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";
@-moz-document domain("gleam.run") {
@import url("https://prismjs.catppuccin.com/variables.important.css");
@import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css");
code.hljs {
background: none !important;
}
body {
@media (prefers-color-scheme: light) {
#catppuccin(@lightFlavor);
}
@media (prefers-color-scheme: dark) {
#catppuccin(@darkFlavor);
}
&.theme-light {
#catppuccin(@lightFlavor);
}
&.theme-dark {
#catppuccin(@darkFlavor);
}
}
#catppuccin(@flavor) {
#lib.palette();
#lib.defaults();
#lib.css-variables();
--color-text-main: @text;
--color-underwater-blue: @base;
--color-black: @mantle;
--color-blacker: @crust;
--color-white: @text;
--color-faff-pink: @accent;
--color-aged-plastic-yellow: @text;
--color-code-grey: @subtext1;
--color-code-blue: @sky;
--color-code-green: @green;
--color-code-dark-grey: @overlay2;
--color-code-yellow: @yellow;
--color-code-red: @red;
--color-code-orange: @peach;
--color-code-light-pink: @pink;
--charcoal: var(--color-charcoal);
--underwater-blue: var(--color-underwater-blue);
--black: var(--color-black);
--blacker: var(--color-blacker);
--white: var(--color-white);
--faff-pink: var(--color-faff-pink);
--aged-plastic-yellow: var(--color-aged-plastic-yellow);
--unnamed-blue: var(--color-unnamed-blue);
--code-grey: var(--color-code-grey);
--code-blue: var(--color-code-blue);
--code-green: var(--color-code-green);
--code-dark-grey: var(--color-code-dark-grey);
--code-yellow: var(--color-code-yellow);
--code-red: var(--color-code-red);
--code-orange: var(--color-code-orange);
--code-light-pink: var(--color-code-light-pink);
img[src="https://gleam.run/images/lucy/lucy.svg"],
img[src="/images/lucy/lucy.svg"] {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
.hero-lucy-container:hover .hero-lucy, .logo:hover .footer-lucy {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
.pride .page-header {
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}");
}
.home-waves {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
p > code, li > code {
background-color: @surface0;
opacity: 1;
}
/* gleam.run home */
.button {
color: @crust !important;
background-color: @accent;
}
.home-still-here {
.button {
background-color: @text;
color: @crust;
}
/* Wanna keep in touch? */
input[type="submit"] {
background-color: @text !important;
color: @crust;
}
input[type="email"] {
background-color: @mantle;
color: @text;
}
}
/* tour.gleam.run */
--color-text: @text;
--color-link: @text;
--color-background: @base;
--color-background-dim: @crust;
--color-text-accent: @accent;
--color-accent-muted: fade(@accent, 50%);
--code-background: @base;
--code-token-base: @text;
--color-code: @accent;
/* packages.gleam.run */
--page-background: @base;
--card-background: @surface0;
--card-border: @surface1;
--card-border-highlight: @surface2;
--text-regular: @text;
--text-highlight: @text;
img[src="/static/packages-icon.svg"] {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
.darkmode-toggle {
filter: @crust-filter;
}
.page-nav a {
color: @crust;
}
.package-button img {
filter: @accent-filter;
}
}
}