Dark-Light: Auto Theme Changer based on Local Sunset Time


You would have seen some of your apps (e.g. Google Maps), laptop background screens (like in a Mac) automatically change background color/overall theme from light to dark mode by the time its evening and change back in the morning.

How cool would it be if we could do something like this on your UI5 app?

End Result:


Dark and Light mode

The idea is something like – once the app loads, it gets your geo-location, then based on it it identifies the sunset time for that location and if your current time is greater than the sunset time, change to Dark Theme else Light Theme.


Since the app is completely based on your geo-location, you don’t need to have any country specific coding to find sunset time or change the mode, etc.

Also take a use-case for a user who is spending a lot of time on the application and loses track of time – this is a very good visual aid to let him/her know that its evening/past sunset.

Technical Approach:

We are using window.navigator.geolocation to find your co-ordinates and using the open source sunrise-sunset api to get the sunset time of that geo-location.

To start with, say we have a function fnChangeTheme which we will call once our first view is rendered and we call this every minute to keep checking if our time has crossed sunset time or not.

onAfterRendering : function() { //Code for fnChangeTheme() . . . //Check every minute for location/sunset change setInterval(function () { fnChangeTheme() }, 60000); }

Now what is our fnChangeTheme() function?

We simply call the navigator.geolocation.getCurrentPosition() function with fnGetSunset as our callback on what should happen after getting our current position.

function fnChangeTheme() { //Get the current position and pass it to fnGetSunset() if GeoLocation is supported if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(fnGetSunset); } else { //If we do not allow Geo-location for the browser/page alert("Geolocation is not supported by this browser."); } }

fnGetSunset accepts the current position and calls the open source sunrise-sunset api taking into consideration the location passed and we are just concerned on the sunset time returned.

Just for a quick rough code – if the current time hours is greater than or equal to the sunset time hours, this means we have crossed sunset, so change the theme to the dark theme, else change it to light theme.

function fnGetSunset(position) { console.log(position); var lat = position.coords.latitude; var long = position.coords.longitude; $.getJSON('https://api.sunrise-sunset.org/json?lat=' + lat + '&lng=' + long + '&formatted=0&callback=?', function (data) { console.log(data); var currentHrs = new Date().getHours(); console.log("CurrentHrs: " + currentHrs); var sunsetHrs = new Date(data.results.sunset).getHours(); console.log("Sunset:" + sunsetHrs); //if Current Hrs is <= Sunset Hrs, then light theme else dark theme if (currentHrs <= sunsetHrs) { sap.ui.getCore().applyTheme("sap_fiori_3"); } else { sap.ui.getCore().applyTheme("sap_fiori_3_dark"); }; }); } 

And that’s pretty much it.


There are many improvement points in the coding or better approaches, but this is just one crude way to get an idea in place. Open for suggestion on how to enhance or better the approach.

The code is available on GitHub

Happy Learning!