Introduced dynamic light and dark themes

- automatice theme applied as per user preferred settings
- updated readme

Author: thoughtlessmind

README.md

@@ -1,19 +1,20 @@
 # css-only-tooltip
 
+A very lightweight tooltip utitlity library, made using only `CSS` with dynamic light and dark themes. 
+
 [![Node.js Package](https://github.com/thoughtlessmind/css-only-tooltip/workflows/Node.js%20Package/badge.svg)](https://github.com/thoughtlessmind/css-only-tooltip)
 [![NPM downloads](https://badgen.net/npm/dm/css-only-tooltip?icon=npm)](https://www.npmjs.com/package/css-only-tooltip)
 [![License](https://badgen.net/npm/license/css-only-tooltip)](https://github.com/thoughtlessmind/css-only-tooltip/blob/main/LICENSE)
 ![minified size](https://badgen.net/bundlephobia/min/css-only-tooltip?color=pink)
 [![npm version](https://badgen.net/npm/v/css-only-tooltip)](https://www.npmjs.com/package/css-only-tooltip)
 ![npm version](https://img.shields.io/github/languages/top/thoughtlessmind/css-only-tooltip)
 
-A very lightweight tooltip utitlity library, made using only `CSS`. 
 
 ## Insatallation
-- Using npm
+- Using npm  
 		`$ npm install css-only-tooltip`  
 		
-- Using yarn
+- Using yarn  
 		`$ yarn add css-only-tooltip`
 
 - Using jsDelivr CDN
@@ -47,7 +48,15 @@ And then pass the tooltip text in format:
 </body>
 </html>
  ```
-
+#### When using Package Manger (NPM/Yarn):-
+Import the styleSheet into the main  root level component of the App. (for eg. in `App.js` in React App)
+```js
+import 'css-only-tooltip/dist/styles.min.css';
+```
+Now, add the text in the `data` attribute in the child components.
+```jsx
+<data-css-only-tooltip="Hello from tooltip">Hover on me to see the tooltip</span>
+```
 ## Customization
 There are customization options provided.  
 Provide the customization options in a space seperated string in the data attribute like this:-
@@ -64,10 +73,12 @@ Thre are some optional customization options are available.
 	  - `bottom`
 	  - `left`
 	 
-  - #### Themes:
-	  There are two theme options provided. `light` is default option.
+  - #### Themes:  
+	  This supports the user device's theme dynamically. There's no need to specify theme spereately.
+	  Beside this, there are two theme options provided for customization. `light` is default option.
 	  - `dark`
 	  - `light`
+	
 ---
 |Option| Values | default | Required |
 |--|--|--|--|

styles.css

@@ -36,6 +36,21 @@
 /* -------------------------------------------------------------- */
 /*  ----------------------- THEMES ----------------------------- */
 
+
+/* ----- Based on user theme ----- */
+@media (prefers-color-scheme: dark) {
+  [data-css-only-tooltip]::after {
+    background-color: #222;
+    color: #fff;
+  }
+}
+@media (prefers-color-scheme: light) {
+  [data-css-only-tooltip]::after {
+    background-color: #fff;
+    color: #222;
+  }
+}
+
 /* ----- Dark -----*/
 [data-css-only-tooltip-props~="dark"]::after {
   background-color: #222;