Catppuccin for Bluesky Social
Bluesky Social Catppuccin by BusterBean
Imported and mirrored from https://github.com/catppuccin/userstyles/blob/main/styles/bsky/catppuccin.user.css
Details
AuthorBusterBean
LicenseMIT license
Categorycatppuccin
Created
Updated
Size19 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
https://github.com/catppuccin/userstyles/tree/main/styles/bsky
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Bluesky Social Catppuccin
@namespace github.com/catppuccin/userstyles/styles/bsky
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/bsky
@version 0.0.8
@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') {
@media (prefers-color-scheme: light) {
html.colorMode--system {
#catppuccin(@lightFlavor, @accentColor);
}
}
@media (prefers-color-scheme: dark) {
html.colorMode--system {
#catppuccin(@darkFlavor, @accentColor);
}
}
html.theme--light {
#catppuccin(@lightFlavor, @accentColor);
}
html.theme--dim,
html.theme--dark {
#catppuccin(@darkFlavor, @accentColor);
}
#catppuccin(@lookup, @accent) {
@rosewater: @catppuccin[@@lookup][@rosewater];
@flamingo: @catppuccin[@@lookup][@flamingo];
@pink: @catppuccin[@@lookup][@pink];
@mauve: @catppuccin[@@lookup][@mauve];
@red: @catppuccin[@@lookup][@red];
@maroon: @catppuccin[@@lookup][@maroon];
@peach: @catppuccin[@@lookup][@peach];
@yellow: @catppuccin[@@lookup][@yellow];
@green: @catppuccin[@@lookup][@green];
@teal: @catppuccin[@@lookup][@teal];
@sky: @catppuccin[@@lookup][@sky];
@sapphire: @catppuccin[@@lookup][@sapphire];
@blue: @catppuccin[@@lookup][@blue];
@lavender: @catppuccin[@@lookup][@lavender];
@text: @catppuccin[@@lookup][@text];
@subtext1: @catppuccin[@@lookup][@subtext1];
@subtext0: @catppuccin[@@lookup][@subtext0];
@overlay2: @catppuccin[@@lookup][@overlay2];
@overlay1: @catppuccin[@@lookup][@overlay1];
@overlay0: @catppuccin[@@lookup][@overlay0];
@surface2: @catppuccin[@@lookup][@surface2];
@surface1: @catppuccin[@@lookup][@surface1];
@surface0: @catppuccin[@@lookup][@surface0];
@base: @catppuccin[@@lookup][@base];
@mantle: @catppuccin[@@lookup][@mantle];
@crust: @catppuccin[@@lookup][@crust];
@accent-color: @catppuccin[@@lookup][@@accent];
color-scheme: if(@lookup = latte, light, dark);
// fix general site background - this applies to the <html> element
background-color: @base;
::selection {
background-color: fade(@accent-color, 30%);
}
input,
textarea {
&::placeholder {
color: @subtext0 !important;
}
}
--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: @text !important;
& when (@lookup = latte) {
/* fix button text in latte */
color: @base !important;
}
}
/* some background color of follow button */
[style*="background-color: rgb(241, 243, 245)"] {
background-color: @text !important;
}
[style*="color: rgb(11, 15, 20)"] {
color: if(@lookup = 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-color !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-color !important;
/* notification count contrast fix, also chat message contrast fix (> div) */
&[style*="color: rgb(241, 243, 245)"],
> div {
color: @crust !important;
}
}
/* sending/pending/failed direct message */
[style*="background-color: rgb(1, 64, 132)"] {
background-color: fadeout(@accent-color, 70%) !important;
}
/* blue svg inline */
[stroke="hsl(211, 99%, 53%)"],
[stroke="#0085ff"] {
stroke: @accent-color;
}
[fill="hsl(211, 99%, 53%)"],
[fill="#0085ff"] {
fill: @accent-color;
}
/* a lot of blue things (buttons etc) */
.r-wzwllv,
div[style*="background-color: rgb(0, 133, 255)"] {
background-color: @accent-color !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 (@lookup = 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: fadeout(@accent-color, 70%) !important;
}
/* loading circle */
circle[style^="stroke: rgb(25, 118, 210)"] {
stroke: @accent-color !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-color !important;
&:hover {
background-color: fade(@accent-color, 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-color !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-color !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;
}
...