Platfio Blog
Fundamentals

Theme

Lesson 29• May 6, 2024

VARIABLES

[Intro] In this lesson, we’ll be discussing the Theme for your app. Let’s get started.

You can create virtually any UI style that you and your clients need. To do this, the first place to get started is setting up the Theme of your app.

[Editor] Go to the Platfio editor, click on theme, then click on theme. You’ll notice that we have many theme controls.

If you press on Brand, we can first set up the brand logo and Brand icon. If you click on it and press on help. You’ll see notes about what should be provided.

The brand logo is the most important thing to set up. It should be a transparent PNG file and also the brand icon should be a square image.

Next, we can go to the sign-up page, where we can change the background color, and background opacity, add a background image, add text, remove text, customize the text color, add specific logos or graphics to the home page, and also select the home page layout.

Next, we can select the color controls. This is extremely important, to set up the Primary and Primary contrasting colors, and the Secondary and Secondary contrasting colors that you can use throughout your app. Then there’s also Tertiary and Tertiary contrasting colors.

The light, medium, and dark colors are also provided. However, it's not recommended that you change these unless you're an advanced user.

Next, we can go to menu, and here we can enable or disable the side menus, customise their color and layout.

We can also customise the tab bar by enabling or disabling it globally or customizing its color.

We can then customise the controls page, by customising the header background color, and also customising the color of the badges.

We can customise the profile page by selecting a custom layout, setting the background color, setting a custom color for the icons, and setting a default cover image for all users.

Next, we can go to the radius controls and we can customise the radius of the standard cards and buttons in the app. However, it’s not recommended to customise this unless you are an advanced user.

Next, you can customise the font for your app. You can go to locations and customise the layout of the locations page. Then the background color of the locations page.

Next, you can go to Product, and you can customise the layout and background color of the product page.

You can go to bookables, and you can customise the layout and the colors of the bookable pages.

We can go to subscribables and customise the layout and background color of your subscribable pages.

There’s also Icon, where we can go to change default icon types for the icon selector.

Notifications is where we can set the notifications that we receive regarding activities that are happening on the app.

And finally Chat, where we can customise the user and admin chat colors as well as the send button colors.

These combined with the ability to set up specific features in the other modules in your app make it virtually unlimited what you can create with Platfio.

MEDIA LIBRARY

[Intro] Let’s now talk about the Media Library.

The Media Library is a convenient place where you can store multimedia that you need inside your app. These include images, files, videos, and audio clips.

We recommend that when you first set up your app, you upload a number of graphic assets to make it easier to set up features.

[Editor] To access the Media Library, go to the Platfio editor, then click Theme, then Media Library.

Click the plus icon to make a single or multiple upload. Give the media you’re gonna upload a name, and either create or select the folder where you want the upload to be located, select the type of media and click add.

You can also search by name to look for the specific media that has been uploaded, and also filter out the necessary details by Folder, Type, Status and Order

You also have the option to edit the existing media. For example, let’s click on this image, you can then change the name, and reassign this image to a different folder.

You can crop images and choose from one of the standard aspect ratios. You can move the borders around to adjust what to crop and press save. Alternatively, you can press Custom and crop the image to a custom size, however, we recommend that you stick to standard image aspect ratios.

Images can also be resized according to your preferred size.

You can also preview the image, and find a link to where the media is hosted in case you need it.

Once you have added an image or any media to the Media Library, note that you can access them when you set up any feature. For example, when setting up a Product, we can press on images, and we’ll see all the images in our media library.

[Outro] Thank you for watching!

Ready to build your app?

Put what you've learned into practice with Platfio.

More Lessons