Just something I made that shows that joinmastodon.org could definitely have a dark mode.
Join Mastodon Dark by Freeplay
Details
AuthorFreeplay
LicenseNo License
CategoryMastodon
Created
Updated
Size1.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name JoinMastodon.org Dark
@namespace Freeplay
@version 1.0.1
@description A new userstyle
@author Freeplay (https://freeplay.codeberg.page/)
@preprocessor stylus
==/UserStyle== */
@-moz-document domain("joinmastodon.org") {
/* Insert code here... */
[class="absolute inset-0 -z-10 hidden h-[var(--mobile-hero-height)] 2xl:block 2xl:h-[var(--desktop-hero-height)]"] {
filter drop-shadow(0px 0px 60px #24012a)
}
* {
--tw-prose-bold rgb(188, 188, 234)
}
.bg-white {
background #010010
background #150118
color white
}
.bg-gray-5, [class*="md\:bg-gray-4"] {
background #150118
color white
}
.text-black, .text-gray-900, .prose {
color rgba(200,200,250,1) !important
}
h2, h3 {
color #c4c4ff !important
}
figcaption
.text-gray-1, .text-gray-2, [class*="text-gray-"] {
color rgb(188, 188, 234) !important
}
[class*="md:bg-white"], [class*="bg-nightshade-50"], .ring-1 {
background #051936
color white
}
[clasS*="border"] {
border-color rgba(120,120,200,.2)
}
.bg-white img[src$=".svg"][alt=""] {
filter invert(1)
}
[src^="/logos/"]
[src="/logo-symbol-wordmark.svg"] {
filter invert(100%) hue-rotate(150deg) !important
}
[class*="hover"]:hover {
background-color rgba(50,50,100,0.1) !important
}
.ring-1 {
box-shadow none
}
.-mb-footer-offset {
img[alt=""] {
filter contrast(.1) brightness(.5) sepia(1) brightness(.9) hue-rotate(240deg) contrast(2)
}
}
}