Меняем светлую тему на темную (или любую другую)

26 января 2021

Для того, чтобы изменить оформление страницы со светлой на темную, добавьте на нее HTML-блок подобного типа:

<style>
.page-wrapper, .page-footer, .page-header, .page-main, .menu, .blog.-masonry .inner, .menu-list .submenu .submenu-list {
   background: #1e1e1e;
   color: #fff;
}
h1, h2, h3,
.wysiwyg a,
.menu-list .menu-item > .link,
.blog .caption > .title,
.blog .caption > time,
.blog .caption > .description {
   color: #fff;
}
.labeled-divider-section .label,
.labeled-divider > .label {
   background: #2f2f2f;
   color: #8b8b8b;
}
.labeled-divider-section,
.page-header {
   border-bottom: 1px solid #2f2f2f;
}
.share-button:hover, .share-button:active,
.social-links > .item > .link:hover, .social-links > .item > .link:active,
.menu-list .menu-item:hover > .link, .menu-list .menu-item.-active > .link {
   color: #fff;
   opacity:1;
}
.share-button, 
.social-links > .item > .link,
.menu-list .menu-item > .link, .menu-list .menu-item > .link {
   color: #fff;
   opacity:0.5;
}
.menu-button span,
.menu-button span:before,
.menu-button span:after,
.menu-list > .menu-item:before {
   background:#fff !important;
}
</style>

При этом вы можете заменить цвета в этом примере на свои (воспользовавшись поиск/замена):

#1e1e1e — цвет фона
#fff — цвет текста
#2f2f2f — цвет линий, отсекающих меню и подложки на лейбле как на этой странице «Моды для Wfolio.ru»
#8b8b8b — цвет текста на лейбле «Моды для Wfolio.ru»

Возможно какие-то особые элементы, используемые на вашей странице не перекрасятся. Напишите мне — я добавлю и для них новые стили.

Проблема логотипа

Возможно ваш логотип не адаптировал для инвертированной цветовой схемы. Тогда вам надо его переделать, добавить на страницу блок «Изображение» (самый первый — одиночное во всю ширину) и загрузить туда инвентированный логотип.

Меняем светлую тему на темную (или любую другую). Фотограф Константин Шамин

Теперь вам надо узнать уникальный ID строки, где размещен новый логотип. В моем случае это #section-1635564

После этого необходимо дописать в стили, заменив #section-1635564 на свой ID строки:

#section-1635563 {
  visibility: hidden;
  max-height: 1px !important;
  margin: 0 !important;
}
.logo-image {
   display: none;
}

И добавить javascript код:

<script>
$( document ).ready(function() {
   $('#section-1635564 img').on('load',function(){
      var new_logo = $("#section-1635564 img").prop('src');
      $(".logo-image").attr("src",new_logo);
      $(".logo-image").attr("data-src",new_logo);
      $(".logo-image").attr("data-srcset",new_logo);
      $(".logo-image").attr("srcset",new_logo);
      $(".logo-image").css("display","block");
   });
});
</script>

Итого весь HTML-блок должен выглядеть следующим образом (вариант с заменой логотипа):

<style>
.page-wrapper, .page-footer, .page-header, .page-main, .menu, .blog.-masonry .inner, .menu-list .submenu .submenu-list {
   background: #1e1e1e;
   color: #fff;
}
h1, h2, h3,
.wysiwyg a,
.menu-list .menu-item > .link,
.blog .caption > .title,
.blog .caption > time,
.blog .caption > .description {
   color: #fff;
}
.labeled-divider-section .label,
.labeled-divider > .label {
   background: #2f2f2f;
   color: #8b8b8b;
}
.labeled-divider-section,
.page-header {
   border-bottom: 1px solid #2f2f2f;
}
.share-button:hover, .share-button:active,
.social-links > .item > .link:hover, .social-links > .item > .link:active,
.menu-list .menu-item:hover > .link, .menu-list .menu-item.-active > .link {
   color: #fff;
   opacity:1;
}
.share-button, 
.social-links > .item > .link,
.menu-list .menu-item > .link, .menu-list .menu-item > .link {
   color: #fff;
   opacity:0.5;
}
.menu-button span,
.menu-button span:before,
.menu-button span:after,
.menu-list > .menu-item:before {
   background:#fff !important;
}
#section-1635563 {
  visibility: hidden;
  max-height: 1px !important;
  margin: 0 !important;
}
.logo-image {
   display: none;
}
</style>

<script>
$( document ).ready(function() {
   $('#section-1635564 img').on('load',function(){
      var new_logo = $("#section-1635564 img").prop('src');
      $(".logo-image").attr("src",new_logo);
      $(".logo-image").attr("data-src",new_logo);
      $(".logo-image").attr("data-srcset",new_logo);
      $(".logo-image").attr("srcset",new_logo);
      $(".logo-image").css("display","block");
   });
});
</script>