Bento v3: Icons update

README.md

@@ -17,9 +17,10 @@
     -   [Customization](#customization)
          - [Links and Icons](#links-and-icons)
          - [Colors](#colors)
-         - [Wather Widget](#weather-widget)
-         - [Greetings](#greetings)
          - [Image Background](#image-background)
+         - [Greetings](#greetings)
+         - [Wather Info](#weather-info)
+         - [Weather Icons](#image-background)
 #### Features:
 
 - **Dark/Light** mode, you can toggle them and It'll be saved in local store
@@ -79,11 +80,15 @@ In the CSS code you can always change the variables for both themes (Dark and Li
 <h5>Dark mode</h5>
 </div>
 
-#### Weather Widget
+#### Image Background
 
-For setting up the Weather widget you're going to need an API Key in: `https://openweathermap.org/`. Once you have your Key you'll need to set yourlatitude and longitude, you can use: `https://www.latlong.net/` to get them. Once you have the data, you'll need to set them in the `weather.js` in the **js** folder. The code is 
+You can set your own background image with the variable `--imgbg` and set the route to the image you want It's disable by default. If you uncomment the variable, it has by default this image: 
 
-> If you don't like the idea of having your API Key public, you can make the repo into a private one. You can still use the Github Pages service.
+<p align="center">
+  <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/previewbg.png">
+</p>
+
+It has a black filter by default in `--imgcol`, and it'ts value is: `rgba(255, 255, 255, 0.7)` and `rgba(0, 0, 0, 0.7)` for the dark theme. You can change them and the opacity for a better experience with your image.
 
 #### Greetings
 You can put your name and change the greetings.
@@ -98,12 +103,54 @@ var evenTxt = 'Good evening ';
 
 It'll change in order of the hour.
 
-#### Image Background
+#### Weather Info
 
-You can set your own background image with the variable `--imgbg` and set the route to the image you want It's disable by default. If you uncomment the variable, it has by default this image: 
+For setting up the Weather widget you're going to need an API Key in: `https://openweathermap.org/`. Once you have your Key you'll need to set yourlatitude and longitude, you can use: `https://www.latlong.net/` to get them. Once you have the data, you'll need to set them in the `weather.js` in the **js** folder. The code is 
+
+> If you don't like to have your API Key public, you can make the repo into a private one. You can still use the Github Pages service.
+
+#### Weather Icons
+
+The icons by themselves have now 4 different color schemes:
+
+- **Dark** For White theme only users that want a minimalist look
+- **White** For Dark theme only users that want a minimalist look
+- **Nord** Using the Nord Color Scheme and easy-to-eyes colors
+- **Odp** (Default one) Using the One Dark Pro color scheme
 
 <p align="center">
-  <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/previewbg.png">
+  <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/previewico.png">
 </p>
 
-It has a black filter by default in `--imgcol`, and it'ts value is: `rgba(255, 255, 255, 0.7)` and `rgba(0, 0, 0, 0.7)` for the dark theme. You can change them and the opacity for a better experience with your image.
+You set this theme changing this two lines of code in the `index.html` and `weather.js` files
+
+- If you want the Dark icon theme, change the `Odp` to `Dark`
+- If you want the White icon theme, change the `Odp` to `White`
+- If you want the Nord icon theme, change the `Odp` to `Nord`
+
+For example if I'd like to use the `Dark` icon theme:
+
+```html
+<div class="weather-icon">
+    <img src="icons/Odp/unknown.png" />
+</div>
+<!-- Change it to: -->
+<div class="weather-icon">
+    <img src="icons/Dark/unknown.png" />
+</div>
+```
+
+```js
+function displayWeather() {
+    iconElement.innerHTML = `<img src="icons/Odp/${weather.iconId}.png"/>`;
+    tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
+    descElement.innerHTML = weather.description;
+}
+
+//Change it to:
+function displayWeather() {
+    iconElement.innerHTML = `<img src="icons/Dark/${weather.iconId}.png"/>`;
+    tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
+    descElement.innerHTML = weather.description;
+}
+```

index.html

@@ -24,7 +24,7 @@
                 </div>
                 <div class="sblock__weather">
                     <div class="weather-icon">
-                        <img src="icons/unknown.png" />
+                        <img src="icons/Odp/unknown.png" />
                     </div>
                     <div class="temperature-value">
                         <p class="">- °<span class="g">c</span></p>

js/weather.js

@@ -51,7 +51,7 @@ function getWeather(latitude, longitude) {
 
 // Display Weather info
 function displayWeather() {
-    iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
+    iconElement.innerHTML = `<img src="icons/Odp/${weather.iconId}.png"/>`;
     tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
     descElement.innerHTML = weather.description;
 }