Как корректно вставлять картинки в темную / светлую тему?

Question

[by_ultra]

Делаю сайт со сменой темной темы на светлую и на оборот при помощи переключателя.
Возник вопрос со вставкой картинок. Для каждой из тем свои картинки, который адаптированы под светлый и темный макет.
Картинки вставляю через background-image.
В переменных закинуты картики --banner-mobile-320: url('../images/banner-dark-mobile-320.png');
По макету задействованы брейкпоинты 320, 428,768, 1440 и 2560.
Вопрос заключается в следующем. Верное ли это решение? Так как не будет возможности замены картинки через админку.
Да и поведение картинок через background-size: cover / content не совсем нравится. Может кто-то из гуру посоветует, как быть в данном случае?
Образец:

Comments

[Ankhena]

Используйте кастомные свойства и меняйте через админку как душе угодно.

<div class="some-class" style="--bgi-dark: url(dark1.png); --bgi-light: url(light1.png)">блок 1</div>
<div class="some-class" style="--bgi-dark: url(dark2.png); --bgi-light: url(light2.png)">блок 1</div>

.dark .some-class {
  background: var(--bgi--dark);
}
.light some-class {
  background: var(--bgi--light);
}

Если админка не нужна, то вообще через одну переменную.

Answer 1

[oink]

Не очень понятно, почему не будет возможности менять через админку (как и зачем это вообще украшательства сайта через админку менять, но это ладно, это больше вопрос к заказчикам). Весь контекст из такой постановки задачи не ясен, но навскидку можно заводить по 2 переменных с фонами для каждого такого места, примерно так:

--banner-mobile-320-dark: url('../images/banner-dark-mobile-320.png');
--banner-mobile-320-light: url('../images/banner-light-mobile-320.png');

При переключении темы наверняка меняется/добавляется какой-то класс на весь body, исходя из этого можно уже каскадничать.
Или если это не правится, можно вешать на блоки два data-атрибута, заполняя их из админки теми же путями к бекграундам, и JSом подменять после переключения.

Answer 2

[kukaNuna]

Можно сделать 2 класса dark-theme и light-theme.

В зависимости от темы - вставлять класс в boby. А в стилях для одни и тех элементов прописать разные картинки в зависимости от класса dark-theme и light-theme.