Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

lewisdoesstuff
Copy link
Contributor

@lewisdoesstuff lewisdoesstuff commented Mar 18, 2022

This should have been 2 PR's! You caught me off-guard with that refactor commit and I messed up my merge :/

🌙 Automatic theme switching from location

  • Use lat/long | browser location data to automatically set light/dark mode.
  • Sunrise/sunset is already returned in the openweathermap API, so this is fairly simple.
  • Converted the functions in weather.js to async as opposed to using .then chains

🔤 Customizable titles

Currently, changing the title isn't too difficult but it's a bit more annoying to do in Docker.

  • Added a script to set the window's title from a value set in config.js

This could be in the <head> but a file fits the style.

 - Customizable titles through a very small script to change the window's title. 

 - Configurable with a value in config.js 

This could be in the <head> but a script fits the pattern.
Use lat/long | browser location data to automatically set light/dark mode. 

Sunrise/sunset is already returned in the openweathermap API, so this is fairly simple.

Converted the functions in weather.js to async as opposed to using .then chains
@lewisdoesstuff lewisdoesstuff changed the title 🔤 Added customizable title support 🔤 Added customizable title support and 🌙 Automatic dark mode switching (sunrise/sunset) Mar 19, 2022
@@ -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',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't see anywhere this was called, weather.temperature is now the value

@migueravila
Copy link
Owner

Hi! @lewisdoesstuff I loved the title feature. But the Automatic theme switch is already implemented here!

@lewisdoesstuff
Copy link
Contributor Author

Ah, that would have saved me a while.
Does this sync the theme from location automatically, or just pull it from the OS's theme?

I don't use auto light/dark on my OS, but I do toggle light mode in the day on Bento; I assume I'm not the only one who does this so I thought it'd be useful

Configurable through config.js, this just sets the CSS variable to the provided URL. Defaults to ./assets/background.jpg. 

Again, this is more for convenience when running in docker as it's not as easy to just swap the file.
Added support for custom themes without editing the main app.css file. 

Themes configurable through config.js, with several pre-included themes. 

Some of these don't map particularly well to the limited selection of colors we use, but I've done what i can to match them.

Some themes only have a dark mode variant, so this is copied onto the light theme as well.
@migueravila
Copy link
Owner

Hi @lewisdoesstuff I love the location automatically change but some people just needs to change it at the time they want and having two automatically change features can be confusing. I'll accept the PR for the custom title feature (And I'll read the other PR you have) Thank you!

@lewisdoesstuff
Copy link
Contributor Author

Sounds good! Not a problem.

I'm maintaining my own fork at lewisdoesstuff/bento-next with any features that are out of the scope of this, feel free to grab anything you think fits!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants