Time is after

CSS style theme switcher

What does this thing do?

6 times a day, the body will change to a different class name. In the css file CSSTimeSwitch.css will be defined what has to change.

  1. after 01:00 => class .night
  2. after 07:00 => class .morning
  3. after 11:00 => class .noon
  4. after 13:00 => class .afternoon
  5. after 17:00 => class .late-afternoon
  6. after 20:00 => class .evening

The class names are changed with a javascript, if javascript is disabled the general style will be used.

How does it work

  1. Insert the javascript and css in your html page
  2. Define your styles in CSSTimeSwitch.css
  3. I have used the css gradients to change to background color
  4. Have fun