Userstyle for Bluesky that makes it look like Pleroma / Akkoma
(support for existing pleroma themes is in development)
Pleroma Themes for Bluesky (indev) by Whey
Details
AuthorWhey
LicenseMIT
Categorybsky.app
Created
Updated
Size77 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This userstyle is currently under development
Further theming for the main column/timeline is on hold as I’m waiting for the next Bluesky update, which is expected to break the current CSS changes to the timeline
The goal of this project is to have full compatibility with existing Pleroma themes
currently this userstyle has partial support for custom Pleroma themes
theres currently two methods of applying a custom theme:
- Copy the CSS variables from https://plthemes.vulpes.one/ into a new userstyle.
- Copy the exported theme JSON into the this converter https://pleromathemeconverter-18irmd91d.pages.dev/ and use the output CSS as a new userstyle.
for 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 Pleroma Themes for Bluesky
@namespace github.com/openstyles/stylus
@version 0.3.12
@description userstyle for bluesky that makes it look like Pleroma/Akkoma
@author Whey!
@preprocessor less
@var text username "Custom Username; include \"quotes\"" "\" \""
==/UserStyle== */
@-moz-document url-prefix("https://bsky.app"),
url-prefix("https://main.bsky.dev"),
url-prefix("https://social-app-pr-") {
/* TODOS
- [ ] Slow Network Placeholders
- [ ] Fix post colors when in thread viewing mode
- [x] Prepare for new bsky headers
- [ ] Refactor global color replacement to be more performant
- [ ] Mass Pleroma-ification of all layouts
- [ ] Fix remaining screens with wrong backgrounds
- [ ] Better resource to explain how to apply custom styles
- [ ] Fix post controls colors on hover
*/
/* css vars */
&{
/* userstyle configs using less syntax */
:root{
--username: @username;
}
/*
@var text custombgimg "Custom background; include url('')" "uri('')"
.mixin(@value) when not(@value = 'url(https://)') {
:root {
--background: @value;
}
}
.mixin(@value) when (@value = 'url(https://)') {
:root {
--background: var(--pltc-background);
}
}
.mixin(@custombgimg);*/
/*from birdified*/
&{
/* color defs */
:root {
--color-twitter-grey: rgb(113, 118, 123);
--whiteish: #0f1419;
}
/*light mode*/
.r-14lw9ot,
.colorMode--light {
--color-twitter-grey: rgb(83, 100, 113);
--whiteish: #0f1419;
}
/*birdified end*/
}
/* copied from akkoma dark */
:root {
--btnRadius: var(--plt-btnRadius, 3px);
--inputRadius: var(--plt-inputRadius, 3px);
--checkboxRadius: var(--plt-checkboxRadius, 2px);
--panelRadius: var(--plt-panelRadius, 3px);
--avatarRadius: var(--plt-avatarRadius, 3px);
--avatarAltRadius: var(--plt-avatarAltRadius, 50px);
--tooltipRadius: var(--plt-tooltipRadius, 2px);
--attachmentRadius: var(--plt-attachmentRadius, 3px);
--underlay: var(--plt-underlay, rgba(9, 14, 20, 0));
--bg: var(--plt-bg, rgba(15, 22, 30, 0.9));
--fg: var(--plt-fg, rgba(21, 30, 43, 1));
--cRed: var(--plt-cRed, rgba(211, 16, 20, 1));
--cGreen: var(--plt-cGreen, rgba(93, 201, 74, 1));
--cOrange: var(--plt-cOrange, rgba(255, 196, 89, 1));
--cBlue: var(--plt-cBlue, rgba(129, 190, 234, 1));
--accent: var(--plt-accent, rgba(226, 177, 136, 1));
--link: var(--plt-link, rgba(226, 177, 136, 1));
--text: var(--plt-text, rgba(185, 185, 186, 1)) !important;
--badgeNotification: var(--plt-badgeNotification, rgba(225, 89, 50, 1));
--badgeNotificationText: var(--plt-badgeNotificationText, rgba(255, 255, 255, 1));
--alertNeutral: var(--plt-alertNeutral, rgba(185, 185, 186, 0.5));
--alertNeutralText: var(--plt-alertNeutralText, rgba(255, 255, 255, 1));
--alertPopupNeutral: var(--plt-alertPopupNeutral, rgba(185, 185, 186, 0.95));
--alertPopupNeutralText: var(--plt-alertPopupNeutralText, rgba(0, 0, 0, 1));
--alertSuccess: var(--plt-alertSuccess, rgba(93, 201, 74, 0.5));
--alertSuccessText: var(--plt-alertSuccessText, rgba(255, 255, 255, 1));
--alertPopupSuccess: var(--plt-alertPopupSuccess, rgba(93, 201, 74, 0.95));
--alertPopupSuccessText: var(--plt-alertPopupSuccessText, rgba(0, 0, 0, 1));
--alertWarning: var(--plt-alertWarning, rgba(255, 196, 89, 0.5));
--alertWarningText: var(--plt-alertWarningText, rgba(255, 255, 255, 1));
--alertPopupWarning: var(--plt-alertPopupWarning, rgba(255, 196, 89, 0.95));
--alertPopupWarningText: var(--plt-alertPopupWarningText, rgba(0, 0, 0, 1));
--alertError: var(--plt-alertError, rgba(211, 16, 20, 0.5));
--alertErrorText: var(--plt-alertErrorText, rgba(239, 239, 239, 1));
--alertPopupError: var(--plt-alertPopupError, rgba(211, 16, 20, 0.95));
--alertPopupErrorText: var(--plt-alertPopupErrorText, rgba(239, 239, 239, 1));
--panel: var(--plt-panel, rgba(21, 30, 43, 1));
--panelText: var(--plt-panelText, rgba(185, 185, 186, 1));
--alertNeutralPanelText: var(--plt-alertNeutralPanelText, rgba(255, 255, 255, 1));
--alertSuccessPanelText: var(--plt-alertSuccessPanelText, rgba(255, 255, 255, 1));
--alertWarningPanelText: var(--plt-alertWarningPanelText, rgba(255, 255, 255, 1));
--alertErrorPanelText: var(--plt-alertErrorPanelText, rgba(185, 185, 186, 1));
--fgText: var(--plt-fgText, rgba(185, 185, 186, 1));
--topBar: var(--plt-topBar, rgba(21, 30, 43, 1));
--topBarText: var(--plt-topBarText, rgba(159, 159, 161, 1));
--input: var(--plt-input, rgba(21, 30, 43, 0.5));
--inputTopbarText: var(--plt-inputTopbarText, rgba(159, 159, 161, 1));
--inputPanelText: var(--plt-inputPanelText, rgba(185, 185, 186, 1));
--inputText: var(--plt-inputText, rgba(185, 185, 186, 1));
--btn: var(--plt-btn, rgba(21, 30, 43, 1));
--btnText: var(--plt-btnText, rgba(185, 185, 186, 1));
--btnTopBarText: var(--plt-btnTopBarText, rgba(185, 185, 186, 1));
--btnDisabled: var(--plt-btnDisabled, rgba(16, 24, 33, 1));
--btnDisabledTopBarText: var(--plt-btnDisabledTopBarText, rgba(58, 64, 71, 1));
--btnPanelText: var(--plt-btnPanelText, rgba(185, 185, 186, 1));
--btnDisabledPanelText: var(--plt-btnDisabledPanelText, rgba(58, 64, 71, 1));
--btnDisabledText: var(--plt-btnDisabledText, rgba(58, 64, 71, 1));
--btnToggled: var(--plt-btnToggled, rgba(191, 112, 46, 1));
--btnToggledTopBarText: var(--plt-btnToggledTopBarText, rgba(0, 0, 0, 1));
--btnToggledPanelText: var(--plt-btnToggledPanelText, rgba(0, 0, 0, 1));
--btnToggledText: var(--plt-btnToggledText, rgba(0, 0, 0, 1));
--btnPressed: var(--plt-btnPressed, rgba(21, 30, 43, 1));
--btnPressedTopBarText: var(--plt-btnPressedTopBarText, rgba(185, 185, 186, 1));
--btnPressedTopBar: var(--plt-btnPressedTopBar, rgba(21, 30, 43, 1));
--btnPressedPanelText: var(--plt-btnPressedPanelText, rgba(185, 185, 186, 1));
--btnPressedPanel: var(--plt-btnPressedPanel, rgba(21, 30, 43, 1));
--btnPressedText: var(--plt-btnPressedText, rgba(185, 185, 186, 1));
--tabActiveText: var(--plt-tabActiveText, rgba(185, 185, 186, 1));
--tabText: var(--plt-tabText, rgba(185, 185, 186, 1));
--tab: var(--plt-tab, rgba(21, 30, 43, 1));
--fgLink: var(--plt-fgLink, rgba(226, 177, 136, 1));
--topBarLink: var(--plt-topBarLink, rgba(159, 159, 161, 1));
--panelLink: var(--plt-panelLink, rgba(226, 177, 136, 1));
--panelFaint: var(--plt-panelFaint, rgba(185, 185, 186, 0.5));
--icon: var(--plt-icon, rgba(100, 103, 108, 0.9));
--poll: var(--plt-poll, rgba(99, 84, 72, 1));
--pollText: var(--plt-pollText, rgba(255, 255, 255, 1));
--border: var(--plt-border, rgba(26, 37, 53, 1));
--postCyantext: var(--plt-postCyantext, rgba(129, 190, 234, 1));
--postGreentext: var(--plt-postGreentext, rgba(93, 201, 74, 1));
--postLink: var(--plt-postLink, rgba(226, 177, 136, 1));
--lightText: var(--plt-lightText, rgba(236, 236, 236, 1));
--popover: var(--plt-popover, rgba(15, 22, 30, 1));
--selectedMenuPopover: var(--plt-selectedMenuPopover, rgba(23, 34, 46, 1));
--highlight: var(--plt-highlight, rgba(23, 34, 46, 0.9));
--highlightText: var(--plt-highlightText, rgba(185, 185, 186, 1));
--selectedMenu: var(--plt-selectedMenu, rgba(23, 34, 46, 0.9));
--selectedMenuText: var(--plt-selectedMenuText, rgba(185, 185, 186, 1));
--selectedMenuPopoverIcon: var(--plt-selectedMenuPopoverIcon, rgba(104, 109, 116, 1));
--highlightLink: var(--plt-highlightLink, rgba(226, 177, 136, 1));
--selectedMenuLink: var(--plt-selectedMenuLink, rgba(226, 177, 136, 1));
--selectedMenuPopoverLink: var(--plt-selectedMenuPopoverLink, rgba(226, 177, 136, 1));
--selectedMenuPopoverText: var(--plt-selectedMenuPopoverText, rgba(185, 185, 186, 1));
--faintLink: var(--plt-faintLink, rgba(226, 177, 136, 0.5));
--highlightFaintLink: var(--plt-highlightFaintLink, rgba(226, 177, 136, 0.5));
--selectedMenuFaintLink: var(--plt-selectedMenuFaintLink, rgba(226, 177, 136, 1));
--selectedMenuPopoverFaintLink: var(--plt-selectedMenuPopoverFaintLink, rgba(226, 177, 136, 1));
--faint: var(--plt-faint, rgba(185, 185, 186, 0.5));
--highlightFaintText: var(--plt-highlightFaintText, rgba(185, 185, 186, 0.5));
--selectedMenuFaintText: var(--plt-selectedMenuFaintText, rgba(185, 185, 186, 1));
--selectedMenuPopoverFaintText: var(--plt-selectedMenuPopoverFaintText, rgba(185, 185, 186, 1));
--highlightLightText: var(--plt-highlightLightText, rgba(236, 236, 236, 1));
--selectedMenuLightText: var(--plt-selectedMenuLightText, rgba(236, 236, 236, 1));
--selectedMenuPopoverLightText: var(--plt-selectedMenuPopoverLightText, rgba(236, 236, 236, 1));
--selectedMenuIcon: var...