I tried using the foreground property with or without an icon.
It’s always the default blue . .
Hi Paul,
EDIT: Oh, it was actually a bug after all 
. See Meredydd’s post below. But here’s some info about Roles and themeing anyway…
There are several approaches depending on what you want to achieve.
Selecting a Role
As with Buttons, the FileLoader has Roles that set its look and feel. You can change FileLoader’s role property to change the role that’s applied to it.
By default in Material Design, the available Roles are raised, primary-color and secondary-color. So you can apply one of these these to make the FileLoader white, blue or orange respectively.
Changing your Colour Scheme
If you want something other than blue or orange, you can change your primary and secondary colour using the Colour Scheme which appears under Theme in the App Browser. This will redefine the colour scheme for your app and affect the colour of other Components. This is the route I would probably take because a colour palette with few colours is good design in my opinion.
Defining your own Role
If you want to make your FileLoader have a colour that’s not in your colour pallete you can add a new Role. Go to Roles in the App Browser. You’ll find a list of Roles and you can take a look at the secondary-color Role to see how you need to define your new one - basically just make sure it can be applied to FileLoader components. You add a new role using the box at the bottom of the Roles screen.
Once you’ve created a new Role, you need to modify the CSS to define how it will make your FileLoader look. Go to Assets in the App Browser and select theme.css.
You’ll find several CSS rules for anvil-role-secondary-color. Wherever you see anvil-role-secondary-color and anvil-role-primary-color together, you should add anvil-role-foo (if your Role is called foo). These are the CSS rules that make the button look ‘raised’, so you probably want these to apply to your new Role too.
Wherever you see anvil-role-secondary-color alone, you should copy-paste the entire rule, replace anvil-role-secondary-color with anvil-role-foo, then change the colour in the CSS rule to be what you want.
Now, by applying the anvil-role-foo Role to your FileLoader, it should have a raised look and the colour you wanted.
For more about what you can do with the Material Design theme, take a look at this tutorial:
1 Like
Hi @paul.k.pallaghy,
Just to confirm, the fact that the FileLoader wasn’t responding properly to the foreground and background colours was a bug. I’ve now fixed that bug, and the update will be rolled out over the weekend.
1 Like