Support light/dark mode in a single form

Feature Requests
1

We are embedding a Feathery survey into our product’s onboarding flow and our sign up and log in pages on our iOS and Android apps support dark and light mode.

It’d be great to have a form detect theme preference and change Feathery themes accordingly (or at least a set of core UI settings?) to ensure a seamless personalized experience for our users. And on our end, itd be nice to not have to create 2 forms, or manually support through code.

Thanks for the support!!

2

A theme can now be passed when initializing the Feathery embed library, and that can be used to toggle between light and dark mode themes

1 Like
3

Hi Peter,

I’m trying to set up my second theme to switch, but it looks like I can only create assets from the form designer, but I need to be able to create an asset in the theme editor so that when I go back to the form, I can switch out all of my assets correctly.

Otherwise, I have to duplicate the form, switch the theme in the dupe, then recreate all assets in the duplicated form.

Is there somewhere I can create assets in the theme editor? or is there a better way to manage this?

thanks in advance!

4

Hey Katie, there’s no way to create assets in the theme editor as of the moment. your best bet may be to create a form just to use to manage the assets on the secondary theme. You don’t have to duplicate the entire form to do so, you can just have the assets on one page

1 Like
5

Can we make background color an element to make an asset?

6

We’ll add that to the roadmap! In the meantime, if you’re looking to dynamically adjust the form’s background color, you can do that by either passing in a custom class or inline style directly to your embedded form: <Form> - Feathery Docs

7

@peter I cant seem to get that method working right. I can see the attempted background color there, but its not actually changing the form at all

i’m passing like this:

Feathery.renderAt(this.formContainerId, {
      formName: this.formName,
      style: { backgroundColor: 'black' },
      onFormComplete: () => { this.updateUser() },
});

image
image1920×1361 147 KB

8

Looks like your form might have a child container that covers the entire form and has a background color set on it, which is covering the black

1 Like