From 4cb30f1e26997964d80925006936f9ec17fe5b5f Mon Sep 17 00:00:00 2001
From: Himanshu Gupta <himanshu12.gupta@ril.com>
Date: Wed, 6 Dec 2023 17:55:02 +0530
Subject: [PATCH] Update README.md

---
 README.md | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 61 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 43f9682..f51acdb 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,79 @@
 # Getting Started
 <br>
 
-    npm install fe-theme
+    npm install fe-theme --save
+
+# Setup
+
+## 1. Importing UI component and using in your application
+```js
+import Button from 'fe-theme/Button';
+```
+
+```js
+<Button />
+```
+Hurrah...!!! Button is created, but color does not match with the application. No worries.
+  
+
+## 2. What to change theme according to your application?
+#### Generate a sample file(sample-theme.js) by running below commond in terminal in your project location.
+
+```cp sample-theme.js ./```
+
+#### Or
+
+#### Create a file sample-theme.js in the root folder and add below code
+```js
+const theme = {};
+
+theme.color = {
+  primary: '#00364e',
+  secondary: '#03567b',
+
+  white: '#ffffff',
+  black: '#000000',
+
+  info: '#1976d2',
+  success: '#43a047',
+  warning: '#ffa000',
+  danger: '#d32f2f',
+  orange: '#fc6027',
+};
+
+theme.fontFamily = {};
+theme.fontSize = {};
+theme.fontWeight = {};
+theme.display = {};
+theme.borderRadius = '';
+theme.pxScale = '';
+
+export default theme;
+```
+
+
+## 3. Bootstrapping theme by calling a ```themeInit```  function and pass it to ```ThemeProvider``` in ```theme``` property
 
-# Usage
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { ThemeProvider } from 'styled-components';
-import theme from 'fe-theme/js/theme';
+import themeInit from 'fe-theme/Init';
+import theme from './sample-theme.js';
 import App from './App';
 
 ReactDOM.hydrate(
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={themeInit(theme)}>
         <App />
     </ThemeProvider>,
     document.getElementById('root'),
 );
-  ```  
-
+```
 
+## 4. Go to the sample-theme.js and change the theme like primary: '#000', secondary: '#333'
+```js
+<Button design="primary" />
+<Button design="secondary" />
+```