Posts

Showing posts from June, 2021

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

Image
  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-butto...

Custom Radio Buttons - Using HTML, SCSS, CSS Tutorial - Animate Radio Butto

Image
a Youtube Video Link :  https://youtu.be/lufQii6ybbo You will learn how to create and style custom radio button using html, scss, css and animate it.  Follow Steps You can use any editor Create html structure (See Youtube  video for creating html structure) Write scss styling (See  Youtube  video for creating html structure) Add animation like the video you can add animation as you like.  Run the application you will see a cool looking radio buttons group.  Tada you have just customized a radio button  Follow me on Instagram:  https://www.instagram.com/codewithmuzamil/ Subscribe to my Youtube channel for more videos: https://youtu.be/lufQii6ybbo

Ionic App Theme Tutorial - Customize your ionic themes and extract colors from design

Image
Youtube Video Link :  https://www.youtube.com/watch?v=3yU-Lw-qKVU You will learn how to extract colors from a design file and generate Ionic theme CSS4 variables in an easy way.  Follow Steps Install Ionic  and create new ionic app (you can skip this step if already create ionic app) Open in the app code in Visual Studio Code (you can use any editor) Open src/theme/variables.scss file Now open your design file and pick all colors used in the design Visit  Color Generator  to generate colors you picked from design Copy the generated css variables and paste in src/theme/variables.scss file by replacing the old variables Now run the application using this command ionic serve  from your terminal Tada your theme is updated according to your design files.  Follow me on Instagram:  https://www.instagram.com/codewithmuzamil/ Subscribe to my Youtube channel for more videos: https://www.youtube.com/watch?v=3yU-Lw-qKVU

Contact Form

Name

Email *

Message *