Как перехватить кнопку “назад” браузера?

В комментариях верно написали, что ответ кроется не в перехвате события "назад" у браузера, а сохранении состояния страницы

Например, пользователь может изменить тему страницы. Что бы при возвращении на эту страницу, была выбрана нужная тема, сохраним ее в localStorage

const savePageState = (name, state) => {
    localStorage[name] = state;
}
const loadPageState = (name) => {
    return localStorage[name];
}

Дальше, при нужных вам событиях, вы просто сохраняете в localStorage нужные вам данные, а при загрузке страницы (onload событие, например) выгружаете нужные данные и используете их

Раз пользователь может изменить вид страницы, значит, работает javascript. В нем надо при обработке пользовательских действий подменить последний элемент в истории браузера, чтобы возврат происходил уже на указанную вами страницу (или тот же адрес, но с параметрами).

Вот пример.

Код скрипта:

$('.portfolio_filter').each(function(){
    var $this_filter = $(this);
    $this_filter.on('click', 'a', function(){
        var project_type = $(this).data('optionValue').slice(1);
        var url = window.location.href;
        if (url.indexOf('?') >= 0) {
            url = url.slice(0, window.location.href.indexOf('?'));
        }
        if (project_type) {
            url = url + '?type=' + project_type;
        }
        // console.log('url: ' + url);
        window.history.replaceState(null, document.title, url);
        return false;
    });
});

При клике не кнопку на странице в историю дописывается url типа http://sws-group.zephyrlab.ru/projects/?type=commercial После просмотра проекта категории commercial возврат идет уже на url с ?type=commercial.