CODEWITHSUNDEEP
html
DR.KGB
DR.KGB

Reputation: 13

how to make a html page change background color acording to time

I am making an asset for a digital signage (pi signage) to display the weather on a TV along with other stuff and I would like the page automatically switching to a 'dark mode' during night but my digital signage software doesn't let me add a folder so only the html file can by upload and use. Can someone help me?

Because I am new to html code I tried to google the problem but couldn't find the answer other random stuff with any success

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Weather at Le thillay for piSignage</title>
    <script src="https://cdn.rawgit.com/maxdow/skycons/master/skycons.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet"/>

<style>
    html, body {
    font-size: 40px; 
    height: 100%;
    width: 100%;
    margin: 0;
    color: white;
    font-family: "Lato", sans-serif;
    background: linear-gradient(to top, rgb(15, 45, 80), rgb(25, 134, 223));
</style>

So I would like the background line to change to something like: background: linear-gradient(to top, rgb(102, 102, 102), rgb(43, 41, 41)); after the sunset an return to the blue gradient in the morning

Upvotes: 0

Views: 96

Answers (1)

Kulshreshth K
Kulshreshth K

Reputation: 1176

You can use javascript/jquery for it like this:

if(sunset == true){
  $('body').css({
    background: "linear-gradient(to top, rgb(102, 102, 102), rgb(43, 41, 41))" 
  });
}else if(morning == true){
  $('body').css({
    background: "linear-gradient(to top, rgb(15, 45, 80), rgb(25, 134, 223))" 
  });
}

you need to workout the logic for finding the sunset and morning ;)

Warning: Did not tested the code.

Upvotes: 1

Related Questions