x — привязка по горизонтали;
y — привязка по вертикали;
block — привязка в блоковом направлении;
inline — привязка в строчном направлении;
both — привязка в обоих направлениях: горизонталь + вертикаль или блочное + строчное.

mandatory — принудительная привязка. Прокрутка всегда смещается к точке привязки.

proximity — мягкая привязка. Скролл сместится к точке привязки, только если прокрутка остановилась достаточно близко к ней.

• HTML: структура переключателя
• CSS: анимация и смена темы через переменные
• JavaScript: логика сохранения выбора с localStorage