О том, как сделать темную тему, есть отличный гайд по Material. Они описывают как именно необходимо расчитывать цвета, и как именно их применять. Основная задача, это найти базовый цвет, от которого будешь крутиться. Это позволит сделать цветовую палитру наиболее подходящей.
https://material.io/design/color/dark-theme.html#propertiesРазличные калькуляторы, которые мне пригодились
https://www.color-hex.com/https://contrast-ratio.com/https://contrast-finder.tanaguru.com/http://hex2rgba.devoth.com/Простой механизм, использующий css variables, который позволяет делать тему динамической
https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8А о том, как создавать эти переменные, то я сделал следующим образом.
Создал файл с набором переменных для светлой темы, и обычными регулярками начал их выносить из проекта, вытягивая их по определенному контексту. Например, черный текст на красной кнопке и черный текст на зеленой кнопке помещены в разные переменные. Это важно, чтобы иметь возможность подтюнить.
Далее, создал новый файл, который был идентичен первому, но регистрировал значения для тех же переменных, но для темной темы. И начал расчитывать цвета в точности, как это написано в первой ссылке.
И конечный этап, проверял, что везде все норм отображается. Если находились какие-то недочеты, то очень быстро их исправлял, но их было не много.
На все это у меня ушло не больше 3ех рабочих дней.
