club.userstyles.alpha.userstyle
Samples
24 randomly sampled records from the AT Protocol firehose
club.userstyles.alpha.userstyle (24 samples)
{
"$type": "club.userstyles.alpha.userstyle",
"title": "Bluesky Social Catppuccin",
"license": "MIT",
"createdAt": "2026-06-27T00:05:28.908Z",
"updatedAt": "2026-06-27T01:56:38.270Z",
"sourceCode": "/* ==UserStyle==\n@name Bluesky Social Catppuccin\n@namespace github.com/catppuccin/userstyles/styles/bsky\n@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/bsky\n@version 2025.10.29\n@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bsky/catppuccin.user.less\n@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Absky\n@description Soothing pastel theme for Bluesky Social\n@author Catppuccin\n@license MIT\n\n@preprocessor less\n@var select lightFlavor \"Light Flavor\" [\"latte:Latte*\", \"frappe:Frappé\", \"macchiato:Macchiato\", \"mocha:Mocha\"]\n@var select darkFlavor \"Dark Flavor\" [\"latte:Latte\", \"frappe:Frappé\", \"macchiato:Macchiato\", \"mocha:Mocha*\"]\n@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\"]\n==/UserStyle== */\n\n@import \"https://userstyles.catppuccin.com/lib/lib.less\";\n\n@-moz-document domain(\"bsky.app\") {\n html.colorMode--system {\n @media (prefers-color-scheme: light) {\n #catppuccin(@lightFlavor);\n }\n @media (prefers-color-scheme: dark) {\n #catppuccin(@darkFlavor);\n }\n }\n\n html.theme--light {\n #catppuccin(@lightFlavor);\n }\n html.theme--dim,\n html.theme--dark {\n #catppuccin(@darkFlavor);\n }\n\n #catppuccin(@flavor) {\n #lib.palette();\n #lib.defaults();\n\n // fix general site background - this applies to the <html> element\n background-color: @base;\n\n --text: @text;\n --background: @base;\n --backgroundLight: @base;\n\n /* generic text */\n [style*=\"color: rgb(255, 255, 255)\"],\n [style*=\"color: rgb(241, 243, 245)\"] //,\n /* [style*=\"color: rgb(11, 15, 20)\"] this breas on dark */ {\n color: if(@flavor = latte, @base, @text) !important;\n }\n\n /* some background color of follow button + hover */\n [style*=\"background-color: rgb(241, 243, 245)\"] {\n background-color: if(@flavor = latte, @crust, @text) !important;\n }\n\n [style*=\"color: rgb(11, 15, 20)\"] {\n color: if(@flavor = latte, @text, @crust) !important;\n }\n\n /* secondary text [contrast_700] */\n [style*=\"rgb(165, 178, 197)\"], // dark\n [style*=\"rgb(171, 184, 201)\"], // dim\n [style*=\"rgb(84, 110, 138)\"],\n [style*=\"rgb(66, 87, 108)\"] {\n color: @subtext1 !important;\n }\n\n // white bottons on the theme/color mode selection in settings\n div[style*=\"background-color: rgb(197, 207, 217)\"], // dark\n div[style*=\"background-color: rgb(201, 210, 219)\"], // dim\n div[style*=\"background-color: rgb(46, 63, 81)\"] // light\n {\n background-color: @text !important;\n > div {\n color: @crust !important;\n }\n }\n\n /* generic blue inline (e.g. link text, etc) [primary_500] */\n [style*=\"color: rgb(0, 106, 255)\"], // dark\n [style*=\"color: rgb(15, 115, 255)\"] // dim\n {\n color: @accent !important;\n }\n /* generic blue inline underline (links) [primary_500] */\n [style*=\"text-decoration-color: rgb(0, 106, 255)\"], // dark\n [style*=\"text-decoration-color: rgb(15, 115, 255)\"] // dim\n {\n text-decoration-color: @accent !important;\n }\n\n /* generic blue inline bg color (e.g. notification count) [primary_500] */\n [style*=\"background-color: rgb(0, 106, 255)\"], // dark\n [style*=\"background-color: rgb(15, 115, 255)\"] // dim\n {\n background-color: @accent !important;\n\n /* notification count contrast fix, also chat message contrast fix (> div) */\n &[style*=\"color: rgb(241, 243, 245)\"],\n &[style*=\"color: rgb(255, 255, 255)\"],\n > div {\n color: @crust !important;\n }\n\n /* icon color fix */\n path[fill=\"#ffffff\"],\n path[fill=\"hsl(211, 20%, 95.3%)\"] {\n fill: @crust !important;\n }\n }\n\n /* sending/pending/failed direct message */\n [style*=\"background-color: rgb(1, 64, 132)\"] {\n background-color: fade(@accent, 30%) !important;\n }\n\n /* a lot of blue things (buttons etc) */\n .r-wzwllv,\n div[style*=\"background-color: rgb(0, 133, 255)\"] {\n background-color: @accent !important;\n\n /* notification count contrast fix, also chat message contrast fix (> div) */\n &[style*=\"color: rgb(241, 243, 245)\"],\n > div {\n color: @crust !important;\n }\n }\n\n /* subscribe to labeler button */\n button[data-testid=\"toggleSubscribeBtn\"] {\n > div {\n background-color: @mauve !important;\n > div {\n color: @crust !important;\n }\n }\n }\n\n /* direct message \"failed to send\" text */\n span[style*=\"color: rgb(205, 10, 55)\"] {\n color: @red !important;\n }\n\n /* red button text (delete my account) [negative_500] */\n [style*=\"color: rgb(233, 22, 70)\"], // dark\n [style*=\"color: rgb(235, 36, 82)\"] // dim\n {\n color: @red !important;\n }\n\n /* red button (delete, etc) */\n button[style*=\"background-color: rgb(244, 11, 66)\"],\n // dark, light (same color)\n button[style*=\"background-color: rgb(246, 60, 103)\"], // dark (hover)\n button[style*=\"background-color: rgb(245, 41, 88)\"], // dim\n button[style*=\"background-color: rgb(247, 84, 122)\"], // dim (hover)\n button[style*=\"background-color: rgb(205, 10, 55)\"] // light (hover)\n {\n background-color: @red !important;\n &:hover {\n background-color: fade(@red, 70%) !important;\n }\n // text color\n > div {\n color: @crust !important;\n }\n }\n\n /* delete account button */\n [style^=\"background-color: rgb(79, 3, 20)\"] {\n background-color: @red !important;\n }\n path[fill=\"#fba2b2\"] {\n fill: @crust;\n }\n\n /* generic background color */\n [style*=\"background-color: rgb(255, 255, 255)\"],\n [style*=\"background-color: rgb(0, 0, 0)\"],\n [style*=\"background-color: rgb(21, 29, 40)\"] // dim\n {\n background-color: @base !important;\n\n & when (@flavor = latte) {\n /* fix button colors in latte */\n [style*=\"background-color: rgb(0, 0, 0)\"] {\n background-color: @text !important;\n }\n }\n }\n\n /* secondary background color + sidebar button hover [contrast_25] */\n [style*=\"background-color: rgb(17, 24, 34)\"], // dark\n [style*=\"background-color: rgb(28, 39, 54)\"] // dim\n {\n background-color: @mantle !important;\n }\n\n /* secondary background color (when active?) (e.g. search bar, hovering some buttons like cancel) */\n [style*=\"background-color: rgb(25, 34, 46)\"], // dark\n [style*=\"background-color: rgb(34, 46, 63)\"] // dim\n {\n background-color: @crust !important;\n }\n\n /* some sort of tertiary background color with a slight accent */\n [style*=\"background-color: rgb(0, 25, 51)\"] {\n background-color: fade(@accent, 30%) !important;\n }\n\n /* loading circle */\n circle[style^=\"stroke: rgb(25, 118, 210)\"] {\n stroke: @accent !important;\n }\n\n /* wide site: new post button (w text) */\n button[style*=\"background-color: rgb(0, 106, 255)\"], // dark\n button[style*=\"background-color: rgb(66, 145, 255)\"], // dark (hover)\n button[style*=\"background-color: rgb(15, 115, 255)\"], // dim\n button[style*=\"background-color: rgb(77, 151, 255)\"] // dim (hover)\n {\n background-color: @accent !important;\n &:hover {\n background-color: fade(@accent, 70%) !important;\n }\n\n > div {\n color: @crust !important;\n }\n svg > path {\n fill: @crust !important;\n }\n }\n\n /* borders */\n .css-175oi2r {\n border-color: @surface0 !important;\n }\n\n /* fix selected tab bottom border issue caused by selector above */\n .css-175oi2r[style*=\"border-bottom-color: rgb(0, 106, 255)\"] {\n border-bottom-color: @accent !important;\n }\n\n /* fixes the bottom border on tabs (timeline) having a darker color */\n .r-oucylx {\n border-bottom-color: @base !important;\n }\n\n /* current selected tab (acc page) !! KEEP THIS BELOW ABOVE DEFINITION !! */\n [style*=\"border-color: rgb(255, 255, 255)\"] {\n border-color: @accent !important;\n }\n\n /* settings highlight thing */\n [style=\"background-color: rgb(38, 39, 45)\"] {\n background-color: @crust !important;\n }\n\n /* thin site: bluesky text */\n .r-yovm8p {\n color: @blue;\n }\n\n /* empty profile banner */\n .r-wuyfte {\n background-color: @blue;\n }\n\n /* \"invalid handle\" warning */\n [style*=\"color: rgb(236, 72, 104); border-color: rgb(209, 16, 67)\"] {\n color: @red !important;\n border-color: @red !important;\n }\n\n /* end of feed text */\n .r-1521r3q {\n color: @overlay1;\n }\n\n /* mobile side drawer */\n [data-testid=\"drawer\"] {\n background-color: @base;\n }\n\n /* feedback */\n .r-m7buhn {\n background-color: @blue;\n }\n\n /* save, report, post modal button */\n [data-testid=\"sendReportBtn\"],\n [data-testid=\"composerPublishBtn\"],\n [data-testid=\"editProfileSaveBtn\"] {\n background: unset !important;\n\n /* \"save changes\" button in edit profile */\n > div[style*=\"background-image: linear-gradient(94.0544deg, rgb(90, 113, 250), rgb(0, 133, 255))\"] {\n background: @accent !important;\n }\n\n /* fix contrast issues */\n > div,\n > div > div {\n color: @crust !important;\n }\n }\n\n [data-testid=\"saveBtn\"] {\n > div[style*=\"background-image: linear-gradient\"] {\n background: unset !important;\n background-color: @accent !important;\n > div {\n color: @crust !important;\n }\n }\n }\n\n // toast notifications (e.g. \"copied to clipboard\")\n .r-17c3jg3:has(> div[dir=\"auto\"]) {\n background-color: @crust !important;\n\n .r-jwli3a {\n color: @text !important;\n }\n > svg > path {\n fill: @text !important;\n }\n }\n\n /* draft \"Discard\" button */\n [style^=\"background-color: rgb(209, 16, 67)\"] {\n background-color: @red !important;\n }\n\n /* Discard draft modal border, bunch of other borders around the app [contrast_100] */\n [style*=\"border-color: rgb(35, 46, 62)\"], // dark\n [style*=\"border-color: rgb(44, 58, 78)\"] // dim\n {\n border-color: @surface2 !important;\n }\n\n /* the round gradient post button in the bottom right when the page is thinner than usual */\n [data-testid=\"composeFAB\"] > div {\n background: unset !important;\n background-color: @accent !important;\n\n // fix contrast (inner symbol)\n .r-jwli3a {\n color: @crust !important;\n }\n }\n\n /* blue text only button (e.g. cancel post button) */\n div[style*=\"color: rgb(66, 145, 255)\"], // dark\n div[style*=\"color: rgb(77, 151, 255)\"], // dim\n div[style*=\"color: rgb(0, 89, 214)\"] // latte !! this overlaps with dark. might break?\n {\n color: @accent !important;\n }\n\n /* text color when writing a post */\n .ProseMirror,\n .ProseMirror-dark {\n color: @text;\n }\n\n /* some button background color (when hovering) [primary_100] */\n [style*=\"background-color: rgb(0, 40, 97)\"], // dark\n [style*=\"background-color: rgb(18, 52, 100)\"], // dim\n [style*=\"background-color: rgb(204, 225, 255)\"], // latte\n /* add alt text modal */\n [style*=\"background-color: rgb(14, 73, 137)\"] {\n background-color: fade(@accent, 30%) !important;\n }\n\n /* several white buttons */\n button[style*=\"background-color: rgb(255, 255, 255)\"] when not(\n @flavor = latte\n ) {\n background-color: @text !important;\n }\n\n /* the white buttons text */\n [style*=\"color: rgb(0, 0, 0)\"] {\n color: if(@flavor = latte, @text, @crust) !important;\n }\n\n /* replace dark fill icons with crust ones */\n path[fill=\"#000000\"] {\n fill: if(@flavor = latte, @text, @crust);\n }\n\n /* fixes a contrast issue when the suggested follows button is enabled (very ugly selector) */\n button[data-testid=\"suggestedFollowsBtn\"][style*=\"background-color: rgb(255, 255, 255)\"]\n > svg\n > path {\n fill: @base !important;\n }\n\n /* text inside most buttons */\n button > div > div[style~=\"color: rgb(0, 0, 0)\"] {\n color: @base !important;\n }\n\n /* search bar text */\n [role=\"search\"],\n [data-testid=\"confirmCodeInput\"] {\n --placeholderTextColor: @subtext1 !important;\n }\n\n /* search bar icon (this doesn't actually apply because path fill. keeping anyways) [contrast_500] */\n svg[style^=\"color: rgb(102, 123, 153\"], // dark\n svg[style^=\"color: rgb(111, 131, 159)\"] // dim\n {\n color: @subtext1 !important;\n }\n\n /* small icons */\n path[fill=\"#FFFFFF\"] {\n fill: @text;\n\n & when (@flavor = latte) {\n fill: @base;\n }\n }\n\n /* more gray small icons (e.g. search bar icon, icons below posts [contrast_500] */\n path[fill=\"#667B99\"], // dark\n path[fill=\"#6F839F\"], // dim\n [style*=\"color: rgb(111, 131, 159)\"], // dark\n [style*=\"color: rgb(111, 131, 159)\"] // dim\n {\n color: @subtext1 !important;\n fill: @subtext1 !important;\n }\n /* settings button at the top of the timeline, hashtag button/icon at top of timeline [contrast_600] */\n path[fill=\"#8798B0\"], // dark\n path[fill=\"#8D9DB4\"] // dim\n {\n fill: @subtext1;\n }\n\n /* x invite codes available icon */\n div[style*=\"background-color: rgb(191, 225, 255)\"],\n div[style*=\"background-color: rgb(1, 37, 97)\"] {\n background-color: fade(@accent, 30%) !important;\n > svg > path[fill=\"#52acfe\"] {\n fill: @accent;\n }\n }\n\n /* heart/like */\n .r-84gixx,\n .r-1i89l9k,\n div[style*=\"color: rgb(236, 72, 153)\"],\n button[data-testid=\"toggleLikeBtn\"]\n > svg:has(path[fill^=\"hsl(346,\"]) // feed like button\n {\n color: @red !important;\n > path {\n fill: @red !important;\n }\n }\n\n /* repost */\n .r-5ld2xk,\n [style*=\"color: rgb(92, 239, 170)\"] {\n color: @green !important;\n > path {\n fill: @green !important;\n }\n }\n\n /* saved icon on post + trending icon */\n path[fill=\"#006AFF\"], // dark\n path[fill=\"#0F73FF\"] // dim\n {\n fill: @accent;\n }\n\n /* tiny people icon on post view (\"Everybody can reply\") */\n path[fill=\"hsl(211, 24%, 43.6%)\"],\n /* icon above \"you have no lists\" */\n path[fill=\"hsl(211, 24%, 34.2%)\"] {\n fill: @subtext0;\n }\n\n /* onboarding: continue/next button */\n [data-testid=\"continueBtn\"] {\n background-color: @accent !important;\n }\n [data-testid=\"continueBtn\"] > div > div {\n color: @base !important;\n }\n [data-testid=\"continueBtn\"] > div > svg > path {\n fill: @base !important;\n }\n\n /* pretty self explanatory, user mentions in the post create modal */\n .mention {\n color: @accent;\n }\n\n /* mentions in the notification tab (highlighted notifications) */\n div[style*=\"background-color: rgb(0, 17, 36)\"], // dark\n div[style*=\"background-color: rgb(21, 41, 63)\"], // dim\n div[style*=\"background-color: rgb(240, 247, 255)\"], // light\n a[style*=\"background-color: rgb(0, 17, 36)\"], // dark\n a[style*=\"background-color: rgb(21, 41, 63)\"], // dim\n a[style*=\"background-color: rgb(240, 247, 255)\"] // light\n {\n background-color: fade(@accent, 30%) !important;\n .css-175oi2r:not([role=\"checkbox\"] *) {\n background-color: transparent !important;\n }\n }\n\n /* generic blue background color inline (used for buttons in notifications tab) */\n button[style*=\"background-color: rgb(0, 133, 255)\"] {\n background-color: @accent !important;\n }\n /* contrast fix for above */\n button[style*=\"background-color: rgb(0, 133, 255)\"] > div > div {\n color: @base !important;\n }\n\n /* miscellaneous lines around the app [contrast_200] */\n [style*=\"border-color: rgb(49, 63, 84)\"], // dark\n [style*=\"border-color: rgb(57, 73, 96)\"] // dim\n {\n border-color: @surface1 !important;\n }\n\n /* other button in notifications tab, inner text */\n div[style*=\"color: rgb(82, 172, 254)\"] {\n color: @accent !important;\n }\n\n /* \"No notifications yet!\" text in the notifications tab */\n div[style*=\"color: rgb(141, 142, 150)\"] {\n color: @subtext0 !important;\n }\n\n /* login: wrong password highlight */\n .r-w7hjet {\n background-color: @red;\n }\n\n /* please verify your email popup (green checkmark) */\n circle[fill=\"#20BC07\"] {\n fill: @green;\n }\n\n /* toggle circle */\n [style*=\"background-color: rgb(185, 185, 193)\"] {\n background-color: @overlay2 !important;\n }\n\n /* skeletons */\n .r-kdyh1x,\n .r-cpet4d {\n &[style*=\"background-color: rgb(20, 27, 35);\"] {\n background-color: @surface0 !important;\n }\n }\n\n /* thread lines */\n div[style*=\"background-color: rgb(35, 46, 62)\"].r-m5arl1 {\n background: @surface1 !important;\n }\n\n /* character limit progress circle [primary_500] */\n path[stroke=\"#006AFF\"], // dark\n path[stroke=\"#0F73FF\"], // dim\n path[stroke=\"#006AFF\"] // light\n {\n stroke: @accent !important;\n }\n\n /* bg circle [contrast_100] */\n path[stroke=\"#232E3E\"], // dark\n path[stroke=\"#2C3A4E\"], // dim\n path[stroke=\"#DCE2EA\"] // light\n {\n stroke: @surface1 !important;\n }\n\n /* load new posts button (border: [contrast_100]; bg: [primary_50]) */\n button[style*=\"border-color: rgb(35, 46, 62); background-color: rgb(0, 30, 71)\"],\n // dark\n button[style*=\"border-color: rgb(44, 58, 78); background-color: rgb(18, 41, 73)\"],\n // dim\n button[style*=\"border-color: rgb(220, 226, 234); background-color: rgb(229, 240, 255)\"] // light\n {\n background-color: @surface0 !important;\n border-color: @overlay0 !important;\n }\n\n /* any button that's disabled (we should start using broader overrides) */\n button[disabled] > svg > path {\n fill: @overlay0;\n }\n\n /* sitewide text inputs */\n /* the divs are styled separately from the input areas */\n div[style*=\"border-color: rgb(46, 64, 82)\"] {\n border-color: @surface1 !important;\n }\n /* search bar [primary_500] */\n div[style*=\"border-color: rgb(0, 106, 255)\"], // dark\n div[style*=\"border-color: rgb(15, 115, 255)\"] // dim\n {\n border-color: @accent !important;\n }\n\n /* image preview borders across app */\n [style*=\"border-color: rgb(74, 97, 121)\"] {\n border-color: @surface2 !important;\n }\n\n /* search tab trending buttons */\n [style*=\"background-color: rgb(142, 9, 40)\"] {\n background-color: @red !important;\n\n div {\n color: @crust !important;\n }\n\n svg > path {\n fill: @crust;\n }\n }\n /* TODO: new which is green but I can't get the right class cause nothing on bsky is a new trending topic atm */\n\n /* round icon backgrounds (e.g. feeds) */\n div[style*=\"background-color: rgb(21, 52, 85)\"] {\n background-color: @surface0 !important;\n }\n\n /* pill toggle button styles (e.g. account activity notifications) */\n /* active, hover */\n div[style*=\"border-color: rgb(76, 162, 254);\"] {\n border-color: @accent !important;\n }\n div[style*=\"background-color: rgb(18, 52, 100)\"] {\n background-color: fade(@accent, 40%) !important;\n }\n /* inactive, circle in pill */\n div[style*=\"background-color: rgb(91, 119, 149)\"] {\n background-color: @surface2 !important;\n }\n /* inactive, hover */\n div[style*=\"border-color: rgb(120, 142, 165)\"] {\n border-color: @overlay1 !important;\n }\n }\n}",
"description": "Soothing pastel theme for Bluesky Social",
"homepageUrl": "https://github.com/catppuccin/userstyles/tree/main/styles/bsky",
"upstreamUrl": "https://github.com/catppuccin/userstyles/raw/main/styles/bsky/catppuccin.user.less",
"stripUpdateUrl": true
}did:plc:rkm6m4dsc4da2yzdlvxorhf3 | at://did:plc:rkm6m4dsc4da2yzdlvxorhf3/club.userstyles.alpha.userstyle/3mpa5xvhzxp2q