Ночной режим для форума

[Yafetius]

На некоторых сайтах (например, storyinsta.com) встречал переключатель для «ночного режима». По клику без перезагрузки страницы подменяются классы css (через important!, походу).

Существуют ли решения для xenforo? Или хотелось бы узнать, с помощью каких средств это делается.

Делать отдельную тему несколько накладно, т.к. при каждой правке придется редактировать обе темы.

 

[Smalesh]

накладно

Зато можно нормально отстроить цвета. И не накладно, делается две дочерних темы от родителя, правится родитель, в дочерних только цвета, стили, лого и т.д.
А затем дефолтный можно переключать часовому поясу юзверя.

 

[Darkensand]

Yafetius, Сделайте стандартный стиль черным фоном, поставьте переключатель!

 

[West14]

Darkensand,

Как же иногда не хватает реакции ?‍

 

[CrazyCort]

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[nictic123]

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Skaiman]

Первый плагин не пробовал, второй тестил, не понравился, много настроек лишних и работает как то не понятно :) еще один есть для переключения стилей, тоже не понравился. В теме стиля UI.X Pro давал код переключателя, потом для себя его переделал, что бы ссылка не отображалась при наведении :) длинная не красивая.
Yafetius, короче так, выше написали про дочерние, вот на примере того же UI.X Pro структура стилей получается такая:

Для редактирования стили UI.X Pro Child и UI.X Pro Dark Child, во втором только цветовая палитра темная, а все основные изменения вносятся только в первый. Стили UI.X Pro и UI.X Pro Dark только для обновления, когда выйдет новая редакция стиля для новой версии движка.
Теперь про переключатель, делаем модификацию шаблона PAGE_CONTAINER, используем регулярное выражение:
Найти:

/<xf:if is="\$xf\.visitor.canChangeStyle().*?<\/li>/s

Заменить:

$0
<xf:if is="{$xf.visitor.style_id} == 8">
    <xf:set var="$svgStyleSwitchHref" value="{{ link('misc/style', null, {'style_id': 9,'_xfRedirect': $xf.fullUri,'t': csrf_token()}) }}" />
    <xf:set var="$svgStyleSwitchIcon" value="fa-lightbulb" />
<xf:elseif is="{$xf.visitor.style_id} == 9" />
    <xf:set var="$svgStyleSwitchHref" value="{{ link('misc/style', null, {'style_id': 8,'_xfRedirect': $xf.fullUri,'t': csrf_token()}) }}" />
    <xf:set var="$svgStyleSwitchIcon" value="fa-lightbulb-on" />
</xf:if>

<li data-xf-init="tooltip" title="Переключить стиль">
    <a onclick='javascript:document.location.href="{$svgStyleSwitchHref}"'>
        <xf:fa icon="{$svgStyleSwitchIcon}" />
    </a>
</li>

Меняет id стилей на свои, у меня 8 - темный стиль, 9 - светлый, если у пользователя светлый, то переключатель на темный, так как то :)

 

[HAIM]

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Skaiman, а вот этот сценарий ты тестил?

<xf:if is="{$xf.visitor.style_id} == 1 OR {$xf.visitor.style_id} == 'default'"> — стиль по дефолту, в моём случае светлый, и его айди (По умолчанию гость, который впервые заходит на сайт, использует стиль default, после чего в случае выбора стиля, работают условия с числовыми айди. Без этого уточнения у новых посетителей не будет отображаться иконка, пока они не выберут какой-то стиль в футере и движок это не запомнит).

 

[Skaiman]

HAIM, я не видел тот материал. Условие с дефолтным стилем вроде как лишнее, посетитель его и так видит, когда впервые заходит, можно просто добавить условие скрытия от гостей, пока не зарегался, не можешь переключать.

Так то есть основа, а допилить всегда можно под свои нужды, у меня там тож не все гладко :)

 

[HAIM]

Skaiman, ну хз, может в последней версии ксенфоро что-то и поменяли, но у меня на 2.1.5 в инкогнито у пользователя юзается айди стиля 0. Как в этом случае будет работать условие вида айди_стиля=1, я не совсем понимаю

 

[Skaiman]

Да, надо добавить для дефолтного стиля условие

|| {$xf.visitor.style_id} == 'default'

HAIM, у меня форум не рабочий, такие мелочи могу упустить, потестил, ответил на вопрос и забыл, не возникло других вопросов по ответу, совсем забыл, возникли, проверил, доработал :)

HAIM, возьми собери все в плагин, с выбором отображения переключателя в настройках, в хейдере или в футере, мне чет лень :)

 

[HAIM]

HAIM, возьми собери все в плагин, с выбором отображения переключателя в настройках, в хейдере или в футере, мне чет лень :)

Я не умею плагины собирать :) А учиться ленивенько

 

[Yafetius]

Вроде бы есть какое-то решение чисто на css, с использованием конструкции [data-theme=dark].

Об этом на хабре: habr.com/ru/post/466587/

Собственно, на сайте storyinsta.com это и реализовано. В самом конце css: storyinsta.com/css/tbg1.min.css

И сама переключалка в html:

<div class="custom-control custom-switch">
            <label class="switch">
                <input type="checkbox" class="custom-control-input" id="darkSwitch" />
                <span class="slider round"></span>
            </label>
            <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>

Попробую, отпишусь. Только не совсем ясно, как браузер запоминает эту переключалку.

 

[Skaiman]

Yafetius, это не очень хороший подход, два стиля лучше, по тому способу, как я понимаю, снесены практически все переменные и настраивать будешь только в шаблоне стиля, потом подумай об обновлениях. Не все на хабре надо считать неоспоримым правильным ходом :)

 

[CrazyHackGUT]

не совсем ясно, как браузер запоминает эту переключалку

Никак. По ссылке, которую Вы же и привели, есть демка. На ней посмотрите, и увидите, что ничего не запоминается.

Сделайте уже двумя отдельными стилями. Не морочьте никому голову. Это наиболее простой способ.

 

[Skaiman]

И сама переключалка в html:

Поверь, тебе советуют наиболее правильное решение, кто там что мутит не важно, только они потом сидят на старых версиях, без возможности обновления, так как намутили всего, по хабру :)

 

[Yafetius]

Никак. По ссылке, которую Вы же и привели, есть демка.

В демке никак. А на реальном сайте (storyinsta.com) запоминается. Можно опробовать на этих страницах:

1. storyinsta.com
2. storyinsta.com/site/howtouse
3. storyinsta.com/blog/how-to-download-best-stories

Ну, я попробую и с дочерними стилями, и так. Вообще хотелось бы понять, как оно работает, и применять не только на форуме.

 

[Skaiman]

Но там же не xenforo, для чего приводить пример из другой оперы.

Вообще хотелось бы понять, как оно работает

Изучай html, css, js, php и разберешься

HAIM, там надо условие не для визитера делать, а для стиля

<xf:if is="{$xf.style.style_id} == 8">

это условие компилирует код только в определенных стилях тогда, по идеи можно делать модификации, исключающие не нужные стили

<xf:if is="{$xf.style.style_id} == 8">
    <xf:set var="$svgStyleSwitchHref" value="{{ link('misc/style', null, {'style_id': 9,'_xfRedirect': $xf.fullUri,'t': csrf_token()}) }}" />
    <xf:set var="$svgStyleSwitchIcon" value="fa-lightbulb" />
<xf:elseif is="{$xf.style.style_id} == 9" />
    <xf:set var="$svgStyleSwitchHref" value="{{ link('misc/style', null, {'style_id': 8,'_xfRedirect': $xf.fullUri,'t': csrf_token()}) }}" />
    <xf:set var="$svgStyleSwitchIcon" value="fa-lightbulb-on" />
</xf:if>
<xf:if is="{$xf.style.style_id} == 8 || {$xf.style.style_id} == 9">
    <li data-xf-init="tooltip" title="Переключить стиль">
        <a onclick='javascript:document.location.href="{$svgStyleSwitchHref}"'>
            <xf:fa icon="{$svgStyleSwitchIcon}" />
        </a>
    </li>
</xf:if>

В принципе и массив должен прокатить

<xf:if is="in_array({$xf.style.style_id}, [8, 9]) ">