Merge pull request #61 from migueravila/dev

⚡️ Add new autochange feature

README-ES-MX.md

@@ -14,17 +14,18 @@
 <br />
 
 ## 👇 Índice
-- [👇 Índice](#-indice)
-- [✨ Características](#-caracteistícas)
+- [👇 Índice](#-índice)
+- [✨ Características](#-características)
 - [🚀 Usos](#-usos)
     - [Como página de inicio](#como-página-de-inicio)
     - [Como una nueva pestaña](#como-una-nueva-pestaña)
 - [🎨 Personalización](#-personalización)
-  - [👋 General: Nombre, Imagen De Fondo y Saludos](#-nombre-imagen-de-fondo-y-saludos)
-  - [🏷️ Botones de enlace](#️-enlaces-de-botones)
+  - [👋 General: Nombre, Imagen De Fondo y Saludos](#-general-nombre-imagen-de-fondo-y-saludos)
+  - [🏷️ Botones de Enlace****](#️-botones-de-enlace)
   - [📑 Lista de enlaces](#-lista-de-enlaces)
-  - [⛈️ Clima: Clave De La Api, Iconos y Grupos](#️-Clima-clave-de-la-api-iconos-y-grupos)
+  - [⛈️ Clima: Clave De La Api, Iconos y Grupos](#️-clima-clave-de-la-api-iconos-y-grupos)
   - [💛 Colores](#-colores)
+  - [🌑 Cambio automatico de tema](#-cambio-automatico-de-tema)
 
 
 ## ✨ Características
@@ -226,4 +227,22 @@ En el archivo `app.css` puedes cambiar las variables para cualquiera de los tema
 }
 ```
 
+### 🌑 Cambio automatico de tema
+
+The theme can be automatically changed by the OS' current theme or personalized hours
+that you can change in the `config.js` file:
+
+```js
+  // Autochange
+  autoChangeTheme: true,
+
+  // Autochabge by OS
+  changeThemeByOS: false, 
+
+  // Autochange by hour options (24hrs format, string must be in: hh:mm)
+  changeThemeByHour: true, // If it's true, it will use the values below:
+  hourDarkThemeActive: '18:30', // Turn on the dark theme after this hour
+  hourDarkThemeInactive: '07:00', // Turn off the dark theme after this hour and before the above hour
+```
+
 ![](assets/img/subheader.png)

README.md

@@ -237,11 +237,15 @@ The theme can be automatically changed by the OS' current theme or personalized
 that you can change in the `config.js` file:
 
 ```js
-  // Autochange dark-theme (24hrs format, string must be in format: hh:mm)
+  // Autochange
   autoChangeTheme: true,
-  changeThemeByOS: false,
+
+  // Autochabge by OS
+  changeThemeByOS: false, 
+
+  // Autochange by hour options (24hrs format, string must be in: hh:mm)
   changeThemeByHour: true, // If it's true, it will use the values below:
-  hourDarkThemeActive: '19:00', // Turn on the dark theme after this hour
+  hourDarkThemeActive: '18:30', // Turn on the dark theme after this hour
   hourDarkThemeInactive: '07:00', // Turn off the dark theme after this hour and before the above hour
 ```
 

assets/js/cards.js

@@ -5,7 +5,6 @@
 // Print cards
 const printCards = () => {
   for (const card of CONFIG.cards) {
-    
     // Card Item
     let item = `
         <a

assets/js/greeting.js

@@ -19,12 +19,9 @@ const gree4 = `${CONFIG.greetingEvening}\xa0`;
 if (hour >= 23 || hour < 5) {
   document.getElementById('greetings').innerText = gree1 + name;
 } else if (hour >= 6 && hour < 12) {
-  document.getElementById('greetings').innerText =
-    gree2 + name;
+  document.getElementById('greetings').innerText = gree2 + name;
 } else if (hour >= 12 && hour < 17) {
-  document.getElementById('greetings').innerText =
-    gree3 + name;
+  document.getElementById('greetings').innerText = gree3 + name;
 } else {
-  document.getElementById('greetings').innerText =
-    gree4 + name;
+  document.getElementById('greetings').innerText = gree4 + name;
 }

assets/js/theme.js

@@ -47,20 +47,29 @@ if (CONFIG.imageBackground) {
   document.body.classList.add('withImageBackground');
 }
 
-if(CONFIG.changeThemeByOS && CONFIG.autoChangeTheme) {
-  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+if (CONFIG.changeThemeByOS && CONFIG.autoChangeTheme) {
+  if (
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  ) {
     enableDark();
   } else {
     disableDark();
   }
 }
 
-if(CONFIG.changeThemeByHour && CONFIG.autoChangeTheme) {
+if (CONFIG.changeThemeByHour && CONFIG.autoChangeTheme && !CONFIG.changeThemeByOS) {
   const date = new Date();
-  const hours = date.getHours() < 10 ? '0' + date.getHours().toString() : date.getHours().toString(); 
-  const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes().toString() : date.getMinutes().toString(); 
+  const hours =
+    date.getHours() < 10
+      ? '0' + date.getHours().toString()
+      : date.getHours().toString();
+  const minutes =
+    date.getMinutes() < 10
+      ? '0' + date.getMinutes().toString()
+      : date.getMinutes().toString();
   const currentTime = hours + ':' + minutes;
-  if(currentTime >= CONFIG.hourDarkThemeActive) {
+  if (currentTime >= CONFIG.hourDarkThemeActive) {
     enableDark();
   } else if (currentTime >= CONFIG.hourDarkThemeInactive) {
     disableDark();

assets/js/weather.js

@@ -3,12 +3,8 @@
 // └┴┘└─┘┴ ┴ ┴ ┴ ┴└─┘┴└─
 
 const iconElement = document.querySelector('.weatherIcon');
-const tempElement = document.querySelector(
-  '.weatherValue p'
-);
-const descElement = document.querySelector(
-  '.weatherDescription p'
-);
+const tempElement = document.querySelector('.weatherValue p');
+const descElement = document.querySelector('.weatherDescription p');
 
 // App data
 const weather = {};
@@ -73,6 +69,8 @@ function getWeather(latitude, longitude) {
 // Display Weather info
 function displayWeather() {
   iconElement.innerHTML = `<img src="assets/icons/${CONFIG.weatherIcons}/${weather.iconId}.png"/>`;
-  tempElement.innerHTML = `${weather.temperature.value.toFixed(0)}°<span class="darkfg">${tempUnit}</span>`;
+  tempElement.innerHTML = `${weather.temperature.value.toFixed(
+    0
+  )}°<span class="darkfg">${tempUnit}</span>`;
   descElement.innerHTML = weather.description;
 }

config.js

@@ -32,11 +32,15 @@ const CONFIG = {
   defaultLatitude: '37.775',
   defaultLongitude: '-122.419',
 
-  // Autochange dark-theme (24hrs format, string must be in: hh:mm)
+  // Autochange
   autoChangeTheme: true,
-  changeThemeByOS: false,
+
+  // Autochabge by OS
+  changeThemeByOS: false, 
+
+  // Autochange by hour options (24hrs format, string must be in: hh:mm)
   changeThemeByHour: true,
-  hourDarkThemeActive: '19:00',
+  hourDarkThemeActive: '18:30',
   hourDarkThemeInactive: '07:00',
 
   // ┌─┐┌─┐┬─┐┌┬┐┌─┐