Light colour theme for Sengi (Mastodon desktop app)


I’ve been trying out Sengi — perhaps the closest a Mastodon interface gets to what I’ve been looking for.

I didn’t want to say that it’s the closest I’ve found to a Tweetdeck mimic — because I’m trying not to just reproduce how I was consuming social media through Tweetdeck. I am trying to take the time to think through what is actually useful for me. That said, the developer of Sengi is very open about the fact that they tried to reproduce the (old, before it was browser-only) Tweetdeck experience.

As my followee count grows, and discussions have become more numerous and lively, I’ve been trying to keep things manageable. I organise people in lists — mostly by topic, but also one or two for people whose content I don’t want to miss. That way I can dip in and out of the busy home feed and subject-specific lists when time and mood allows, but I can always quickly catch up with the few dozen people whose posts I don’t want to miss. Mastodon’s advanced interface came close to what I wanted, but just not quite close enough, and was becoming a chore once I had more than 4 columns.

So Sengi is great, except for one thing: it has a light text on dark background colour scheme, and no other themes available.

However, with the uBlock browser plugin it was easy to pick out some key elements and quickly cobble together a light theme. So if you have uBlock and want to tweak the appearance of Sengi, you just need to go into Settings>My filters and add these lines:

sengi.nicolas-constant.com##body:style(background-color:#eee !important; color: #777 !important;)
sengi.nicolas-constant.com##.status__navigation:style(background-color:white !important;)
sengi.nicolas-constant.com##.stream-toots__status:style(background-color:white !important;)
sengi.nicolas-constant.com##.content:style(color:#444 !important;)
sengi.nicolas-constant.com##.profile-fields__field--name:style(background-color:#fafaff !important; border-right: 1px solid #fafaff !important;)
sengi.nicolas-constant.com##.profile-fields__field--value:style(color:#444 !important;)
sengi.nicolas-constant.com##.content a:style(color:#4444cc !important;)
sengi.nicolas-constant.com##.status__content-warning:style(color:#777 !important;)
sengi.nicolas-constant.com##.notifications__selector:style(background-color:white !important;)
sengi.nicolas-constant.com##.floating-column:style(background-color:white !important;)
sengi.nicolas-constant.com##.overlay:style(background-color:white !important;)
sengi.nicolas-constant.com##.stream-column:style(background-color:#fafafa !important;)
sengi.nicolas-constant.com##.status__name--displayname:style(color:black !important; font-weight: bold !important;)
sengi.nicolas-constant.com##.stream__link:style(color:black !important;)
sengi.nicolas-constant.com##.follow-account__display-name:style(color:#4444cc !important;)
sengi.nicolas-constant.com##.follow-account__acct:style(color:#777 !important;)
sengi.nicolas-constant.com##.notification--link:style(color:#4444cc !important;)
sengi.nicolas-constant.com##.notification--label:style(color:#777 !important;)
sengi.nicolas-constant.com##.card-data__link:style(color:#777 !important;)
sengi.nicolas-constant.com##.status-wrapper:style(background-color:white !important;)
sengi.nicolas-constant.com##.notification:style(background-color:#fafaff !important;)
sengi.nicolas-constant.com##.flexcroll::-webkit-scrollbar-thumb:style(background-color:#ccc !important;)
sengi.nicolas-constant.com##.stream-toots__status:style(border:solid #fafafa !important;)
sengi.nicolas-constant.com##.notifications__selector__button--selected:style(color:#777 !important;)
sengi.nicolas-constant.com##.status__content-warning:style(border: 3px solid #fafafa !important;)
sengi.nicolas-constant.com##.content-wrapper__expand:style(background-image: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.25),rgba(255,255,255,.5),#fff,#fff) !important;)
sengi.nicolas-constant.com##.content-wrapper__expand--link:style(color:#4444cc !important;)

I also added a “font-size: 13px !important;” to the body tag — the top line — because I prefer it will slightly smaller text than the default.

It was thrown together very quickly, not intended to be perfect. There are various little bits that I couldn’t be bothered tweaking, so it’s not comprehensive. And I’m sure I’ll discover various more niche bits of the interface that I’ve missed. I just thought I’d share it in case anybody else had been looking for the same thing.

Leave a comment

Your email address will not be published. Required fields are marked *