nicki

@nickinerdface

thoughts, i have them sometimes

she/her

(｡･ ω<)ゞ

twitch

nickinerdface.live/

nicki @nickinerdface7/2/2023, 4:36 PM

kiophen @kiophen

kiophen @kiophen12/11/2022, 4:31 AM

Cohost Theme Customizer

I turned my themes into a more easily customizable theme. From the stylus extension button, you can change the background color, text, and accent color using a color picker.

It comes with 20 pre-made themes as well, some are shown in the image.

Download here (userstyles.world)

Or here (github)

(userstyles.world is having some problems with downloads right now, if you get an API error try the github link.)

How to use:

You will need the stylus extension
Install the theme from the download link
From the Stylus icon, click the gear next to "Cohost Theme Customizer" to get to the color picker

Let me know if some part of the website is ignoring the theming. Thanks

#userstyles #cohost themes #cohost meta #The Cohost Global Feed #accessibility #dark mode #cohost help #Cohost tips #staff hire me #css #themes #Aesthetic #chosting tips #chosting utilities

You must log in to comment.

in reply to @kiophen's post:

pastell @pastellexists12/11/2022, 5:27 AM

How come there's a contrast slider rather than just two background color slots? Is that some quirk of the way cohost is built, or is that you?

kiophen @kiophen12/11/2022, 5:50 AM

That's just how I figured how to generate shades of a single color and having it compatible with the code i already wrote, keeps it simple for now at least

@comment-writer8/7/2023, 10:03 AM

Hello, can you please preserve the current "dark mode" as a selectable style? (I mean the berry sidebar/banner, dark background, cream/white posts, cream comments. just the exact style.)

There really needs to be a way to change sidebar, post background, post header/footer and comment background colors. I find myself to really struggle to make good-looking layouts with the contrast slider, aside from wanting to be able to recreate the current style anyway.

kiophen @kiophen8/8/2023, 10:25 PM

due to the way my theme works it isn't possible to recreate the official dark mode theme using my theme, the custom theme option is actually the same system the presets use

@comment-writer8/9/2023, 4:15 PM

Well. To be honest, if I understood which parts of the code influence which parts of the site, then I could do this myself, I extracted the color palette. I just don't know where to put any of the hex colors in the code.

I can't figure out how to apply the #191919 to the background properly. Eventually I managed to apply it, but then the sidebar and header got the same color. What element exactly is the background that doesn't influence the sidebar and header?

(Note: I'm not editing your code, I'm using the original color root code of cohost)

naidje @naidje12/11/2022, 3:45 PM

wahey! this is amazing!

@lexi12/11/2022, 5:35 PM

STYLUS CAN DO THAT???? damn TIL

Janine @pizzaforfree12/11/2022, 8:37 PM

I'm kinda conflicted, tbh, whether to use this in conjunction with teal ghost (so elements use the full screen are) or not. Anyway, this is fantastic and I've quickly become a firm Eggbug Light and Mew enjoyer, thanks for making this~!

kiophen @kiophen12/11/2022, 8:44 PM

If you like the layout hack I included in teal ghost, I made it into an option for my Tweaks pack: https://cohost.org/kiophen/post/581866-1-0-1

It's compatible with this customizer and has some other options as well. thanks for the comment =]

Janine @pizzaforfree12/11/2022, 8:46 PM

Ooohh I'll have to take a look, thanks!

Beeks!@thebeeks12/11/2022, 10:38 PM

I'm pickin' up what you're puttin' down with that Monosodium theme...

kiophen @kiophen12/11/2022, 10:52 PM

me @littleampton12/12/2022, 12:16 AM

This is super useful, thanks! Made myself a winter theme :-)

The only issue, are disabled buttons supposed to be based on text colors? I have primary text black and secondary as dark blue, and when a comment box is empty the buttons look like two black rectangles.

And just realized that on mouseover their background color seems to not be themed. EDIT: mouseovers on tags (in the post editor) seem to not be themed either

(I'm a Firefox user)

kiophen @kiophen12/12/2022, 1:31 AM

Ooops yeah I forgot to fix the buttons theming, I'll get to those and the tags later tonight

'Rito @rito12/12/2022, 1:30 AM

Oh my god thank you so much! Rockin that monosodium for now

Kaisogen @Kaisogen12/12/2022, 3:48 AM

I absolutely LOVE the Chitter default!! It's super nice on the eyes!

kiophen @kiophen12/12/2022, 5:57 AM

thanks! its based on the mastodon instance chitter.xyz

GoatyGoats.com/links (she 🐯)@goaty12/12/2022, 10:51 PM

thank you!! i was trying to write my own dark style but kept finding little things to fix haha

kiophen @kiophen12/13/2022, 8:59 AM

yeah like why does the side define a bunch of color variables if it doesn't even use them consistently 😭

Duskfall Portal Crew @duskfallcrew12/12/2022, 11:04 PM

God you are a god send our system could NOT TOLERATE the main colors of cohost, and this userstyle thing... SHEESH amazing. MUCHO props thank you!

kiophen @kiophen12/13/2022, 9:03 AM

glad to help!! I'm the same way, the mandatory high contrast light mode and stuff like the maroon bar going down the left side of people's profile pages is very painful.

Lex @Lexfeathers3/31/2023, 3:28 PM

I've been using this since you put it up and it's great! Wanted to mention that the header bar for notification clusters looks to now be ignoring the themes though.

Lex @Lexfeathers3/31/2023, 3:28 PM

I've been using this since you put it up and it's great! Wanted to mention that the header bar for notification clusters looks to now be ignoring the themes though.

kiophen @kiophen4/5/2023, 4:53 AM

thanks for letting me know =) i noticed when checking the notification for this comment. Just pushed the update to fix it

Lex @Lexfeathers4/5/2023, 7:23 PM

Looks beautiful, thanks so much! :yeah:

typo23 @typo237/2/2023, 3:46 PM

nice

Punk cat @Joan-eggventure7/4/2023, 7:22 PM

Stupid question, but do these work on mobile?

kiophen @kiophen7/4/2023, 9:32 PM

I think it would work if you can use a browser that lets you install the Stylus addon

@schmeat7/8/2023, 1:04 AM

I hope this becomes a official feature one day

Doomdraws @Doomdraws7/8/2023, 10:23 AM

Does it work for mobile or PC is required?

kiophen @kiophen7/9/2023, 1:57 AM

I don't think so, it requires a browser extension to work, and I didn't see it available for android firefox. If you just want a dark-mode skin, you can use firefox with the Dark Reader extension, that's what i use.

Chubby cuddlebot Lemma!@LemmaEOF7/11/2023, 2:46 AM

Ooh, this is neat! I kinda wish I had a bit more control over the backgrounds of posts and such separate from the background, but I enjoy it either way :3

@Tisinrei7/12/2023, 1:40 PM

All accounts can apply this? Would be good to apply for a more darker theme, my eyes would thank you. x)

kiophen @kiophen7/13/2023, 7:04 PM

Yep anyone can use it, you just need to install the Stylus browser extension to use it

@Tisinrei7/16/2023, 11:05 PM

perfect so, I will check it.

farrowking37 @farrowking377/14/2023, 4:20 AM

Hey just wanted to say thank you! I'm not sure which one of the inbuilt themes I like more, but there's so many that are much nicer on my eyes for the evening!

蒸しルビー @YuushaRuby8/2/2023, 11:56 PM

Hey I use this on Firefox, but stylus isn’t available on iOS on safari, but I found an extension that lets me inject custom css in a similar way though it’s a bit barebones, I was wondering if there’s a way I could grab the css color values that are changed with your theme editor from the desktop version and just copy paste the css into my little extension

kiophen @kiophen8/4/2023, 12:45 AM

My css uses a lot of scss variables, unfortunately it would require a lot of find+replace to make a static theme out of it

蒸しルビー @YuushaRuby8/4/2023, 2:15 AM

Ah okay makes sense

kiophen @kiophen8/4/2023, 9:45 PM

I actually found out I can just copy the compiled css from the browser dev tools, here's one with the "eggbug dark" theme: https://pastebin.com/t0ei4ruq

蒸しルビー @YuushaRuby8/4/2023, 9:53 PM

Yoooooo thank you so much!!!

It's me, Moodle!@MoodleMcDoodle8/17/2023, 8:11 PM

Ahhh this is exactly what I've been needing thank you so much!!!! I feel so much more at home now using the space theme (with an alternate background image) <3

Harlock Sholmes @jeanne-morningstar8/26/2023, 1:18 PM

Love the space theme

mira @mira-drgn9/5/2023, 11:55 PM

I've been using this customizer for most of my time on cohost and I really appreciate it for making the site far more Viewable. In the last several days it's sporadically stopped working for me (on Firefox) and I'm not sure why. Looking at the theme code, Stylus gives an "Unknown word" error on line 228, and if that line is commented out it gives the same error on line 308. Both of those lines consist of .mixin(@ch_theme);. I don't know enough to try to diagnose what the problem is, but hopefully if it is something with the script and/or cohost and not just something on my end, that might help narrow it down.

kiophen @kiophen9/7/2023, 1:47 AM

I wish I could help, but I have no idea what it could be.. I haven't had any problems on firefox yet.

Those errors have been on my end as well since I first wrote it. I saw another userstyle for a different site using the same formatting I use there, and Stylus would display the error for it as well. However, both that one and mine are working fine, so I ignored it. I think it's just the Stylus code editor thinking it's invalid code when it's not?

I would double check that there isn't a conflicting userstyle toggled on in Stylus, and reinstall the customizer. If it still doesn't work, I can make a static version of one of the themes (or a custom theme if you can get me the colors) and send it to you.

Pix @pixxyofice11/10/2023, 10:02 PM

i've actually been having this same problem, preventing me from having this stylus from working in the first place and unable to look at all the options and how it looks on my own cohost at all. I've uninstalled the only other stylus style i had there and reinstalled and still, unable to change.

i wanted to see eggbug dark, chitter, mew, and gelmew. Sorry to hop onto a 2 month old post but this has been plaguing me since i first found out about this, and im not sure what's up, especially since that line of code is located elsewhere and is fine.

kiophen @kiophen11/13/2023, 6:20 AM

Hey, sorry it hasn't been working. I went and pushed an update to it just now that restructures how the style works internally. If it still doesn't work, I can make static versions of those themes and send them to you.

Pix @pixxyofice11/20/2023, 7:48 AM

YOOOO ITS WORKED?? thank you so much!

Obspogon @obspogon9/17/2023, 4:43 PM

Bug: when I turn on the style the line spacing in posts shrinks

Dubious little creature, Getting up to mischief @nick-nonya11/9/2023, 4:06 PM

I'm getting 'Error: Unknown API.download' on the extension's page on firefox
Edit: got around it by downloading and manually installing the style

h3k8e @h3k8e11/13/2023, 4:21 PM

Works like a charm! There were a couple of small holes in the styling I was able to fill up myself for continuity and usability's sake, like with the account dropdown's hover item background, but overall your themes work amazingly. Better than anything I've tried for sure, including what I've attempted to do myself, which went off like a went blanket.

Also, I read some of your comments in the CSS, which both amused me and I agree with. I assume this place is running on Tailwind CSS and React, and that makes it EXCEEDINGLY frustrating and difficult to style because of the lack of unique classes, IDs, and attributes. Everything's just very generalized and makes it impossible to specifically target certain elements well, if at all. You did a bang up job though, so kudos!

kiophen @kiophen11/13/2023, 11:47 PM

Glad it works after the recent update! Tailwind is a demonic evil tool designed to specifically torture people who make userstyles. "Let's recreate inline styles, except using the class attribute instead!" "Lets define a bunch of CSS variables, and then not use any of them!" <- Statements dreamed up by the utterly Deranged

h3k8e @h3k8e11/14/2023, 12:08 AM

I've had very little experience, almost none actually, with Tailwind, but I can say that even trying to style that was an exercise in madness, so I get what you're saying. XD It's just messy and for us that use userstyles it makes it practically impossible to do anything with, without injecting javascript or doing something very iffy to get it working. Hell, what I did do actually broke recently for whatever reason, so that's a good example. So, I'm happy to have your work for sure.

Obspogon @obspogon11/13/2023, 8:40 PM

on line 535 is a code that forces all line height of posts to be unnaturally squished and awkward to read (line-height: 1.35;).

kiophen @kiophen11/13/2023, 11:33 PM

Thanks for finding that, there was someone else with that problem but I couldn't see the difference toggling the theme. Removed it in the most recent version

Deadgar64 @Deadgar6411/14/2023, 12:14 AM

Nifty AF. Thanks!

Vx. Sans Sarif @sans-sarif11/23/2023, 6:46 AM

hi, i am, too stupid to know what i am doing wrong but the light/darkmode changes means my posts aren't coloured anymore, just the rest of the webbed site. . .

kiophen @kiophen11/24/2023, 12:34 AM

aah thanks for letting me know, will fix in a few min

qim @queerinmech11/24/2023, 4:51 AM

i came to report this too, is there a better place to make bug reports?

screenshot

kiophen @kiophen11/25/2023, 5:55 AM

i accidentally forgot to fix it today and yesterday because i was doing jigsaw puzzles literally the entire time i wasn't busy but I'll get it tomorrow !!
i think this is probably the best place for bug reports because i check my notifications here more than i check github

Creature @elmonstwo2/22/2024, 9:56 AM

Amazing work thank you! I could customize the colors of this site to look like the pits of hell where I browse from, it doesn't change the notification banner color but that's just a lil detail, still awesome :)

berry @strawberrycamel2/22/2024, 11:33 PM

i've absolutely loved this so far! thanks so much for making and sharing this! 💚💚💚

vis @ooccoo2/24/2024, 11:39 PM

Hey! These are wonderful! One (maybe) oversight is that the upper-left logo and the left navbar don't switch to an accent color when you mouse over them. I went ahead and made a pull request over on github adding this.

kiophen @kiophen2/25/2024, 2:49 AM

Good eye :3 thanks for the pr, I added it in and it's live now

a robotic beast most foul @wiredwhimsical2/26/2024, 11:15 PM

YOOOOOO THIS IS SOOOO COOL... THANK YOU I LOVE CUSTOMIZATION >:D

a robotic beast most foul @wiredwhimsical2/26/2024, 11:18 PM

i would like to say also: it seems the "recently used tags" tab when composing a post ignores the theme! same w/ the "discard" button when cancelling creating a post
EDIT: the background of the "see all" tags button also doesn't get colored!

Pinned Tags