From 89df653c3441ce3873d719411a8d59c1df6f8be6 Mon Sep 17 00:00:00 2001
From: MadhushaPrasad <madushaprasad21@gmail.com>
Date: Sun, 7 Apr 2024 12:10:20 +0530
Subject: [PATCH] doc(readme): update readme

---
 README.md | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index aa10123..200c36e 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,7 @@ This package provides a **Vue 3** component to display an **analog clock**. It's
 ```bash
 npm install vue3-analog-clock
 ```
+
 or go to npm <a href="https://www.npmjs.com/package/vue3-analog-clock" target="_blank">package link</a>
 
 ## Import the component and register it in your main.js or main.ts file:
@@ -42,7 +43,41 @@ app.mount("#app");
 
 ## Demo
 
-![ezgif-1-3d019c9ad5](https://github.com/MadhushaPrasad/vue-analog-clock/assets/50085447/fe6c60e1-a631-42cc-9d93-5bd1bc7e0791)
+Default Analog Clock
+
+![Default-Analog-Clock](https://github.com/MadhushaPrasad/vue-analog-clock/assets/50085447/7db6707d-db25-40a3-92a6-7bcfafb5c598)
+
+Customize Analog Clock
+
+![customize-analog-clock](https://github.com/MadhushaPrasad/vue-analog-clock/assets/50085447/65ab7487-efab-46cb-91d9-682634b484b8)
+
+## Customization Options
+
+You can customize the appearance of the analog clock component using the following props:
+
+- `watchFaceBackground`: Background color of the clock face. Default: `#f9f9f9`.
+- `watchDigitsColor`: Color of the clock digits. Default: `#000000`.
+- `watchDigitsMinuteMarksColor`: Color of the minute marks on the clock face. Default: `#929394`.
+- `watchHoursHand`: Color of the hour hand. Default: `#232425`.
+- `watchMinutesHand`: Color of the minute hand. Default: `#343536`.
+- `watchSecondsHand`: Color of the seconds hand. Default: `#c00`.
+
+To customize the clock colors, simply pass the desired color values as props when using the component in your Vue templates:
+
+```html
+<template>
+  <div>
+    <AnalogClock
+      watchFaceBackground="#673F69"
+      watchDigitsColor="#FFFFFF"
+      watchDigitsMinuteMarksColor="#FFFFFF"
+      watchHoursHand="#FFAF45"
+      watchMinutesHand="#FB6D48"
+      watchSecondsHand="#E72929"
+    />
+  </div>
+</template>
+```
 
 ## 🌱 Contributors