1. The first code snippet doesn't apply any background color at all .However, when I switch to the s...

# compose

[Sudarshan]

1. The first code snippet doesn't apply any background color at all .However, when I switch to the second code snippet, the background is applied correctly! Is it a bug or something that I don't know about?

[Kirill Grouchnikov]

The first one accesses the theme before you set it, so it gets the default colors instead of the ones you want

[Sudarshan]

Oh hey! I never thought about that. Now it makes sense to me! Will it work if I define modifier variable inside lamba body of Theme composable?

[Sudarshan]

And is it a good practice to do so because I really hate second code snippet because it looks ugly to me!

[seb]

Be very careful with storing modifiers in variables and applying them later, it's very easy to mistakenly use them multiple times (which is bad) or get weird bugs (which can be worse)

[Sudarshan]

Is it fine I'm taking care it's only used as intended? Like if I create a val backrgoundContainerModifier and only applied it to intended background container?

[seb]

I'm sure you're being careful, I'm just saying — you can get silly bugs even if you're very careful because of subtleties

[seb]

https://github.com/JetBrains/intellij-community/pull/2942 this was me just 2 weeks ago

[Sudarshan]

Hey! I'll definitely be more careful from now on about this practice. Actually the only reason I do that is I don't want my parameter list look messy and keep my code clean! All though I'll definitely be careful when doing such.

[seb]

I understand :) it can get a bit unruly. I'd feel bad about not warning about the risks, though, especially since it's such a recent memory for me

[Sudarshan]

BTW I also don't like always padding padding while calling from parent composable is it a good practice to apply padding inside child component?

[Sudarshan]

I totally feel your pain—I spent a good 20 to 30 minutes trying to figure out why the backgroundColor wasn’t being applied either!

[seb]

One of the risks of putting modifiers in a variable 😄

[Sudarshan]

yes i realized it so i'll be more careful and try to avoid this

[seb]

is it a good practice to apply padding inside child component

I would say if it's "internal" padding to the component itself it's fine, if it's something you do to e.g., align with other things in the parent, I'd argue it should be in the parent

[seb]

But that has little impact on functionality — unless you're then trying to reuse the component elsewhere

[Sudarshan]

How about resuing the same button with different width but same size?

[seb]

Width is part of the size, so not sure what you mean

[Sudarshan]

I mean padding

[seb]

Again, it depends on the "meaning" of that padding 🙂

[seb]

There isn't a hard rule

[Sudarshan]

Oh got it

[seb]

My rule of thumb is that modifiers that relate to how the component is laid out (e.g., fillmaxwidth, or an additional padding for alignment or spacing) then I prefer it being set in the parent

[seb]

But it's just personal preference as it makes most sense to me this way

[Sudarshan]

Yes I understand! BTW thank you so much

[Sudarshan]

Now I won't find myself storing modifiers in variables that much.

[Brill]

I think you are not using your theme correctly.

You should be referencing from MaterialTheme which makes me think the setup is not correct.

[Sudarshan]

Hey Brill! I've created my own implementation of Theme. I'm not using MaterialTheme!

[Brill]

I'm sure you have a reason, but I'm curious why you would add all that extra maintenance?

Anyway, the second one is working because the theme now knows its in dark mode, if your component is outside your theme, the colours would not get switched.

When you set up the modifier outside your theme, it picks the default colour for the background.
When you do it inside your theme, the theme switches the colour in that token to the correct one.

This is working as expected from what I can see about how you set it up.

[Sudarshan]

Hey actually it's a small project and I wanted to experiment around how can I implement my own design system instead of using Material 3. And yes I realized my mistake that I was trying to access the default value of backgroundColor which was set to Unspecified in my ComposeAppColorScheme theme class (idk how to explain but..)

[Sudarshan]

And now all works fine because I'm using backgroundColor after applying my custom theme