Catppuccin theme for Mastodon Frontend v4.x
Mastodon FE 4.x Catppuccin by lameni
Details
Authorlameni
LicenseNo License
Categorymastodon.ml -> userstyles
Created
Updated
Size12 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 Mastodon Catppuccin
@namespace github.com/catppuccin/mastodon
@homepageURL https://github.com/catppuccin/mastodon
@version 0.0.1
@description Soothing pastel theme for Invidious
@author Catppuccin
@preprocessor stylus
@var select lighttheme "Light Theme" ["Latte*", "Frappe", "Macchiato", "Mocha"]
@var select darktheme "Dark Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
@var checkbox blueaccent "Blue Accent" 0
==/UserStyle== */
@-moz-document domain("mstdn.social"),
domain("fosstodon.org"),
domain("mastodon.ml") {
colourscheme(flavour) {
if (flavour=="Latte") {
--ctp-rosewater: #dc8a78;
--ctp-flamingo: #dd7878;
--ctp-pink: #ea76cb;
--ctp-mauve: #8839ef;
--ctp-red: #d20f39;
--ctp-maroon: #e64553;
--ctp-peach: #fe640b;
--ctp-yellow: #df8e1d;
--ctp-green: #40a02b;
--ctp-teal: #179299;
--ctp-sky: #04a5e5;
--ctp-sapphire: #209fb5;
--ctp-blue: #1e66f5;
--ctp-lavender: #7287fd;
--ctp-text: #4c4f69;
--ctp-subtext1: #5c5f77;
--ctp-subtext0: #6c6f85;
--ctp-overlay2: #7c7f93;
--ctp-overlay1: #8c8fa1;
--ctp-overlay0: #9ca0b0;
--ctp-surface2: #acb0be;
--ctp-surface1: #bcc0cc;
--ctp-surface0: #ccd0da;
--ctp-base: #eff1f5;
--ctp-mantle: #e6e9ef;
--ctp-crust: #dce0e8;
--ctp-text-inverted: var(--ctp-base);
}
if (flavour=="Frappe") {
--ctp-rosewater: #f2d5cf;
--ctp-flamingo: #eebebe;
--ctp-pink: #f4b8e4;
--ctp-mauve: #ca9ee6;
--ctp-red: #e78284;
--ctp-maroon: #ea999c;
--ctp-peach: #ef9f76;
--ctp-yellow: #e5c890;
--ctp-green: #a6d189;
--ctp-teal: #81c8be;
--ctp-sky: #99d1db;
--ctp-sapphire: #85c1dc;
--ctp-blue: #8caaee;
--ctp-lavender: #babbf1;
--ctp-text: #c6d0f5;
--ctp-subtext1: #b5bfe2;
--ctp-subtext0: #a5adce;
--ctp-overlay2: #949cbb;
--ctp-overlay1: #838ba7;
--ctp-overlay0: #737994;
--ctp-surface2: #626880;
--ctp-surface1: #51576d;
--ctp-surface0: #414559;
--ctp-base: #303446;
--ctp-mantle: #292c3c;
--ctp-crust: #232634;
--ctp-text-inverted: var(--ctp-crust);
}
if (flavour=="Macchiato") {
--ctp-rosewater: #f4dbd6;
--ctp-flamingo: #f0c6c6;
--ctp-pink: #f5bde6;
--ctp-mauve: #c6a0f6;
--ctp-red: #ed8796;
--ctp-maroon: #ee99a0;
--ctp-peach: #f5a97f;
--ctp-yellow: #eed49f;
--ctp-green: #a6da95;
--ctp-teal: #8bd5ca;
--ctp-sky: #91d7e3;
--ctp-sapphire: #7dc4e4;
--ctp-blue: #8aadf4;
--ctp-lavender: #b7bdf8;
--ctp-text: #cad3f5;
--ctp-subtext1: #b8c0e0;
--ctp-subtext0: #a5adcb;
--ctp-overlay2: #939ab7;
--ctp-overlay1: #8087a2;
--ctp-overlay0: #6e738d;
--ctp-surface2: #5b6078;
--ctp-surface1: #494d64;
--ctp-surface0: #363a4f;
--ctp-base: #24273a;
--ctp-mantle: #1e2030;
--ctp-crust: #181926;
--ctp-text-inverted: var(--ctp-crust);
}
if (flavour=="Mocha") {
--ctp-rosewater: #f5e0dc;
--ctp-flamingo: #f2cdcd;
--ctp-pink: #f5c2e7;
--ctp-mauve: #cba6f7;
--ctp-red: #f38ba8;
--ctp-maroon: #eba0ac;
--ctp-peach: #fab387;
--ctp-yellow: #f9e2af;
--ctp-green: #a6e3a1;
--ctp-teal: #94e2d5;
--ctp-sky: #89dceb;
--ctp-sapphire: #74c7ec;
--ctp-lavender: #b4befe;
--ctp-blue: #89b4fa;
--ctp-text: #cdd6f4;
--ctp-subtext1: #bac2de;
--ctp-subtext0: #a6adc8;
--ctp-overlay2: #9399b2;
--ctp-overlay1: #7f849c;
--ctp-overlay0: #6c7086;
--ctp-surface2: #585b70;
--ctp-surface1: #45475a;
--ctp-surface0: #313244;
--ctp-base: #1e1e2e;
--ctp-mantle: #181825;
--ctp-crust: #11111b;
--ctp-text-inverted: var(--ctp-crust);
}
}
:root,
.theme-default {
if (darktheme=="Latte") {
colourscheme(Latte)
}
if (darktheme=="Frappe") {
colourscheme(Frappe)
}
if (darktheme=="Macchiato") {
colourscheme(Macchiato)
}
if (darktheme=="Mocha") {
colourscheme(Mocha)
}
}
.theme-mastodon-light {
if (lighttheme=="Latte") {
colourscheme(Latte)
}
if (lighttheme=="Frappe") {
colourscheme(Frappe)
}
if (lighttheme=="Macchiato") {
colourscheme(Macchiato)
}
if (lighttheme=="Mocha") {
colourscheme(Mocha)
}
}
body {
if (blueaccent) {
--ctp-link-colour: var(--ctp-blue);
--ctp-link-hover: var(--ctp-teal);
}
else {
--ctp-link-colour: var(--ctp-rosewater);
--ctp-link-hover: var(--ctp-flamingo);
}
}
body,
.admin-wrapper .sidebar-wrapper__inner,
.tabs-bar__wrapper {
background: var(--ctp-crust);
color: var(--ctp-text);
}
.account__header__bio .account__header__fields dt,
.account__section-headline a.active,
.account__section-headline button.active,
.notification__filter-bar a.active,
.notification__filter-bar button.active,
.account__header__bio .account__header__content,
.navigation-bar,
.column-link__badge,
.column-subheading,
.account__display-name strong,
.status__display-name strong,
.display-name__html,
.notification__message,
.public-layout .public-account-bio .account__header__content,
.reply-indicator__content,
.status__content {
color: var(--ctp-text);
}
.account__header__tabs__name h1 small,
.account__header__bio .account__header__fields dd,
.empty-column-indicator,
.follow_requests-unlocked_explanation,
.account .account__display-name,
.display-name__account,
.search__input,
.search__input:focus,
.account__header__fields dt {
color: var(--ctp-subtext0);
}
.account__header__tabs__name h1,
.account__header__content a,
.account__header__bio .account__header__fields a,
.empty-column-indicator a,
.follow_requests-unlocked_explanation a,
.column-back-button,
.icon-button,
.icon-button.inverted,
.text-icon-button,
.icon-button.active,
.public-layout .public-account-bio .account__header__fields a,
.column-header__back-button,
.notification__message .fa,
.navigation-bar strong,
.reply-indicator__content a.unhandled-link,
.status__content a.unhandled-link {
color: var(--ctp-link-colour);
}
.reply-indicator {
background: var(--ctp-surface0);
}
.icon-button:active,
.icon-button:focus,
.icon-button:hover,
.text-icon-button:active,
.text-icon-button:focus,
.text-icon-button:hover,
.icon-button.inverted:active,
.icon-button.inverted:focus,
.icon-button.inverted:hover,
.public-layout .public-account-bio .account__header__fields a:hover {
color: var(--ctp-link-hover);
}
.ui__header,
.column-header,
.column-header__button,
.column-header__back-button,
.column-back-button,
.drawer__header,
.account__section-headline,
.notification__filter-bar,
.account__section-headline button,
.notification__filter-bar button,
.account__header,
.search__input,
.search__input:focus,
.column-link__badge,
.column-subheading,
.public-layout .header,
.public-layout .public-account-header__bar::before,
.account__header__fields,
.account__header__fields dt,
.account__header__fields dd:not(.account__header__bio .account__header__fields dd),
.focusable:focus,
.admin-wrapper .sidebar ul a:hover,
.admin-wrapper .sidebar ul .simple-navigation-active-leaf .selected,
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover {
border-color: var(--ctp-mantle);
background: var(--ctp-surface0);
}
.theme-mastodon-light .account__header__bar,
.theme-mastodon-light .column-header__back-button,
.account__header__bio .account__header__fields dl,
.account__header__bio .account__header__fields,
.empty-column-indicator,
.column > .scrollable,
.nothing-here,
.public-layout .public-account-bio,
.hero-widget__text,
body.admin,
.admin-wrapper .sidebar ul a.selected,
.admin-wrapper .sidebar ul ul {
border-color: var(--ctp-mantle);
background: var(--ctp-base);
}
.public-layout .public-account-header__tabs__tabs .counter::after {
border-color: var(--ctp-link-colour);
}
.public-layout .public-account-header__tabs__tabs .counter.active::after {
border-color: var(--ctp-link-hover);
}
.account,
.load-gap {
border-color: var(--ctp-mantle);
}
.account__section-headline a.active::after,
.account__section-headline a.active::before,
.account__section-headline button.active::after,
.account__section-headline button.active::before,
.notification__filter-bar a.active::after,
.notification__filter-bar a.active::before,
.notification__filter-bar button.activ...