Grayscale Web Pages with CSS

Updated 20-Sep-2023

In Thailand, due to a period of mourning on the death of the King of Thailand, many websites have removed color and gone black-and-white (grayscale) for home pages, and some for all pages. There is a fairly easy way to do this with CSS, with the exception of images used as background images in CSS (for those I recommend generating a new background image, and for YouTube thumbnails).

/* make everything gray */
a {color: #aaa !important;}
a:hover, a:focus {color: #000 !important;}
img {-webkit-filter: grayscale(100%) !important;filter: grayscale(100%) !important;}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.nav .navbar-default .navbar-nav > li > a {color: #aaa;}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {color: #000 !important;}