See their repo
Catppuccin by dewenhona
Details
Authordewenhona
LicenseNo License
Categorygithub
Created
Updated
Size22 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Catppuccin
@version 20220208.17.31
@namespace userstyles.world/user/dewenhona
@description See their repo
@author dewenhona
@license No License
==/UserStyle== */
@-moz-document url("github.com") {
/* name: Catppuccin */
/* author: Pocco81 (https://github.com/Pocco81)
Andreas Grafen (https://github.com/andreasgrafen) */
/* license: MIT */
/* upstream: https://github.com/catppuccin/github */
/* blurb: Soothing pastel theme for the high-spirited! */
:root {
/* Give H, S, L values */
/* rainbow 🌈 */
--rosewater: 10, 56%, 91%;
--flamingo: 0, 59%, 88%;
--mauve: 279, 70%, 83%;
--pink: 316, 72%, 86%;
--maroon: 349, 60%, 77%;
--red: 342, 79%, 75%;
--peach: 024, 88%, 78%;
--yellow: 041, 88%, 84%;
--green: 128, 58%, 79%;
--green_darken: 128, 58%, 76%;
--green_darkest: 128, 58%, 72%;
--teal: 171, 53%, 81%;
--blue: 207, 93%, 79%;
--blue_darken: 213, 84%, 78%;
--sky: 189, 71%, 73%;
--lavender: 238, 100%, 89%;
/* black & white ☯️ */
--black0: 254, 25%, 10%;
--black1: 249, 23%, 12%;
--black2: 240, 21%, 15%;
--black3: 249, 18%, 22%;
--black4: 254, 12%, 36%;
--gray0: 247, 8%, 46%;
--gray1: 274, 11%, 59%;
--gray2: 285, 10%, 75%;
--white: 220, 38%, 89%;
}
:root {
/* INTERNAL VARS */
--__black0: hsl(var(--black0));
--__black1: hsl(var(--black1));
--__black2: hsl(var(--black2));
--__black3: hsl(var(--black3));
--__black4: hsl(var(--black4));
--__gray0: hsl(var(--gray0));
--__gray1: hsl(var(--gray1));
--__gray2: hsl(var(--gray2));
--__white: hsl(var(--white));
--__rosewater: hsl(var(--rosewater));
--__red: hsl(var(--red));
--__yellow: hsl(var(--yellow));
--__peach: hsl(var(--peach));
--__green: hsl(var(--green));
--__lavender: hsl(var(--lavender));
--__blue: hsl(var(--blue));
--__pink: hsl(var(--pink));
/* MUTED VARS */
--__black2_muted: hsl(var(--black2), 0.2);
--__black1_muted: hsl(var(--black1), 0.2);
--__black3_muted: hsl(var(--black3), 0.2);
--__gray0_muted: hsl(var(--gray0), 0.2);
--__gray1_muted: hsl(var(--gray1), 0.2);
--__white_muted: hsl(var(--white), 0.2);
--__gray2_muted: hsl(var(--gray2), 0.2);
--__black4_muted: hsl(var(--black4), 0.2);
--__red_muted: hsl(var(--red), 0.2);
--__yellow_muted: hsl(var(--yellow), 0.2);
--__peach_muted: hsl(var(--peach), 0.2);
--__green_muted: hsl(var(--green), 0.2);
--__lavender_muted: hsl(var(--lavender), 0.2);
--__blue_muted: hsl(var(--blue), 0.2);
--__pink_muted: hsl(var(--pink), 0.2);
/* DARKEN STUFF */
--__green_darken: hsl(var(--green_darken));
--__green_darkest: hsl(var(--green_darkest));
--__blue_darken: hsl(var(--blue_darken));
/* CONTRIBUTION GRAPH */
--__color-graph-L1: hsl(var(--green), .3);
--__color-graph-L2: hsl(var(--green), .6);
--__color-graph-L3: hsl(var(--green), .9);
--__color-graph-L4: hsl(var(--green));
/* ADVANCED STUFF */
--color-fg-default: var(--__white) !important;
--color-fg-muted: var(--__gray2) !important;
--color-fg-subtle: var(--__gray1) !important;
--color-fg-on-emphasis: var(--__black3) !important;
--color-canvas-default: var(--__black2) !important;
--color-canvas-overlay: var(--__black1) !important;
--color-canvas-inset: var(--__black1) !important;
--color-canvas-subtle: var(--__black1) !important;
--color-border-default: var(--__black4) !important;
--color-border-muted: var(--__black3) !important;
--color-border-subtle: var(--__gray0) !important;
--color-shadow-small: 0 0 transparent !important;
--color-shadow-medium: 0 3px 6px var(--__black1) !important;
--color-shadow-large: 0 8px 24px var(--__black1) !important;
--color-shadow-extra-large: 0 12px 48px var(--__black1) !important;
--color-neutral-emphasis-plus: var(--__gray0) !important;
--color-netral-emphasis: var(--__gray0) !important;
--color-neutral-muted: var(--__black3) !important;
--color-neutral-subtle: var(--__black1) !important;
--color-accent-fg: var(--__blue) !important;
--color-accent-emphasis: var(--__blue_darken) !important;
--color-accent-muted: var(--__blue_muted) !important;
--color-accent-subtle: var(--__blue_muted) !important;
--color-success-fg: var(--__green) !important;
--color-success-emphasis: var(--__green_darken) !important;
--color-success-muted: var(--__green_muted) !important;
--color-success-subtle: var(--__green_muted) !important;
--color-attention-fg: var(--__yellow) !important;
--color-attention-emphasis: var(--__yellow) !important;
--color-attention-muted: var(--__yellow_muted) !important;
--color-attention-subtle: var(--__yellow_muted) !important;
--color-severe-fg: var(--__peach) !important;
--color-severe-emphasis: var(--__peach) !important;
--color-severe-muted: var(--__peach_muted) !important;
--color-severe-subtle: var(--__peach_muted) !important;
--color-danger-fg: var(--__red) !important;
--color-danger-emphasis: var(--__red) !important;
--color-danger-muted: var(--__red_muted) !important;
--color-danger-subtle: var(--__red_muted) !important;
--color-done-fg: var(--__pink) !important;
--color-done-emphasis: var(--__pink) !important;
--color-done-muted: var(--__pink_muted) !important;
--color-done-subtle: var(--__pink_muted) !important;
--color-sponsors-fg: var(--__pink) !important;
--color-sponsors-emphasis: var(--__pink) !important;
--color-sponsors-muted: var(--__pink_muted) !important;
--color-sponsors-subtle: var(--__pink_muted) !important;
--color-primer-border-active: var(--__peach) !important;
--color-sidenav-selected-bg: var(--__black1) !important;
--color-state-hover-primary-bg: var(--__blue_darken) !important;
--color-state-hover-primary-border: var(--__blue) !important;
--color-timeline-badge-bg: var(--color-border-muted) !important;
/* BUTTONS */
--color-btn-text: var(--__white) !important;
--color-btn-bg: var(--__black3) !important;
--color-btn-border: var(--color-btn-bg) !important;
--color-btn-hover-bg: var(--__black4) !important;
--color-btn-hover-border: var(--color-btn-hover-bg) !important;
--color-btn-active-bg: var(--__black4) !important;
--color-btn-active-border: var(--color-btn-active-bg) !important;
--color-btn-selected-bg: var(--__black3) !important;
--color-btn-focus-bg: var(--__black3) !important;
--color-btn-counter-bg: var(--__black2) !important;
--color-btn-primary-text: var(--__black2) !important;
--color-btn-primary-bg: var(--__green_darkest) !important;
--color-btn-primary-hover-bg: var(--__green_darken) !important;
--color-btn-primary-selected-bg: var(--__green_darken) !important;
--color-btn-primary-focus-bg: var(--__green_muted) !important;
--color-btn-primary-icon: var(--__black2) !important;
--color-btn-primary-disabled-bg: var(--__green_muted) !important;
--color-btn-primary-disabled-text: var(--__gray2) !important;
--color-btn-outline-text: var(--__blue) !important;
--color-btn-outline-hover-text: var(--__blue) !important;
--color-btn-outline-hover-bg: var(--__black1) !important;
--color-btn-outline-selected-text: var(--__white) !important;
--color-btn-outline-selected-bg: var(--__blue_darken) !important;
--color-btn-outline-disabled-bg: var(--__black1) !important;
--color-btn-danger-text: var(--__red) !important;
--color-btn-danger-hover-text: var(--__white) !important;
--color-btn-danger-hover-bg: var(--__red) !important;
--color-btn-danger-hover-border: var(--__red) !important;
--color-btn-danger-hover-icon: var(--__white) !important;
--color-btn-danger-selected-text: var(--__white) !important;
--color-btn-danger-selected-bg: var(--__red) !important;
--color-btn-danger-selected-border: var(--__peach) !important;
--color-btn-danger-disabled-bg: var(--__black2) !important;
--color-btn-danger-focus-border: var(--__red) !important;
--color-btn-danger-icon: var(--__red) !important;
/* ANSI */
--color-ansi-red: var(--__red) !important;
--color-ansi-red-bright: var(--__red) !important;
--color-ansi-green: var(--__green) !important;
--color-ansi-green-bright: var(--__green) !important;
--color-ansi-yellow: var(--__yellow) !important;
--color-ansi-yellow-bright: var(--__yellow) !important;
--color-ansi-lavender: var(--__blue) !important;
--color-ansi-lavender-bright: var(--__blue) !important;
--color-ansi-magenta: var(--__pink) !important;
--color-ansi-magenta-bright: var(--__pink) !important;
--color-ansi-cyan: var(--__lavender) !important;
--color-ansi-cyan-bright: var(--__lavender) !important;
/* WORKFLOWS */
--color-workflow-card-bg: var(--__black1) !important;
--color-workflow-card-hover-bg: var(--__black1) !important;
--color-workflow-card-hover-bg: var(--__black3) !important;
--color-workflow-card-focus-bg: var(--__black1) !important;
--color-workflow-card-focus-bg: var(--__black3) !important;
--color-workflow-card-border: var(--__black3) !important;
--color-checks-bg: var(--__black1) !important;
--color-checks-text-primary: var(--__white) !important;
--color-checks-text-secondary: var(--__gray0) !important;
--color-checks-text-link: var(--__blue) !important;
--color-checks-btn-icon: var(--__white) !important;
--color-checks-btn-hover-icon: var(--__gray0) !important;
--color-checks-input-text: var(--__gray0) !important;
--color-checks-input-placeholder-text: var(--__gray1) !important;
--color-checks-input-focus-text: var(--__white) !important;
--color-checks-input-bg: var(--__black1) !important;
--color-checks-donut-error: var(--__red) !important;
--color-checks...