CSS инверсия по мотивам вебстандартов

В последнее время из за jetlag’a много провожу времени за компьютером в номере в кромешной тьме. На дворе 5 утра, мне уже не спится, свет в номере включить не могу, так как я не один. Читать черное по белому и переключаться в IDE с темным фоном прям напрягает.

Решил найти компонент для включения темной темы страниц в браузере. Нашел. Поставил… Сразу начал выть кулер. Полез смотреть код темы — много JS кода, хотя суть же проста — сделать инверсию. Не понравилось, что кто-то будет майнить или еще что делать у меня в браузере в оплату такого простого расширения.

Вспомнил, что в подкасте Вбестандартов Vadim Makeev рассказывал про то, как сделать темную тему на чистом CSS. Нашел статью:

https://medium.com/web-standards/a-theme-switcher-96174d95be75

Вся суть темы сводится к следующим строкам:

:root { 
background-color: #fefefe;
filter: invert(100%);
}
* { 
background-color: inherit;
}
img:not([src*=".svg"]), video {  
filter: invert(100%);
}

Расширение писать не стал, ведь для рабочей MVP достаточно сделать букмарклет. Код букмарклета готовый для встраивания и его девелоп версия:

https://gist.github.com/frontdevops/8aea1e0252dd826488dad63319e3ec88

Букмарклет можно красиво назвать используя UTF8 графику или эмодзи. В итоге получится что-то такое:

utf8 графика и эмодзи создают эффект кнопки

Ну и результат работы такого импровизированного “расширения”:

Результат работы плагина

Код точно работает в Chrome на десктопе, остальное уже за вами. Расширение, допиливание фич (если они нужны) и так далее. Мою задачу эта штука вполне решает 😉