XenForo - Переключатель стилей | Fi4a.ru - Информационный Портал

Делаем две модификации:

Шаблон: PAGE_CONTAINER
Ключ модификации: style_changer_nav
Описание: Переключение стилей
Тип поиска: Простая замена
Найти:

PHP:

<div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}">

Заменить:

PHP:

<xf:set var="$styleLight" value="2" /> <xf:comment>Светлый стиль. Указываем id стиля в значении value.</xf:comment>
<xf:set var="$styleDark" value="3" /> <xf:comment>Темный стиль. Указываем id стиля в значении value.</xf:comment>
<xf:set var="$styleTitle">
    <xf:if is="$xf.style.style_id == $styleLight">
        {{ {$xf.language.language_code} == 'ru-RU' ? 'Включить темный стиль' : 'Enable dark style' }}
        <xf:comment>Всплывающая подсказка в светлом стиле. Первое значение для русского языка, второе для английского и остальных языков</xf:comment>
    <xf:elseif is="$xf.style.style_id == $styleDark" />
        {{ {$xf.language.language_code} == 'ru-RU' ? 'Включить светлый стиль' : 'Enable light style' }}
        <xf:comment>Всплывающая подсказка в темном стиле. Первое значение для русского языка, второе для английского и остальных языков</xf:comment>
    </xf:if>
</xf:set>

<xf:if is="$xf.visitor.canChangeStyle()">
    <div class="p-navgroup p-discovery">
        <a href="{{ link('misc/style', null, {
                'style_id': $xf.style.style_id == $styleLight ? $styleDark : $styleLight,
                '_xfRedirect': $redirect,
                't': csrf_token()
            }) }}"
            class="p-navgroup-link style-changer"
            data-xf-init="tooltip" title="{$styleTitle}">
            <span class="style{{ $xf.style.style_id == $styleLight ? '-light' : '-dark' }}"></span>
        </a>
    </div>
</xf:if>
$0

Для модификации extra.less можно использовать четыре варианта:
Шаблон: extra.less
Ключ модификации: style_changer_nav_less
Описание: Переключение стилей
Тип поиска: Регулярное выражение
Найти:

Код:

#^.*$#su

Иконки Font Awesome, заменить:

Less:

$0
.p-navgroup-link.style-changer {
    span {
        &:before {
            .m-faBase();
        }
        &.style-light:before {
            .m-faContent(@fa-var-lightbulb-on);
        }
        &.style-dark:before {
            .m-faContent(@fa-var-lightbulb);
        }
    }
}

Кружки белый и черный, заменить:

Less:

$0
.p-navgroup-link.style-changer {
    span {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 2px solid @xf-publicHeader--color;
        border-radius: 50%;
        margin: -3px 0 -5px;
        &.style-light {
            background-color: #000;
        }
        &.style-dark {
            background-color: #fff;
        }
    }
}

Любая картинка по ссылке, заменить:

Less:

$0
.p-navgroup-link.style-changer {
    span {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: -3px 0 -5px;
        &.style-light {
            background: url('//i.imgur.com/zS34qkW.png') no-repeat center / contain;
        }
        &.style-dark {
            background: url('//i.imgur.com/8meXZhq.png') no-repeat center / contain;
        }
    }
}

Иконки Iconify - all open source icons in one framework, заменить:

Less:

$0
.p-navgroup-link.style-changer {
    span {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: -3px 0 -5px;
        &.style-light {
            background: url('//api.iconify.design/ri:sun-fill.svg?color=%23ffec8b') no-repeat center / contain;
        }
        &.style-dark {
            background: url('//api.iconify.design/ri:moon-clear-fill.svg?color=%23e4f1fe') no-repeat center / contain;
        }
    }
}

XenForo Переключатель стилей

Ещё ресурсы от Skaiman