il faut un thème responsive et bien conçu.
à partir de là on ajoute ou enlève (toggle) juste la classe
wide sur l'élément html :
document.querySelector('#switcher-wide').addEventListener('click', function() {
document.documentElement.classList.toggle('wide')
})
https://gitlab.com/ubuntu-fr/code/ufr-cms/-/blob/master/static/js/app.js
cette classe définit simplement la largeur du contenu body (à ajuster si c'est un autre élément qui structure la page) :
:root {
--page-narrow: 1080px;
--page-wide: 1600px;
--external-margin: 2rem;
}
body {
/*** falkon fallback ***/
max-width: var(--page-narrow);
width: calc(100% - 2*var(--external-margin));
max-width: min(100%);
/*** fin falkon fallback ***/
width: min(var(--page-narrow),calc(100% - 2*var(--external-margin)));
transition: width .8s;
}
.wide body {
/*** falkon fallback ***/
max-width: var(--page-wide);
width: 100%;
max-width: min(100%);
/*** fin falkon fallback ***/
width: min(var(--page-wide), 100%);
}
https://gitlab.com/ubuntu-fr/code/ufr-cms/-/blob/master/static/css/main.css
(le
falkon fallback, c'est parce que le navigateur falkon ne comprend pas la
fonction min().)
