Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

stylesheets / themes #133

Open
gitmalong opened this issue Nov 1, 2023 · 8 comments
Open

stylesheets / themes #133

gitmalong opened this issue Nov 1, 2023 · 8 comments
Labels
T: enhancement Type: New feature or request T: question Type: Further information is requested

Comments

@gitmalong
Copy link

Hi!

As a lazy dev I would like to slap a kind of stylesheet to my UI to get started with a beautiful UI. Is that something that should be handled by third party component libs?

@panekj panekj added T: enhancement Type: New feature or request T: question Type: Further information is requested labels Dec 9, 2023
@pieterdd
Copy link
Contributor

Are you perhaps looking for a UI component library?

I'm in the process of setting one up for Floem: https://github.com/pieterdd/prettygooey/tree/floem-rewrite Note that this is an unfinished development branch.

@golota60
Copy link
Contributor

golota60 commented Jan 7, 2024

Hey, I've just published a library named oxytail also implementing a couple of styled widgets if you're interested.

@pieterdd
Copy link
Contributor

pieterdd commented Jan 7, 2024

Happy to see more choices pop up! I didn't expect the floem-themes topic to welcome its first entry so quickly after it was added to the docs 😄

@ArcExp
Copy link

ArcExp commented Jan 15, 2024

are sylesheets the only way to apply a dark theme/dark mode to a floem app? trying to figure out how floem works in this regard, for an app I'm working on

@jrmoulton
Copy link
Contributor

@ArcExp

I've ended up building something custom to handle light/dark mode

https://github.com/jrmoulton/floem-component/blob/96fac259133b9450c15294e035e594a70e79d6df/src/style.rs#L290C1-L337C1

The way this works is I have an RwSignal<DarkMode> (DarkMode is a type alias for bool) that I initialize at the start of my program with provide_context.

Then for all my colors I use this LightDark struct. in order to get the peniko::Color out of it I call .color(). Calling .color will use the global DarkMode bool to determine if the LightDark should return the light or dark field. Since this uses a signal it will automatically be reactive when used in any styles.

view().style(|s| s.background(LightDark.color())//  <-- Automatic light/dark mode

@ArcExp
Copy link

ArcExp commented Jan 15, 2024

Thanks! I'll be using that in my app

@jrmoulton
Copy link
Contributor

Cool! You might consider just copy/paste that entire file and use the parts that you want. That repo is full of experiments that I don't necessarily maintain.

@ArcExp
Copy link

ArcExp commented Jan 15, 2024

Will do :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
T: enhancement Type: New feature or request T: question Type: Further information is requested
Projects
None yet
Development

No branches or pull requests

6 participants