Светлая, темная или ч/б тема для сайта в Bootstrap задается переменными:
[data-bs-theme="light"] {
--bs-body-color: #FFFFFF
--bs-body-bg: #212529;--bs-body-bg-rgb: var(--bs-body-bg);
}
Для введения своего базового цвета для меню, цвета иконок лого и подвала можно ввести свою переменную:
--base-color: #0dcaf0;
Таким образом, если вы используете в HTML коде страницы картинки в виде SVG-кода, то можно просто добавить правило CSS:
svg { fill: var(--base-color);}
Если же у вас часть картинки выполнена линиями, можно пометить её классом .stroke и дополнить CSS правилом:
svg.stroke { stroke: var(--base-color);}
Что делать, если у вас подключена библиотека иконок отдельным CSS-фалом и вы не хотите менять их цвета поштучно?
Например, имеется библиотека такого формата
a[href$=".pdf"]::after {
display: inline-block;content: "";
vertical-align: -.125rem;
background-image: url("...");
background-repeat: no-repeat;
background-size: 1.5rem 1.5rem;
margin-left: .5rem; width: 1.5rem; height: 1.5rem;
}
Добавляем в базовый CSS переменную типа --icon-saturate
:root {
...
--icon-saturate:1;
...
}
в описание класса иконки добавляем правило filter: saturate(var(--icon-saturate))
a[href$=".pdf"]::after {
display: inline-block;content: "";
vertical-align: -.125rem;
background-image: url("...");
background-repeat: no-repeat;
background-size: 1.5rem 1.5rem;
margin-left: .5rem; width: 1.5rem; height: 1.5rem;
filter: saturate(var(--icon-saturate));
}
А в тему добавляем добытое опытным путем через F12 смещение цвета, например:
[data-bs-theme="light"] {
...
--icon-saturate:175;
...
}
