/* ==UserStyle==
@name docs.deno.com Catppuccin
@namespace github.com/catppuccin/userstyles/styles/docs.deno.com
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/docs.deno.com
@version 2025.09.06
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/docs.deno.com/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adocs.deno.com
@description Soothing pastel theme for docs.deno.com
@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("docs.deno.com") {
@import url("https://prismjs.catppuccin.com/variables.important.css");
:root.dark {
#catppuccin(@lightFlavor);
}
:root.light {
#catppuccin(@darkFlavor);
}
#catppuccin(@flavor) {
#lib.palette();
#lib.defaults();
#lib.css-variables();
--primary: #hsla(@accent)[];
--background-primary: #hsla(@base)[];
--background-secondary: #hsla(@mantle)[];
--background-tertiary: #hsla(@crust)[];
--foreground-primary: #hsla(@text)[];
--foreground-secondary: #hsla(@subtext1)[];
--foreground-tertiary: #hsla(@overlay0)[];
--foreground-quaternary: #hsla(@surface0)[];
--runtime-background: 124deg, 100%, 3%;
--runtime-foreground: 184deg, 100%, 90%;
--note: #hsla(@blue)[];
--info: #hsla(@teal)[];
--caution: #hsla(@yellow)[];
--tip: #hsla(@green)[];
.banner-runtime {
background-color: fade(@accent, 10%);
color: @text;
border-color: @accent;
}
.banner-deploy {
background-color: fade(@sky, 10%);
color: @text;
border-color: @sky;
}
.runtime-link {
color: @accent;
text-decoration-color: @accent;
&:hover {
color: darken(@accent, 5%);
text-decoration-color: darken(@accent, 5%);
}
}
.deploy-link {
color: @sky;
text-decoration-color: @sky;
&:hover {
color: @sapphire;
text-decoration-color: @sapphire;
}
}
.help-link {
color: @mauve;
text-decoration-color: @mauve;
&:hover {
color: darken(@mauve, 5%);
text-decoration-color: darken(@mauve, 5%);
}
}
.heading-runtime {
text-decoration-color: @accent;
}
.heading-deploy {
text-decoration-color: @sky;
}
.heading-purple {
text-decoration-color: @mauve;
}
.runtime-cta {
background-color: @accent;
border-color: @accent;
&:hover {
background-color: darken(@accent, 5%);
}
}
.jsr-cta {
background-color: @yellow;
border-color: @yellow;
color: @crust;
&:hover {
background-color: darken(@yellow, 5%);
}
}
.deploy-cta {
background-color: @sky;
border-color: @sky;
color: @crust;
&:hover {
background-color: @sapphire;
}
}
&,
[data-color-mode] {
--color-fg-default: @text;
--color-fg-muted: @subtext1;
--color-canvas-default: @base;
--color-canvas-subtle: @mantle;
--color-border-default: @surface2;
--color-border-muted: @surface0;
--color-accent-fg: @accent;
--color-accent-emphasis: darken(@accent, 5%);
--color-danger-fg: @red;
--color-prettylights-syntax-markup-deleted-bg: fade(@red, 20%);
--color-prettylights-syntax-markup-inserted-bg: fade(@green, 20%);
}
// Logo
.fill-black {
fill: @text;
}
&.light {
.theme-toggle {
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}");
}
}
&.dark {
.theme-toggle {
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}");
}
}
.markdownBlockTitle {
background-color: @surface0;
border-color: @overlay0;
color: @subtext1;
}
.check-icon [stroke="green"] {
stroke: @green !important;
}
.markdown-body .admonition {
&.note {
background-color: fade(@blue, 5%);
.title::before {
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}");
}
}
&.tip {
background-color: fade(@green, 5%);
.title::before {
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}");
}
}
&.caution {
background-color: fade(@yellow, 5%);
.title::before {
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}");
}
}
&.info {
background-color: fade(@teal, 5%);
.title::before {
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}");
}
}
}
// "Did you find what you needed?"
.bg-blue-50 {
background-color: fade(@blue, 20%);
}
.border-blue-100 {
border-color: fade(@blue, 30%);
}
// Breadcrumbs
.crumb-link::after {
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}");
}
// Toggle switches (tutorial filters)
.slider {
background-color: @overlay2;
}
.filter:checked + .slider {
background-color: @accent;
}
.slider::before {
background-color: @surface0;
}
// Download and install tabbed component
.deno-tabs > div.deno-tabs-content > div,
.deno-tabs > ul.deno-tabs-buttons > li > button[data-active="true"] {
background-color: @surface1;
color: @text;
border-color: @overlay0;
}
.deno-tabs > ul.deno-tabs-buttons > li > button {
background-color: @surface0;
color: @subtext0;
}
.markdown-body .deno-tabs pre {
background-color: @mantle;
border-color: @overlay0;
}
/* API reference */
.ddoc {
#ddoc(@token, @color) {
.text-@{token} {
color: @color;
}
.bg-@{token}\/15 {
background-color: fade(@color, 15%);
}
}
#ddoc(
Namespace,
@yellow,
);
#ddoc(
Interface,
@sapphire,
);
#ddoc(
Enum,
@teal,
);
#ddoc(
Class,
@mauve,
);
#ddoc(
Function,
@blue,
);
#ddoc(
Variable,
@lavender,
);
#ddoc(
TypeAlias,
@pink,
);
}
}
}
#hsla(@color) {
@raw: e(
%("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color))
);
}