Habr<p>Динамичное изменение цвета иконок в темах Bootstrap</p><p>Светлая, темная или ч/б тема для сайта в Bootstrap задается переменными: [data-bs-theme="light"] { --bs-body-color: <a href="https://zhub.link/tags/FFFFFF" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FFFFFF</span></a> --bs-body-bg: #212529;--bs-body-bg-rgb: var(--bs-body-bg); } Для введения своего базового цвета для меню, цвета иконок лого и подвала можно ввести свою переменную: --base-color: <a href="https://zhub.link/tags/0dcaf0" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>0dcaf0</span></a>; Таким образом, если вы используете в 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 смещение цвета, например:</p><p><a href="https://habr.com/ru/articles/891458/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">habr.com/ru/articles/891458/</span><span class="invisible"></span></a></p><p><a href="https://zhub.link/tags/bootstrap" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>bootstrap</span></a> <a href="https://zhub.link/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a> <a href="https://zhub.link/tags/theme" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>theme</span></a></p>