bluesky theme for UserStyles.world
Magenta/Red Color with a touch of space void. Original theme "FIRMAMENT" by https://bsky.app/profile/haraiva.bsky.app
Star_Blood by astrids-vault
Details
Authorastrids-vault
LicenseNo License
Categoryhttps://bsky.app/
Created
Updated
Size42 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
fir·ma·ment
the heavens or the sky, especially when regarded as a tangible thing.
"thunder shakes the firmament"
star
/stär/
+
blood
/bləd/
when a star bleeds, its oceans fills the plains of the edge. It brews and ferments to create a bridge through the fabric of spacetime
"mother star bleeds and births a new life and death cycle"
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
ORIGINAL BASE >
@name Firmament
@namespace https://bsky.app/profile/haraiva.bsky.app
COLOR REMIX FEB 9 2025
Star_Blood BY
@WOLFBRAINZZZ
https://bsky.app/profile/wolfbrainzzz.bsky.social
@version 0.3.4
@description a customisable theme for Bluesky Social by @haraiva.bsky.social based on @fenny.zone's "Better Bluesky" userstyle.
@license MIT
@match *://*.bsky.app/*
@var select tweak-option-use-title "Use Custom Title" {
"yes:Yes": "none",
"no:No": "0px"
}
@var text tweak-option-title "Custom Title (in quotes)" "'🌙'"
@var text tweak-option-font "Font Family (in quotes)" "'InterVariable'"
@var number tweak-option-line-height "Line Height" [1.3, null, null, 0.05]
@var select tweak-option-text-transform "Text Transform" {
"none:None": "revert",
"lowercase:lowercase": "lowercase",
"uppercase:UPPERCASE": "uppercase"
}
@var select tweak-option-disable-outlines "Disable Focus Outlines (select No if you use keyboard navigation)" {
"yes:Yes": "none",
"no:No": "1px auto"
}
// 🎨 COLOUR PALETTE: fairy forest
@var color tweak-option-accent "Accent" #5f8e76
@var color tweak-option-bg "Light Mode Background" #e6ded4
@var color tweak-option-text "Light Mode Text Color" #2f2b27
@var color tweak-option-bg-dark "Dark Mode Background" #000f10
@var color tweak-option-text-dark "Dark Mode Text Color" #e9daca
}"
==/UserStyle== */
@-moz-document domain("bsky.app") {
/* 🚨📲🚨 if you're using Userscripts for iOS, delete the @-moz-document line
above, and the closing "}" at the very bottom of the file.
Then uncomment the block below and replace the values with your options.
When the theme updates, just remove the @-moz-document lines again, and copy
your customized options block into the new version. */
/* uncomment this block for Safari -- these are your tweaks */
/*
:root {
--tweak-option-use-title: none;
--tweak-option-title: '🌙';
--tweak-option-font: 'InterVariable';
--tweak-option-line-height: 1.3;
--tweak-option-text-transform: revert;
--tweak-option-disable-outlines: none;
--tweak-option-accent: #5f8e76;
--tweak-option-bg: #e6ded4;
--tweak-option-text: #2f2b27;
--tweak-option-bg-dark: #000f10;
--tweak-option-text-dark: #e9daca;
}
*/
/*
Section headings (search for the emoji to jump to them quickly!)
🔘 CONTROLS
📱 UI
🏠 FEED
💬 POSTS
🖱️ CONTEXT MENUS
🪟 MODALS
📝 POST COMPOSER
🖼️ IMAGES
🔍 SEARCH & MY FEEDS
📋 LISTS
🔔 NOTIFICATIONS
👤 PROFILE
🛠️ MODERATION/SETTINGS
*/
:root {
--tweak-accent: var(--tweak-option-accent);
--tweak-bg: var(--tweak-option-bg);
--tweak-fg: var(--tweak-option-text);
--tweak-bg-secondary: color-mix(in srgb, var(--tweak-bg) 90%, black);
--tweak-bg-tertiary: color-mix(in srgb, var(--tweak-bg) 75%, black);
--tweak-bg-translucent: color-mix(in srgb, var(--tweak-bg) 75%, transparent);
--tweak-fg-translucent: color-mix(in srgb, var(--tweak-fg) 65%, transparent);
--tweak-fg-more-translucent: color-mix(in srgb, var(--tweak-fg) 25%, transparent);
--tweak-accent-translucent: color-mix(in srgb, var(--tweak-accent) 50%, transparent);
--tweak-accent-more-translucent: color-mix(in srgb, var(--tweak-accent) 25%, transparent);
--tweak-radius: 14px;
--tweak-blur: blur(30px);
--tweak-shadow: rgba(0, 0, 0, 0.3) 0px 5px 20px;
--background: var(--tweak-bg) !important;
--backgroundLight: var(--tweak-bg) !important;
--text: var(--tweak-fg) !important;
}
/* override inline light mode colors */
@media (not (prefers-color-scheme: dark)) {
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color: rgb(246, 247, 249)"] {
background-color: var(--tweak-bg) !important;
}
[style*="background-color: rgb(226, 231, 236)"],
[style*="background-color: rgb(240, 242, 245)"],
[style*="background-color: rgb(241, 243, 245)"],
[style*="background-color: rgb(243, 243, 248)"] {
background-color: var(--tweak-bg-secondary) !important;
}
[style*="color: rgb(7, 10, 13)"],
[style*="color: rgb(11, 15, 20)"],
[style*="color: rgb(37, 51, 66)"],
[style*="color:rgb(11, 15, 20)"] {
color: var(--tweak-fg) !important;
}
[style*="color: rgb(66, 87, 108)"],
[style*="color: rgb(102, 127, 153)"],
[style*="color: rgb(111, 134, 159)"] {
color: var(--tweak-fg-translucent) !important;
}
[fill="#000000" i],
[fill="#545664" i],
[fill="#71768A" i] {
fill: var(--tweak-fg-translucent) !important;
}
}
/* override inline dark mode colors */
@media (prefers-color-scheme: dark) {
:root {
--tweak-accent: var(--tweak-option-accent);
--tweak-bg: var(--tweak-option-bg-dark);
--tweak-fg: var(--tweak-option-text-dark);
--tweak-bg-secondary: color-mix(in srgb, var(--tweak-bg) 85%, white);
--tweak-bg-tertiary: color-mix(in srgb, var(--tweak-bg) 75%, white);
}
[style*="background-color: rgb(0, 0, 0)"],
[style*="background-color: rgb(8, 10, 12)"],
[style*="background-color: rgb(22, 30, 39)"],
[style*="background-color: rgb(28, 38, 49)"] {
background-color: var(--tweak-bg) !important;
}
[style*="background-color: rgb(30, 41, 54)"],
[style*="background-color: rgb(38, 53, 68)"],
[style*="background-color: rgb(33, 45, 59)"],
[style*="background-color: rgb(21, 52, 85)"],
[style*="background-color: rgb(10, 95, 186)"]{
background-color: var(--tweak-bg-secondary) !important;
}
[style*="background-color: rgb(46, 64, 82)"]{
background-color: var(--tweak-accent) !important;
}
[style*="color: rgb(215, 221, 228)"],
[style*="color: rgb(255, 255, 255)"],
[style*="color: rgb(241, 243, 245)"] {
color: var(--tweak-fg) !important;
}
[style*="color: rgb(174, 187, 201)"],
[style*="color: rgb(154, 170, 188)"],
[style*="color: rgb(108, 132, 157)"],
[style*="color: rgb(120, 142, 165)"],
[style*="color: rgb(91, 119, 149)"] {
color: var(--tweak-fg-translucent) !important;
}
[style*="color: rgb(147, 165, 183)"] {
color: var(--tweak-fg-translucent) !important;
}
[style*="background-color: rgb(76, 162, 254)"] {
background-color: var(--tweak-fg-translucent) !important;
}
[fill="#FFFFFF" i],
[fill="#B9B9C1" i],
[fill="#707489" i] {
fill: var(--tweak-fg-translucent) !important;
}
}
* {
border-color: var(--tweak-bg-secondary) !important;
-webkit-font-smoothing: auto;
}
*:focus {
outline: var(--tweak-option-disable-outlines, none);
}
*:not(input, textarea) {
text-transform: var(--tweak-option-text-transform, 'lowercase');
}
:not(.material-symbols-outlined, .material-icons) {
font-family: var( --tweak-option-font, InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif) !important;
line-height: var(--tweak-option-line-height, 1.3) !important;
}
::selection {
background-color: color-mix(in srgb, var(--tweak-fg) 25%, transparent);
}
/* accent color override */
[style*='color: rgb(16, 131, 254)'],
[style*='color: rgb(32, 139, 254)'],
[style*='color: rgb(76, 162, 254)'],
.ProseMirror a,
.ProseMirror .autolink {
color: var(--tweak-accent) !important;
}
[style*='background-color: rgb(0, 133, 255)'],
[style*='background-color: rgb(16, 131, 254)'],
[style*='background-color: rgb(32, 139, 254)'],
[style*='background-color: rgb(91, 119, 149)'],
[style*='background-color: rgb(140, 158, 178)'],
[style*='background-color: rgb(185, 185, 193)'] {
background-color: var(--tweak-accent) !important;
}
[style*='text-decoration-color: rgb(32, 139, 254)'] {
text-decoration-color: var(--tweak-accent) !important;
}
[fill^="hsl(211,"] {
fill: var(--tweak-fg) !important;
}
[fill="#0085ff"] {
fill: var(--tweak-accent) !important;
}
/* fix text color for style-colored buttons */
button[style*='background-color: rgb(0, 133, 255)'] div {
color: var(--tweak-bg) !important;
}
/* buttons with gradient backgrounds */
[style*="background-image: linear-gradient"][style*="rgb(90, 113, 250)"] {
background: var(--tweak-accent) !important;
}
[style*="background-image: linear-gradient"][style*="rgb(90, 113, 250)"]:hover {
background: var(--tweak-fg) !important;
}
[style*="background-image: linear-gradient"][style*="rgb(90, 113, 250)"] > div {
color: var(--tweak-bg) !important
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes scale-up {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
html, body, #root { background-color: var(--tweak-bg) !important; }
/* 🔘 CONTROLS */
/* text fields */
input,
textarea {
background: var(--tweak-bg-secondary) !important;
}
input::placeholder,
textarea::placeholder,
p[data-placeholder]::before,
[data-testid="composePostView"] [contenteditable="true"] {
color: var(--tweak-fg-translucent) !important;
}
textarea {
resize: v...