/* ==UserStyle==
@name Bluesky Social Catppuccin
@namespace github.com/catppuccin/userstyles/styles/bsky
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/bsky
@version 2024.12.31
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bsky/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Absky
@description Soothing pastel theme for Bluesky Social
@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== */
@-moz-document domain("bsky.app") {
html.colorMode--system {
@media (prefers-color-scheme: light) {
#catppuccin(@lightFlavor);
}
@media (prefers-color-scheme: dark) {
#catppuccin(@darkFlavor);
}
}
html.theme--light {
#catppuccin(@lightFlavor);
}
html.theme--dim,
html.theme--dark {
#catppuccin(@darkFlavor);
}
#catppuccin(@flavor) {
@rosewater: @catppuccin[@@flavor][@rosewater];
@flamingo: @catppuccin[@@flavor][@flamingo];
@pink: @catppuccin[@@flavor][@pink];
@mauve: @catppuccin[@@flavor][@mauve];
@red: @catppuccin[@@flavor][@red];
@maroon: @catppuccin[@@flavor][@maroon];
@peach: @catppuccin[@@flavor][@peach];
@yellow: @catppuccin[@@flavor][@yellow];
@green: @catppuccin[@@flavor][@green];
@teal: @catppuccin[@@flavor][@teal];
@sky: @catppuccin[@@flavor][@sky];
@sapphire: @catppuccin[@@flavor][@sapphire];
@blue: @catppuccin[@@flavor][@blue];
@lavender: @catppuccin[@@flavor][@lavender];
@text: @catppuccin[@@flavor][@text];
@subtext1: @catppuccin[@@flavor][@subtext1];
@subtext0: @catppuccin[@@flavor][@subtext0];
@overlay2: @catppuccin[@@flavor][@overlay2];
@overlay1: @catppuccin[@@flavor][@overlay1];
@overlay0: @catppuccin[@@flavor][@overlay0];
@surface2: @catppuccin[@@flavor][@surface2];
@surface1: @catppuccin[@@flavor][@surface1];
@surface0: @catppuccin[@@flavor][@surface0];
@base: @catppuccin[@@flavor][@base];
@mantle: @catppuccin[@@flavor][@mantle];
@crust: @catppuccin[@@flavor][@crust];
@accent: @catppuccin[@@flavor][@@accentColor];
color-scheme: if(@flavor = latte, light, dark);
::selection {
background-color: fade(@accent, 30%);
}
input,
textarea {
&::placeholder {
color: @subtext0 !important;
}
}
// fix general site background - this applies to the <html> element
background-color: @base;
--text: @text;
--background: @base;
--backgroundLight: @base;
/* generic text */
[style*="color: rgb(255, 255, 255)"],
[style*="color: rgb(241, 243, 245)"] //,
/* [style*="color: rgb(11, 15, 20)"] this breas on dark */ {
color: if(@flavor = latte, @base, @text) !important;
}
/* some background color of follow button + hover */
[style*="background-color: rgb(241, 243, 245)"] {
background-color: if(@flavor = latte, @crust, @text) !important;
}
[style*="color: rgb(11, 15, 20)"] {
color: if(@flavor = latte, @text, @crust) !important;
}
/* secondary text */
[style*="rgb(169, 183, 197)"],
[style*="rgb(140, 158, 178)"],
[style*="rgb(84, 110, 138)"],
[style*="rgb(66, 87, 108)"] {
color: @subtext1 !important;
}
// white bottons on the theme/color mode selection in settings
div[style*="background-color: rgb(197, 207, 217)"], // dark
div[style*="background-color: rgb(201, 210, 219)"], // dim
div[style*="background-color: rgb(46, 63, 81)"] // light
{
background-color: @text !important;
> div {
color: @crust !important;
}
}
/* generic blue inline (e.g. link text, etc) */
[style*="color: rgb(16, 131, 254)"], // dark
[style*="color: rgb(32, 139, 254)"] // dim
{
color: @accent !important;
}
/* generic blue inline underline (links) */
[style*="text-decoration-color: rgb(16, 131, 254)"], // dark
[style*="text-decoration-color: rgb(32, 139, 254)"] // dim
{
text-decoration-color: @accent !important;
}
/* generic blue inline bg color (e.g. notification count) */
[style*="background-color: rgb(16, 131, 254)"], // dark
[style*="background-color: rgb(32, 139, 254)"] // dim
{
background-color: @accent !important;
/* notification count contrast fix, also chat message contrast fix (> div) */
&[style*="color: rgb(241, 243, 245)"],
&[style*="color: rgb(255, 255, 255)"],
> div {
color: @crust !important;
}
/* icon color fix */
path[fill="#ffffff"],
path[fill="hsl(211, 20%, 95.3%)"] {
fill: @crust !important;
}
}
/* sending/pending/failed direct message */
[style*="background-color: rgb(1, 64, 132)"] {
background-color: fade(@accent, 30%) !important;
}
/* blue svg inline */
[stroke="hsl(211, 99%, 53%)"],
[stroke="#0085ff"] {
stroke: @accent;
}
[fill="hsl(211, 99%, 53%)"],
[fill="hsl(211, 99%, 56%)"],
[fill="#0085ff"] {
fill: @accent;
}
/* a lot of blue things (buttons etc) */
.r-wzwllv,
div[style*="background-color: rgb(0, 133, 255)"] {
background-color: @accent !important;
/* notification count contrast fix, also chat message contrast fix (> div) */
&[style*="color: rgb(241, 243, 245)"],
> div {
color: @crust !important;
}
}
/* subscribe to labeler button */
button[data-testid="toggleSubscribeBtn"] {
> div {
background-color: @mauve !important;
> div {
color: @crust !important;
}
}
}
/* direct message "failed to send" text */
span[style*="color: rgb(205, 10, 55)"] {
color: @red !important;
}
/* red button text (delete my account) */
[style*="color: rgb(251, 162, 178)"] {
color: @red !important;
}
/* red button (delete, etc) */
button[style*="background-color: rgb(244, 11, 66)"],
// dark, light (same color)
button[style*="background-color: rgb(246, 60, 103)"], // dark (hover)
button[style*="background-color: rgb(245, 41, 88)"], // dim
button[style*="background-color: rgb(247, 84, 122)"], // dim (hover)
button[style*="background-color: rgb(205, 10, 55)"] // light (hover)
{
background-color: @red !important;
&:hover {
background-color: fade(@red, 70%) !important;
}
// text color
> div {
color: @crust !important;
}
}
/* delete account button */
[style^="background-color: rgb(79, 3, 20)"] {
background-color: @red !important;
}
path[fill="#fba2b2"] {
fill: @crust;
}
/* generic background color */
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color: rgb(0, 0, 0)"],
[style*="background-color: rgb(22, 30, 39)"] {
background-color: @base !important;
& when (@flavor = latte) {
/* fix button colors in latte */
[style*="background-color: rgb(0, 0, 0)"] {
background-color: @text !important;
}
}
}
/* secondary background color */
[style*="background-color: rgb(20, 25, 31)"], /* dark? */
[style*="background-color: rgb(20, 27, 35)"], /* dark */
[style*="background-color: rgb(30, 41, 54)"] /* dim */ {
background-color: @mantle !important;
}
/* secondary background color when active (e.g. search bar, hovering some buttons like cancel) */
[style*="background-color: rgb(28, 39, 50)"], // dark
[style*="background-color: rgb(38, 53, 68)"] // dim
{
background-color: @crust !important;
}
/* some sort of tertiary background color with a slight accent */
[style*="background-color: rgb(0, 25, 51)"] {
background-color: fade(@accent, 30%) !important;
}
/* loading circle */
circle[style^="stroke: rgb(25, 118, 210)"] {
stroke: @accent !important;
}
/* wide site: new post button (w text) */
button[style*="background-color: rgb(16, 131, 254)"], // dark
button[style*="background-color: rgb(52, 150, 254)"], // dark (hover)
button[style*="background-color: rgb(32, 139, 254)"], // dim
button[style*="background-color: rgb(76, 162, 254)"] // dim (hover)
{
background-color: @accent !important;
&:hover {
background-color: fade(@accent, 70%) !important;
}
> div {
color: @crust !important;
}
svg > path {
fill: @crust !important;
}
}
/* borders */
.css-175oi2r {
border-color: @surface0 !important;
}
/* fix selected tab bottom border issue caused by selector above */
.css-175oi2r[style*="border-bottom-color: rgb(16, 131, 254)"] {
border-bottom-color: @accent !important;
}
/* fixes the bottom border on tabs (timeline) having a darker color */
.r-oucylx {
border-bottom-color: @base !important;
}
/* current selected tab (acc page) !! KEEP THIS BELOW ABOVE DEFINITION !! */
[style*="border-color: rgb(255, 255, 255)"] {
border-color: @accent !important;
}
/* settings highlight thing */
[style="background-color: rgb(38, 39, 45)"] {
background-color: @crust !important;
}
/* thin site: bluesky text */
.r-yovm8p {
color: @blue;
}
/* empty profile banner */
.r-wuyfte {
background-color: @blue;
}
/* "invalid handle" warning */
[style*="color: rgb(236, 72, 104); border-color: rgb(209, 16, 67)"] {
color: @red !important;
border-color: @red !important;
}
/* end of feed text */
.r-1521r3q {
color: @overlay1;
}
/* mobile side drawer */
[data-testid="drawer"] {
background-color: @base;
}
/* feedback */
.r-m7buhn {
background-color: @blue;
}
/* save, report, post modal button */
[data-testid="sendReportBtn"],
[data-testid="composerPublishBtn"],
[data-testid="editProfileSaveBtn"] {
background: unset !important;
/* "save changes" button in edit profile */
> div[style*="background-image: linear-gradient(94.0544deg, rgb(90, 113, 250), rgb(0, 133, 255))"] {
background: @accent !important;
}
/* fix contrast issues */
> div,
> div > div {
color: @crust !important;
}
}
[data-testid="saveBtn"] {
> div[style*="background-image: linear-gradient"] {
background: unset !important;
background-color: @accent !important;
> div {
color: @crust !important;
}
}
}
// toast notifications (e.g. "copied to clipboard")
.r-17c3jg3:has(> div[dir="auto"]) {
background-color: @crust !important;
.r-jwli3a {
color: @text !important;
}
> svg > path {
fill: @text !important;
}
}
/* draft "Discard" button */
[style^="background-color: rgb(209, 16, 67)"] {
background-color: @red !important;
}
/* the round gradient post button in the bottom right when the page is thinner than usual */
[data-testid="composeFAB"] > div {
background: unset !important;
background-color: @accent !important;
// fix contrast (inner symbol)
.r-jwli3a {
color: @crust !important;
}
}
/* blue text only button (e.g. cancel post button) */
div[style*="color: rgb(52, 150, 254)"],
div[style*="color: rgb(76, 162, 254)"] {
color: @accent !important;
}
/* text color when writing a post */
.ProseMirror,
.ProseMirror-dark {
color: @text;
}
/* some button background color (when hovering) */
[style*="background-color: rgb(0, 44, 91)"],
[style*="background-color: rgb(19, 63, 109)"] {
background-color: fade(@accent, 30%) !important;
}
/* several white buttons */
button[style*="background-color: rgb(255, 255, 255)"] when not(
@flavor = latte
) {
background-color: @text !important;
}
/* the white buttons text */
[style*="color: rgb(0, 0, 0)"] {
color: @crust !important;
}
/* replace dark fill icons with crust ones */
path[fill="#000000"] {
fill: @crust;
}
/* fixes a contrast issue when the suggested follows button is enabled (very ugly selector) */
button[data-testid="suggestedFollowsBtn"][style*="background-color: rgb(255, 255, 255)"]
> svg
> path {
fill: @base !important;
}
/* text inside most buttons */
button > div > div[style~="color: rgb(0, 0, 0)"] {
color: @base !important;
}
/* search bar text */
[role="search"],
[data-testid="confirmCodeInput"] {
--placeholderTextColor: @subtext1 !important;
}
/* search bar icon */
svg[style^="color: rgb(141, 142, 150)"] {
color: @subtext1 !important;
}
/* small icons */
path[fill="#ffffff"],
path[fill="hsl(211, 20%, 95.3%)"] {
fill: @text;
& when (@flavor = latte) {
fill: @base;
}
}
/* more gray small icons (seems to only be the trash can/delete icon) */
path[fill="#8D8E96"] {
fill: @subtext1;
}
/* settings button at the top of the timeline, hashtag button/icon at top of timeline */
path[fill="hsl(211, 24%, 70%)"],
path[fill="hsl(211, 20%, 62.4%)"] {
fill: @subtext1;
}
/* x invite codes available icon */
div[style*="background-color: rgb(191, 225, 255)"],
div[style*="background-color: rgb(1, 37, 97)"] {
background-color: fade(@accent, 30%) !important;
> svg > path[fill="#52acfe"] {
fill: @accent;
}
}
/* likes, reposts and comment counts/buttons under posts, maybe more */
path[fill="hsl(211, 20%, 53%)"],
[style*="color: rgb(111, 134, 159)"] {
color: @subtext1 !important;
fill: @subtext1 !important;
}
/* heart/like */
.r-84gixx,
.r-1i89l9k,
div[style*="color: rgb(236, 72, 153)"],
button[data-testid="toggleLikeBtn"]
> svg:has(path[fill^="hsl(346,"]) // feed like button
{
color: @red !important;
> path {
fill: @red !important;
}
}
/* repost */
.r-5ld2xk,
[style*="color: rgb(69, 237, 159)"] {
color: @green !important;
> path {
fill: @green !important;
}
}
/* tiny people icon on post view ("Everybody can reply") */
path[fill="hsl(211, 24%, 43.6%)"],
/* icon above "you have no lists" */
path[fill="hsl(211, 24%, 34.2%)"] {
fill: @subtext0;
}
/* onboarding: continue/next button */
[data-testid="continueBtn"] {
background-color: @accent !important;
}
[data-testid="continueBtn"] > div > div {
color: @base !important;
}
[data-testid="continueBtn"] > div > svg > path {
fill: @base !important;
}
/* pretty self explanatory, user mentions in the post create modal */
.mention {
color: @accent;
}
/* mentions in the notification tab (highlighted notifications) */
div[style*="background-color: rgb(0, 17, 36)"], // dark
div[style*="background-color: rgb(21, 41, 63)"], // dim
div[style*="background-color: rgb(240, 247, 255)"] // light
{
background-color: fade(@accent, 30%) !important;
.css-175oi2r:not([role="checkbox"] *) {
background-color: transparent !important;
}
}
/* generic blue background color inline (used for buttons in notifications tab) */
button[style*="background-color: rgb(0, 133, 255)"] {
background-color: @accent !important;
}
/* contrast fix for above */
button[style*="background-color: rgb(0, 133, 255)"] > div > div {
color: @base !important;
}
/* other button in notifications tab, inner text */
div[style*="color: rgb(82, 172, 254)"] {
color: @accent !important;
}
/* "No notifications yet!" text in the notifications tab */
div[style*="color: rgb(141, 142, 150)"] {
color: @subtext0 !important;
}
/* login: wrong password highlight */
.r-w7hjet {
background-color: @red;
}
/* please verify your email popup (green checkmark) */
circle[fill="#20BC07"] {
fill: @green;
}
/* toggle circle */
[style*="background-color: rgb(185, 185, 193)"] {
background-color: @overlay2 !important;
}
/* skeletons */
.r-kdyh1x,
.r-cpet4d {
&[style*="background-color: rgb(20, 27, 35);"] {
background-color: @surface0 !important;
}
}
/* thread lines */
div[style*="background-color: rgb(46, 63, 81)"].r-m5arl1 {
background: @surface1 !important;
}
line[stroke="hsl(211, 28%, 24.8%)"][stroke-width="2"] {
stroke: @surface1 !important;
}
circle[fill="hsl(211, 28%, 24.8%)"][r="1.5"] {
fill: @surface1 !important;
}
}
}
/* deno-fmt-ignore */
@catppuccin: {
@latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; };
@frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; };
@macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; };
@mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; };
};