this post was submitted on 07 Apr 2024
2 points (100.0% liked)

Mbin Dev

0 readers
1 users here now

An unofficial way for giving suggestions, feedback and milestones of Mbin.

This Magazine is not run by anyone that can code better than a chicken nugget. It has been created to help aid as well as suggest ideas that the community can vote on natively inside of Mbin

Rules

founded 2 years ago
MODERATORS
e-five@kbin.run
2
@hitstun just wanted to check with you as I think I misunderstood your request for a CSS var for color scheme. Do you mean you'd like something like class=theme--scheme-[light/dark] on the body class? (kbin.run)
submitted 1 year ago by e-five@kbin.run to c/Mdev@kbin.run
4 comments fedilink hide all child comments
 

@hitstun@fedia.io just wanted to check with you as I think I misunderstood your request for a CSS var for color scheme. Do you mean you'd like something like class=theme--scheme-[light/dark] on the body class? For instance when the user selects tokyo night, solarized dark, dark, kbin it's theme--scheme-dark and when light or solarized light, theme--scheme-light to save you from having to type out selectors for each theme?

And I did investigate the magazine description federation issues. Think I have an idea, I'll make an issue for it and it will probably be the next thing I work on after my current open PRs.

#Mdev

top 4 comments
sorted by: hot top controversial new old
[–] hitstun@fedia.io 0 points 1 year ago (1 children)

@e-five@kbin.run Yeah, something like that. I'm sure some Mbin instances will want to create their own themes in addition to the six default ones. If each new theme sets either theme--scheme-dark or theme--scheme-light, they'd be compatible with any magazine-specific CSS that uses them.

I was also thinking about making the themes set their colors in RGBA format like rgba(253,246,227,1) instead of hex like #fdf6e3. That way, we can set alpha values for cool transparent backgrounds and gradients. But I guess if I really wanted to, I could write JavaScript that make that conversion for me. I keep forgetting that there's magazine-specific JavaScript too.

[–] e-five@kbin.run 2 points 1 year ago (1 children)

@hitstun@fedia.io I was planning on implementing this this weekend but realized before I started that I'd hit a snag. When the theme is theme--default or theme--solarized, I don't actually know if the color scheme is light or dark, it all depends on the user's system settings (if they prefer light or dark). I haven't been able to think of a way around that, since CSS isn't really a logic/programming language I can't do things based off of it. The most I could think of is setting like theme--scheme-unknown and then updating it via javascript after page load. That has the original problem when it was JS based though, in that it wouldn't be set until the page fully loaded due to the JS having defer on it. But maybe just having the scheme on all other settings is good enough? I don't have metrics but I bet tons of users are just theme--default though, since it's the, well obviously, default state.

[–] hitstun@fedia.io 0 points 1 year ago (1 children)

@e-five@kbin.run Ah, that makes sense now. I wondered why the Solarized theme has a light background on my desktop but a dark background on my phone. Those match my dark mode preferences on those browsers. I thought I messed up my CSS somewhere.

[–] e-five@kbin.run 2 points 1 year ago* (last edited 1 year ago)

@hitstun@fedia.io Benti ended up doing the mag description fix. Haven't completely been sure that it fixes things outgoing but at least incoming from lemmy looks much better. That should be out next release. In regards to not being able to add transparency because values are hex and not rgb, is that something color-mix() could do? Found that while googling to try to understand the issue.