How to get unique look in Ionic

Hi, I’m new to ionic,

I would like to know what the best way is to make the UI in Ionic unique is it common to import other UI Libraries like ChakraUI or is using only ionic components with some custom CSS the only way? I ask this because I’m not really interested in OS-specific styles I want my app to look like how I want and not how Apple/Google want them to look.

I’m experienced with ChakraUI and there it is super easy to write your styles directly where you need them and the API is the same as vanilla CSS, so I hope for some advice here on what the best practices are. Thanks

You can get a unique look in Ionic by using css.

Thanks is there an official starter to use Capacitor with Nextjs?

Wehn you download and Install ionic, you will find a file called variables.scss inside the theme folder. These are your main colors but you can also set your own styles in your pages.

Every page has a <style scoped> tag, it means that the style you apply will only be valid for that page.

It’s just normal css but let’s say you want to change a background color of the ion-button.

You have to do something like this:

ion-button{
  --background:var(--ion-color-primary);  /*defined in your `variables.scss`*/
}

or


ion-button{
  --background:yellow;
}

You can also use regular css.

ion-button{
 color: black;
  width:113px;
}

You can also use regular html but it’s recomended using ion tags because it provides easy integration and smooth transitions.

@ivanjeremic you can take a look at the docs.

If you have any questions, feel free to ask on this forum.

1 Like

The variables seem pretty useful, is there any way to use them also in inline CSS for some edge cases?

Yes, you can use inline css like:

<ion button style="margin-bottom:13px"></ion-button>

Background color you better set it using this: --background in your <style scoped>

for example:

ion-button{
 --background:white;
}