Set the theme of a website based on the time of the day (no external library)
In this blog post, I will show you how to use JavaScript, and CSS to set the theme of your website based on the time of day. This can be a useful feature if you want to create a website that automatically switches between a light and dark theme based on the time of day. By the end of this post, you will have a website that automatically changes its appearance based on the time of day, creating a more dynamic and engaging user experience.
Before we move on, remember you can implement your websites or landing pages with or without coding on DoTenX for free. Make sure to check it out and even nominate your work to be showcased there as well.
First, we will create two CSS stylesheets, one for the light theme and one for the dark theme. These stylesheets will define the colours and other styles that will be used on the website.
|
1 2 3 4 |
<span class="c">/* light.css */</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* dark.css */</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="p">}</span> |
Next, we will use JavaScript to detect the current time of day and apply the appropriate stylesheet to the element of the HTML page.
|
1 2 3 4 5 6 7 8 |
<span class="cp"><!DOCTYPE html></span> <span class="nt"><html></span> <span class="nt"><head></span> <span class="nt"><title></span>Time-Based Theme Example<span class="nt"></title></span> <span class="nt"><script></span> <span class="c1">// Get the current time</span> <span class="kd">var</span> <span class="nx">date</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">();</span> <span class="kd">var</span> <span class="nx">hour</span> <span class="o">=</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getHours</span><span class="p">();</span> <span class="c1">// Apply the light or dark stylesheet based on the time of day</span> <span class="k">if</span> <span class="p">(</span><span class="nx">hour</span> <span class="o">>=</span> <span class="mi">6</span> <span class="o">&&</span> <span class="nx">hour</span> <span class="o"><</span> <span class="mi">18</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// If the time is between 6am and 6pm, use the light theme</span> <span class="kd">var</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">link</span><span class="dl">"</span><span class="p">);</span> <span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">rel</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">stylesheet</span><span class="dl">"</span><span class="p">);</span> <span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">type</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">text/css</span><span class="dl">"</span><span class="p">);</span> <span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">light.css</span><span class="dl">"</span><span class="p">);</span> <span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">link</span><span class="p">);</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="c1">// Otherwise, use the dark theme</span> <span class="kd">var</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">link</span><span class="dl">"</span><span class="p">);</span> <span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">rel</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">stylesheet</span><span class="dl">"</span><span class="p">);</span> <span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">type</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">text/css</span><span class="dl">"</span><span class="p">);</span> <span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">dark.css</span><span class="dl">"</span><span class="p">);</span> <span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">link</span><span class="p">);</span> <span class="p">}</span> <span class="nt"></script></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="nt"><h1></span>Time-Based Theme Example<span class="nt"></h1></span> <span class="nt"><p></span>This page demonstrates how to use JavaScript, HTML, and CSS to set the theme of a website based on the time of day.<span class="nt"></p></span> <span class="nt"></body></span> <span class="nt"></html></span> |
In this example, we use the Date object in JavaScript to get the current time, and then we use an if statement to determine whether the time is between 6am and 6pm. If it is, we apply the light theme stylesheet, and if it is not, we apply the dark theme stylesheet.
You can adjust the times and styles to suit your needs, and you can also use additional stylesheets and JavaScript code to create more complex and sophisticated themes for your website.