Ionic App Theme Tutorial - Add new color - customize ionic theme - new color creator

 

Youtube Video Link : https://youtu.be/oK99eZPTAUA

You will learn how to generate new color which is extra color needed for your design if you ran out of default ionic color like primary, secondary, dark, light.

Follow Steps

• Open in the app code in Visual Studio Code (you can use any editor)
• Run the application using this command ionic serve from your terminal
• Open src/theme/variables.scss file
• Now open your design file and pick new color you want to generate.
• Visit New Color Creator to generate colors you picked from design
• Write the color code and name the color (it will generate the color variables and css class at the bottom)
• Copy the generated css variables and paste in src/theme/variables.scss file in the :root variables
• Copy the css class and paste it inside a global.scss or general.scss file
• Now create any ionic component give it color name you just created like
• <ion-button color="orange">Button Text</ion-button>
• Tada your new color is applied to ion-button.

Follow me on Instagram: 

https://www.instagram.com/codewithmuzamil/

Subscribe to my Youtube channel for more videos:

https://youtu.be/oK99eZPTAUA