This is not the official Catppuccin flavor https://github.com/catppuccin/userstyles
some userstyles with the Catppuccin color scheme and opinionated changes
AuthorCosteer
LicenseCC Zero
Categoryzen-browser.app/mods/ https://www.nerdfonts.com/
Created
Updated
Size5.0 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
some userstyles with the Catppuccin color scheme and opinionated changes
/* ==UserStyle==
@name Extra Styles
@version 20250305.11.59
@namespace ?
==/UserStyle== */
@-moz-document url-prefix("https://www.nerdfonts.com/") {
body {
background: #1e1e2e;
}
/* Navbar ----------------------------------------------- */
nav {
background: #181825;
}
nav .p-home {
border-color: #f5c2e7;
}
nav .p-features {
border-color: #cba6f7;
}
nav .p-downloads {
border-color: #f38ba8;
}
nav .p-icon-cheat-sheet {
border-color: #fab387;
}
nav .p-all-contributors {
border-color: #a6e3a1;
}
nav .p-backers-supporters {
border-color: #89b4fa;
}
nav .p-release {
border-color: #b4befe;
}
#icon-cheat-sheet {
background-color: #1e1e2e !important;
color: #cdd6f4;
}
#icon-cheat-sheet .sectiondivider {
color: #1e1e2e;
}
.sectiondivider .nf-fa-circle {
color: #cba6f7;
}
#icon-cheat-sheet {
color: #cdd6f4;
}
/* higlight */
.highlight,
.linenodiv {
background-image: url();
background-color: #181825;
padding-top: 20px;
margin-bottom: 20px;
}
.highlight {
color: #cba6f7;
}
.nt {
color: #f38ba8;
}
.na {
color: #a6e3a1;
}
.s {
color: #fab387;
}
/* icon example */
.ow {
color: #f38ba8;
}
.nfunc {
color: #a6e3a1;
}
/*footer*/
#footer {
background-color: #181825;
padding-top: 20px;
padding-bottom: 10px;
}
/* ### --- Home Page -------------------------------------------------------------------------- ###*/
#home {
background-color: #1e1e2e !important;
color: #cdd6f4;
}
.rainbow {
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #66601e), color-stop(1, #f22));
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
#features .sectiondivider {
color: #1e1e2e;
}
#features {
background-color: #313244 !important;
color: #cdd6f4;
}
.feature-section {
background: #1e1e2e;
padding: 10px 20px;
margin-bottom: 20px;
border-radius: 5px;
}
.feature-section h2,
.feature-section h3,
.feature-section h4:not(.nerd-font-button) {
padding: 10px 0px;
margin: 0px;
color: #cdd6f4;
text-shadow: -1px -1px 0 transparent, 1px -1px 0 transparent, -1px 1px 0 transparent, 1px 1px 0 transparent;
}
#features a {
color: #cdd6f4;
}
.bg-blue {
background-color: #181825 !important;
border-radius: 5px;
}
/* ### --- Download Page -------------------------------------------------------------------------- ###*/
#downloads {
background-color: #181825 !important;
color: #a6adc8;
}
#downloads .sectiondivider {
color: #181825;
}
/* ### --- contributer-page -------------------------------------------------------------------------- ###*/
#all-contributors {
background-color: #181825 !important;
color: #a6adc8;
}
#all-contributors .sectiondivider {
color: #181825;
}
/* ### --- backers-page -------------------------------------------------------------------------- ###*/
#backers-supporters {
background-color: #181825 !important;
color: #a6adc8;
}
#backers-supporters .sectiondivider {
color: #181825;
}
/* ### --- Cheat-Sheet -------------------------------------------------------------------------- ###*/
/* Searchbar */
.nerd-font-button.tertiary,
.nerd-font-input.tertiary {
background: #181825;
border-color: #181825;
border-radius: 5px;
color: #cdd6f4;
/*padding-bottom: 12px;
padding-top: 12px;
padding-left: 30px;
padding-right: 30px;*/
}
/* Icon Resoults */
#glyphCheatSheet .column {
border: 2px solid #181825;
background-color: #181825;
}
#main .nerd-font-cheat-sheet .glyph-popout-copy-clipboard {
background: #181825;
border: 2px solid #a6adc8;
}
/* Hover */
#main .nerd-font-cheat-sheet .column:hover {
background: rgba(0, 0, 0, 0.25);
border: 2px solid #a6adc8;
color: #a6adc8 !important;
cursor: pointer
}
#main .nerd-font-cheat-sheet span.glyph-popout-copy-clipboard span:first-child {
background: #a6adc8;
color: #181825;
}
#main .nerd-font-cheat-sheet .column:hover .codepoint {
border-color: #a6adc8;
}
#main .nerd-font-cheat-sheet .column .codepoint:hover {
background #181825;
}
#main .nerd-font-cheat-sheet .column:hover .class-name {
color: #a6adc8;
}
#main .nerd-font-cheat-sheet span.glyph-popout-copy-clipboard span:not(:first-child):hover {
background: #181825;
border-color: #a6adc8;
}
/* red "removed" triangle */
.corner-red {
border-top: 65px solid #f38ba8;
border-radius: 5px;
border-left: 65px solid transparent;
}
.corner-text {
color: #181825;
}
}
@-moz-document url-prefix("https://zen-browser.app/mods/") {
.text-dark {
color: #cdd6f4;
}
.bg-paper {
background-color: #1e1e2e;
}
.border-dark {
border-color: #cdd6f4;
}
.text-paper {
color: #1e1e2e;
}
}