Websites That Can Be Switched From Light Mode To Dark Mode

A method to switch from your default website colour scheme to a darker one.

Hit the 'mode' button above to see it in action.

The concept behind dark mode is a reduction of light emitted by screens on your devices while ensuring the minimum colour contrast ratios are required to make the content easily readable.

Dark mode does not mean that black and white have to be used. The best options are a combination made up from off black and / or dark colours with off white and / or light colours.

At the end of the day it is your website so you can choose whatever colour options you prefer.

Features: to see the difference use the mode button above

  • Darkening of backgrounds with lighter text and darkening images
  • Smooth transition on selected elements when switching
  • User preference retained when navigating through different pages of a website
Dark mode website example
Use the mode switch above to see this photo in dark mode light mode


  • It is claimed that energy consumption is saved on devices with OLED or AMOLED displays
  • Visibility improvement for users with eyes that are sensitive to bright light
  • Trending for 2021

Is this for you?

It depends if you like it. If you do we suggest you have the first mode in your corporate colours and the second in a darker mode.


  • Light mode only - this being your corporate colour scheme if it is not dark
  • Dark mode only
  • Light mode switchable to dark mode
  • Dark mode switchable to light mode

Whichever you prefer you can have colours and shades of your choice.

Dark Mode Website Example have a website that was originally built using a dark colour scheme as many most people suffering from Miller Fisher Syndrome have light sensitive eyes.

A light mode was added meaning it will switch from dark to light as opposed from light to dark.

To see this working example hit the button below.