Custom theme set on runtime

[ntoniocp]

Hey, I recently watched a YouTube video about this lib and I started considering using it for an app I'm building. But after reading the docs and finishing the video I haven't seen a convenient way to do a feature I'd like to offer to users.

I want to give them control on the theme, so they can change it live. Is there a way to do it using the runtime or registry? Because merging the custom theme manually in each component using dynamic functions or something doesn't feel right to me 🤔.

Great job with the lib btw, looks promising

[jpudysz]

Hello 👋 , it is not yet possible. I mentioned in the docs that, from an architectural standpoint, it’s possible but not yet implemented.

I was waiting for someone to request it. I can introduce a new method in UnistylesRuntime to alter the theme, but it will have limitations:

• You would need to adhere to the original theme’s TypeScript type.
• it will modify the current theme only

The more I thought about it, the more I felt that it’s not the right approach. For multiple registered themes, it could be problematic to maintain.

Remember, you can always call the UnistylesRegistry when the user preselects the values required to construct the theme. I’m just not sure if that applies in your case. I would like to hear more about your app and requirements. Thanks!

[jpudysz]

It's not about performance, it's only about predictable output.

On the other hand, you can always build a screen or bottom sheet to gather user colors and then initialize the unistyles. It's possible to lazily load the library: https://reactnativeunistyles.vercel.app/other/for-library-authors/#timing

I just don't have a solution in my mind without introducing the complexity.

[ntoniocp]

The intention is for users to change the theme whenever they want, so that doesn't fit my case. I want to give more ideas, but I haven't worked with C++ or something like this for mobile; I have a web dev background.

I'll be 👀 in case someone requests something similar. Thanks for the time and effort!

[jpudysz]

Let me think about it during the weekend. I like the idea and hopefully I will be able to scratch a proposal next week. I will keep you posted ☺️

[mikevercoelen]

Was just about to ask the same question, this would very much be appreciated, it's a feature we need in order to start using this library.

The limitations you mention we be no blocker: they have to be the same structure, just overrides at runtime.

I can only speak for our use-case:

We're building white labeled apps, and a few theme properties such as primary, secondary color, fontFamily come from an endpoint at app boot.

[jpudysz]

Cool, nice to hear that more ppl needs this feature. Should be ready next week! I will tag you both with proposal for the API 💪

[jpudysz]

Hey @mikevercoelen @ntoniocp

How about such API:

UnistylesRuntime.updateTheme(keyof UnistylesThemes, Partial<UnistylesThemes[keyof UnistylesThemes]>)

// example
UnistylesRuntime.updateTheme('dynamic', {
    colors: {
         background: '#ccc',
         primary: 'red'
    }
})

It would merge the objects underneath with spread operator.

Some notes:

• if you want to update every theme then you need to do it explicitly
• predictable output with TypeScript hints as we're leveraging Partial
• you can call it only after your registered your theme, otherwise error will be thrown

Let me know what do think about it

[ntoniocp]

Looks great!

[jpudysz]

WIP: #138 , API has been changed a little bit

[jpudysz]

Merged & released in 2.2.0