/* bw.css Quick site-wide black-and-white theme. Usage: and toggle by adding/removing class "bw" on Example: ... This approach uses CSS filter for images and overall page. It's non-destructive and easiest. */ html.bw { -webkit-filter: grayscale(100%) contrast(100%) brightness(98%) !important; filter: grayscale(100%) contrast(100%) brightness(98%) !important; background-color: #ffffff !important; color: #000000 !important; } /* Make sure images, video and svg are grayscale too */ html.bw img, html.bw video, html.bw picture, html.bw svg, html.bw canvas { -webkit-filter: grayscale(100%) contrast(100%) brightness(100%) !important; filter: grayscale(100%) contrast(100%) brightness(100%) !important; opacity: 1 !important; } /* Links: darken so they remain visible */ html.bw a, html.bw a:visited { color: #000000 !important; opacity: 0.9 !important; } /* Buttons and form controls: ensure readable */ html.bw button, html.bw input, html.bw select, html.bw textarea { color: #000 !important; background-color: #fff !important; border-color: #000 !important; box-shadow: none !important; } /* Remove obvious colorful shadows, glows and backgrounds */ html.bw * { text-shadow: none !important; box-shadow: none !important; background-image: none !important; } /* Reduce the effect on SVG icons that are filled with currentColor by forcing color */ html.bw svg * { fill: #000 !important; stroke: #000 !important; } /* Avoid transitions that may show colored flashes */ html.bw, html.bw * { transition: none !important; }