Динамичное изменение цвета иконок в темах Bootstrap
Светлая, темная или ч/б тема для сайта в 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;
…
}
