🔤 Added customizable title support and 🌙 Automatic dark mode switching (sunrise/sunset)

README.md

@@ -262,7 +262,7 @@ 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
+The theme can be automatically changed by the OS' current theme, set hours, or following sunrise/sunset.
 that you can change in the `config.js` file:
 
 ```js
@@ -276,6 +276,9 @@ that you can change in the `config.js` file:
   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
+
+  // Autochange automatically based on location (sunrise/sunset). Openweathermap API key required.
+  changeThemeByLocation: false,
 ```
 
 ![](assets/img/darkMode.png)

assets/js/theme.js

@@ -61,3 +61,18 @@ if (CONFIG.changeThemeByHour && CONFIG.autoChangeTheme && !CONFIG.changeThemeByO
 		disableDark();
 	}
 }
+
+// there may be a better way to do this &&
+if (CONFIG.changeThemeByLocation && CONFIG.autoChangeTheme && !CONFIG.changeThemeByOS && !CONFIG.changeThemeByHour) {
+  Promise.resolve(weatherPromise).then(weather => {
+    const unix = Date.now() / 1000;
+    if (
+      unix >= weather.sunrise &&
+      unix < weather.sunset
+    ) {
+      disableDark();
+    } else {
+      enableDark();
+    }
+  });
+}

assets/js/title.js

@@ -0,0 +1,10 @@
+// ___ . ___       ___ 
+//  |  |  |  |    |__  
+//  |  |  |  |___ |___ 
+// Function to set window title.
+
+const SetWindowTitle = () => {
+    document.title = CONFIG.title;
+}
+
+SetWindowTitle();

assets/js/weather.js

@@ -7,56 +7,55 @@ const iconElement = document.querySelector('.weatherIcon');
 const tempElement = document.querySelector('.weatherValue p');
 const descElement = document.querySelector('.weatherDescription p');
 
-const weather = {};
-weather.temperature = {
-	unit: 'celsius',
-};
-
 var tempUnit = CONFIG.weatherUnit;
 
 const KELVIN = 273.15;
 const key = `${CONFIG.weatherKey}`;
-setPosition();
-
-function setPosition(position) {
-	if (!CONFIG.trackLocation || !navigator.geolocation) {
-		if (CONFIG.trackLocation) {
-			console.error('Geolocation not available');
-		}
-		getWeather(CONFIG.defaultLatitude, CONFIG.defaultLongitude);
-		return;
-	}
-	navigator.geolocation.getCurrentPosition(
-		pos => {
-			getWeather(pos.coords.latitude.toFixed(3), pos.coords.longitude.toFixed(3));
-		},
-		err => {
-			console.error(err);
-			getWeather(CONFIG.defaultLatitude, CONFIG.defaultLongitude);
-		}
-	);
+const weatherPromise = getWeather();
+displayWeather();
+
+async function setPosition() {
+  let pos;
+  if (!CONFIG.trackLocation || !navigator.geolocation) {
+    if (CONFIG.trackLocation) {
+      console.error('Geolocation not available');
+    }
+    pos = ({ lat: CONFIG.defaultLatitude, lon: CONFIG.defaultLongitude });
+  }
+
+  pos = new Promise((resolve) => {
+    navigator.geolocation.getCurrentPosition((pos) => {
+      resolve({ lat: pos.coords.latitude.toFixed(3), lon: pos.coords.longitude.toFixed(3) });
+    },
+      () => {
+        resolve({ lat: CONFIG.defaultLatitude, lon: CONFIG.defaultLongitude });
+      });
+  });
+  return pos;
 }
 
-function getWeather(latitude, longitude) {
-	let api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&lang=${CONFIG.language}&appid=${key}`;
-	fetch(api)
-		.then(function(response) {
-			let data = response.json();
-			return data;
-		})
-		.then(function(data) {
-			let celsius = Math.floor(data.main.temp - KELVIN);
-			weather.temperature.value = tempUnit == 'C' ? celsius : (celsius * 9) / 5 + 32;
-			weather.description = data.weather[0].description;
-			weather.iconId = data.weather[0].icon;
-		})
-		.then(function() {
-			displayWeather();
-		});
+async function getWeather() {
+  const position = await setPosition();
+  let api = `https://api.openweathermap.org/data/2.5/weather?lat=${position.lat}&lon=${position.lon}&lang=${CONFIG.language}&appid=${key}`;
+
+  let response = await fetch(api).catch(err => {
+    console.log(err);
+  });
+  let data = await response.json();
+
+  let celsius = Math.floor(data.main.temp - KELVIN);
+  return {
+    description: data.weather[0].description,
+    iconId: data.weather[0].icon,
+    sunrise: data.sys.sunrise,
+    sunset: data.sys.sunset,
+    temperature: tempUnit == 'C' ? celsius : (celsius * 9) / 5 + 32
+  };
 }
 
-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>`;
-	descElement.innerHTML = weather.description;
+async function displayWeather() {
+  var weather = await weatherPromise;
+  iconElement.innerHTML = `<img src="assets/icons/${CONFIG.weatherIcons}/${weather.iconId}.png"/>`;
+  tempElement.innerHTML = `${weather.temperature.toFixed(0)}°<span class="darkfg">${tempUnit}</span>`;
+  descElement.innerHTML = weather.description;
 }

config.js

@@ -10,11 +10,12 @@ const CONFIG = {
 	// ├┴┐├─┤└─┐││  └─┐
 	// └─┘┴ ┴└─┘┴└─┘└─┘
 
-	// General
-	name: 'John',
-	imageBackground: false,
-	openInNewTab: true,
-	twelveHourFormat: false,
+  // General
+  name: 'John',
+  imageBackground: false,
+  openInNewTab: true,
+  twelveHourFormat: false,
+  title: 'Bento',
 
 	// Greetings
 	greetingMorning: 'Good morning!',
@@ -46,9 +47,12 @@ const CONFIG = {
 	hourDarkThemeActive: '18:30',
 	hourDarkThemeInactive: '07:00',
 
-	// ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
-	// ├┴┐│ │ │  │ │ ││││└─┐
-	// └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
+  	// Autochange automatically based on location (sunrise/sunset). Openweathermap API key required.
+  	changeThemeByLocation: false,
+
+  // ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
+  // ├┴┐│ │ │  │ │ ││││└─┐
+  // └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
 
 	firstButtonsContainer: [
 		{

index.html

@@ -1,12 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<title>Bento</title>
-		<link rel=" shortcut icon" type="image/png" href="assets/icons/favicon.png" />
-		<link rel="stylesheet" href="app.css" />
-		<script src="https://unpkg.com/lucide@latest"></script>
-	</head>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel=" shortcut icon" type="image/png" href="assets/icons/favicon.png" />
+    <link rel="stylesheet" href="app.css" />
+    <script src="https://unpkg.com/lucide@latest"></script>
+  </head>
 
 	<!-- 
       ╔╗ ╔═╗╔╗╔╔╦╗╔═╗
@@ -59,16 +58,17 @@
 		<!-- Config  -->
 		<script src="config.js"></script>
 
-		<!-- Scripts  -->
-		<script src="assets/js/layout.js"></script>
-		<script src="assets/js/theme.js"></script>
-		<script src="assets/js/time.js"></script>
-		<script src="assets/js/greeting.js"></script>
-		<script src="assets/js/weather.js"></script>
-
-		<!-- Generators  -->
-		<script src="assets/js/buttons.js"></script>
-		<script src="assets/js/lists.js"></script>
+    <!-- Scripts  -->
+    <script src="assets/js/layout.js"></script>
+    <script src="assets/js/time.js"></script>
+    <script src="assets/js/greeting.js"></script>
+	<script src="assets/js/weather.js"></script>
+	<script src="assets/js/theme.js"></script>
+    <script src="assets/js/title.js"></script>
+
+    <!-- Generators  -->
+    <script src="assets/js/buttons.js"></script>
+    <script src="assets/js/lists.js"></script>
 
 		<!-- Icons -->
 		<script>