Merge pull request #60 from Thealf154/master

Auto-change the theme based on time or OS' preference

README.md

@@ -29,6 +29,7 @@
   - [📑 List Links](#-list-links)
   - [⛈️ Weather: Api Key, Icons and Unit](#️-weather-api-key-icons-and-unit)
   - [💛 Colors](#-colors)
+  - [🌑 Auto change theme](#-auto-change-theme)
 
 
 ## ✨ Features
@@ -230,4 +231,18 @@ In the `app.css` file you can change the variables for both themes (Dark and Lig
 }
 ```
 
+### 🌑 Auto change theme
+
+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 dark-theme (24hrs format, string must be in format: hh:mm)
+  autoChangeTheme: true,
+  changeThemeByOS: false,
+  changeThemeByHour: true, // If it's true, it will use the values below:
+  hourDarkThemeActive: '19:00', // 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)

assets/js/theme.js

@@ -46,3 +46,23 @@ themeToggle.addEventListener('click', () => {
 if (CONFIG.imageBackground) {
   document.body.classList.add('withImageBackground');
 }
+
+if(CONFIG.changeThemeByOS && CONFIG.autoChangeTheme) {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    enableDark();
+  } else {
+    disableDark();
+  }
+}
+
+if(CONFIG.changeThemeByHour && CONFIG.autoChangeTheme) {
+  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 currentTime = hours + ':' + minutes;
+  if(currentTime >= CONFIG.hourDarkThemeActive) {
+    enableDark();
+  } else if (currentTime >= CONFIG.hourDarkThemeInactive) {
+    disableDark();
+  }
+}

config.js

@@ -32,6 +32,13 @@ const CONFIG = {
   defaultLatitude: '37.775',
   defaultLongitude: '-122.419',
 
+  // Autochange dark-theme (24hrs format, string must be in: hh:mm)
+  autoChangeTheme: true,
+  changeThemeByOS: false,
+  changeThemeByHour: true,
+  hourDarkThemeActive: '19:00',
+  hourDarkThemeInactive: '07:00',
+
   // ┌─┐┌─┐┬─┐┌┬┐┌─┐
   // │  ├─┤├┬┘ ││└─┐
   // └─┘┴ ┴┴└──┴┘└─┘