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

README.md

@@ -1,3 +1,7 @@
+### :wave: Hey! If you're using this fork for theming, auto switching, or docker support, I'd recommend checking out [Bento-next](https://github.com/lewisdoesstuff/bento-next)
+
+Bento-next is my fork of Bento, entirely rewritten in Vue 3, with *many* more features that don't fit as well upstream. You can now host it with a Docker image, or on GitHub Pages.
+
 ![image](assets/img/header.png)
 
 <p style="margin: -20px 0 30px">
@@ -19,13 +23,16 @@
   - [🏡 As Home Page](#-as-home-page)
   - [➕ As New Tab](#-as-new-tab)
   - [🐬 In a Docker Container](#-in-a-docker-container)
+    - [Docker run](#docker-run)
+    - [docker-compose](#docker-compose)
 - [🎨 Customization](#-customization)
   - [👋 General: Name, Image Background and Greetings](#-general-name-image-background-and-greetings)
   - [📐 Layouts: Bento, Lists and Buttons.](#-layouts-bento-lists-and-buttons)
   - [🏷️ Buttons & Links](#️-buttons--links)
   - [📑 Lists & Links](#-lists--links)
   - [⛈️ Weather: Api Key, Icons and Unit](#️-weather-api-key-icons-and-unit)
   - [💛 Colors](#-colors)
+  - [🖌️ Custom Colors](#️-custom-colors)
   - [🌑 Auto change theme](#-auto-change-theme)
 
 
@@ -60,6 +67,8 @@ You can use different Add-ons/Extensions for it
 
 ### 🐬 In a Docker Container
 
+*Note: the current published docker image is built from the upstream repo.**
+
 You can run Bento in a Docker Container, either with `docker run`, or with the included `docker-compose` file.
 
 #### Docker run
@@ -83,8 +92,14 @@ To change the default name, the greetings and if you want to have an image backg
 ```js
  // General
   name: 'John',
-  imageBackground: false,
   openInNewTab: true,
+  twelveHourFormat: false,
+  title: 'Bento', 
+
+  // Theme
+  theme: 'bento',
+  imageBackground: false,
+  imageUrl: './assets/background.jpg', // Set custom background image URL. If the page is served insecurely, you may have issues loading images from pages over https.  
 
   // Greetings
   greetingMorning: 'Good morning!',
@@ -94,7 +109,7 @@ To change the default name, the greetings and if you want to have an image backg
 
 ```
 
-> You can change the background by substituting the `background.jpg` file in `assets` folder.
+> You can change the background by providing a link to an image in `config.js`.
 
 ![](assets/img/backgroundImage.png)
 
@@ -236,33 +251,73 @@ Finally just add them to the `config.js` file.
 
 ### 💛 Colors
 
-In the `app.css` file you can change the variables for both themes (Dark and Light):
+Bento supports custom theming with several pre-included presets to choose from!
+Change the current theme in `config.js`
+Included themes: 
+
+  - [Arc](https://github.com/horst3180/arc-theme)
+  - Bento (default)
+  - [Catppuccin](https://github.com/catppuccin/catppuccin) -- The full set of Catppuccin colors can be added to Bento using the themes found at [catppuccin/bento](https://github.com/catppuccin/bento)
+  - [Concept-Dark](https://www.deviantart.com/zb652/art/Concept-Dark-885878180)
+  - [Monokai (free)](https://monokai.pro/)
+  - [Nord](https://www.nordtheme.com/)
+  - Sakura
+  - [Solarized](https://ethanschoonover.com/solarized/)
+  - [Summer](https://github.com/JhonnyRice/summer)
 
-```css
-/* Light theme  */
 
+```js
+	// Theme
+	theme: 'bento',
+```
+### 🖌️ Custom Colors
+
+You can create your own themes by adding them to the `./assets/themes/` folder, with a `.css` extension!  
+Example:
+
+```css
 :root {
-  --accent: #61b0f1; /* Hover color */
-  --bg: #f5f5f5; /* Background color */
-  --sbg: #e4e6e6; /* Cards color */
+
+  /* Light Colors  */
+
+  --background: #f5f5f5; /* Background color */
+  --accent: #57a0d9; /* Hover color */
+  --cards: #e4e6e6; /* Cards color */
+
+  /* Fonts Color */
   --fg: #3a3a3a; /* Foreground color */
-  --sfg: #3a3a3a; /* Sceondary Foreground color */
-}
+  --sfg: #494949; /* Sceondary Foreground color */
 
-/* Dark theme  */
+  /* Image background  */
+  --imgcol: linear-gradient(
+    rgba(255, 255, 255, 0.7),
+    rgba(255, 255, 255, 0.7)
+  ); /* Filter color */
+}
 
 .darktheme {
-  --accent: #61b0f1; /* Hover color */
-  --bg: #19171a; /* Background color */
-  --sbg: #201e21; /* Cards color */
+  /* Dark Colors  */
+
+  --background: #19171a; /* Background color */
+  --accent: #57a0d9; /* Hover color */
+  --cards: #201e21; /* Cards color */
+
+  /* Fonts Color */
   --fg: #d8dee9; /* Foreground color */
-  --sfg: #3a3a3a; /* Secondary Foreground color */
+  --sfg: #2c292e; /* Secondary Foreground color */
+
+  /* Image background  */
+  --imgcol: linear-gradient(
+    rgba(0, 0, 0, 0.85),
+    rgba(0, 0, 0, 0.85)
+  ); /* Filter color */
 }
+
 ```
 
 ### 🌑 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 +331,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)

app.css

@@ -20,40 +20,10 @@
   --fg-list: 2vh; /* Links List */
   --icon: 3vh; /* Icon Size */
 
-  /* Fonts Color */
-  --fg: #3a3a3a; /* Foreground color */
-  --sfg: #494949; /* Sceondary Foreground color */
-
-  /* Light Colors  */
-  --accent: #57a0d9; /* Hover color */
-  --background: #f5f5f5; /* Background color */
-  --cards: #e4e6e6; /* Cards color */
-
-  /* Image background  */
-  --imgbg: url(assets/background.jpg); /* Image URL */
-  --imgcol: linear-gradient(
-    rgba(255, 255, 255, 0.7),
-    rgba(255, 255, 255, 0.7)
-  ); /* Filter color */
-}
-
-.darktheme {
-  /* Dark Colors  */
-  --accent: #57a0d9; /* Hover color */
-  --background: #19171a; /* Background color */
-  --cards: #201e21; /* Cards color */
-
-  /* Fonts Color */
-  --fg: #d8dee9; /* Foreground color */
-  --sfg: #2c292e; /* Secondary Foreground color */
-
-  /* Image background  */
-  --imgcol: linear-gradient(
-    rgba(0, 0, 0, 0.85),
-    rgba(0, 0, 0, 0.85)
-  ); /* Filter color */
 }
 
+
+
 /* 
 //  ┌─┐┌┬┐┬ ┬┬  ┌─┐┌─┐
 //  └─┐ │ └┬┘│  ├┤ └─┐

assets/js/theme.js

@@ -7,6 +7,17 @@ let darkTheme = localStorage.getItem('darkTheme');
 const themeToggle = document.querySelector('#themeButton');
 const bodyBackground = document.getElementById('#body');
 
+setTheme();
+
+function setTheme() { 
+	const theme = CONFIG.theme;
+	var link = document.createElement("link");
+	link.type = "text/css";
+	link.rel = "stylesheet";
+	link.href = `./assets/themes/${theme}.css`
+	document.head.appendChild(link);
+}
+
 const enableDark = () => {
 	document.body.classList.add('darktheme');
 	localStorage.setItem('darkTheme', 'enabled');
@@ -39,6 +50,8 @@ themeToggle.addEventListener('click', () => {
 });
 
 if (CONFIG.imageBackground) {
+	const root = document.querySelector(':root');
+	root.style.setProperty('--imgbg', `url(${CONFIG.imageUrl})`);
 	document.body.classList.add('withImageBackground');
 }
 
@@ -61,3 +74,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;
 }

assets/themes/arc.css

@@ -0,0 +1,36 @@
+:root {
+    /* Light Colors  */
+
+    --background: #F5F6F7; /* Background color */
+    --accent: #5294e2; /* Hover color */
+    --cards: #d9dde0; /* Cards color */
+
+    /* Fonts Color */
+    --fg: #5c616c; /* Foreground color */
+    --sfg: #ffffff; /* Sceondary Foreground color */
+
+    /* Image background  */
+    --imgcol: linear-gradient(
+      rgba(245, 246, 247, 0.7),
+      rgba(245, 246, 247, 0.7)
+    ); /* Filter color */
+  }
+
+  .darktheme {
+    /* Dark Colors  */
+
+    --background: #383C4A; /* Background color */
+    --accent: #4e5467; /* Hover color */
+    --cards: #22242d; /* Cards color */
+
+    /* Fonts Color */
+    --fg: #D3DAE3; /* Foreground color */
+    --sfg: #5294e2; /* Secondary Foreground color */
+
+    /* Image background  */
+    --imgcol: linear-gradient(
+      rgba(56 60, 74, 0.85),
+      rgba(56 60, 74, 0.85)
+    ); /* Filter color */
+  }
+