tabler/pages/_includes/layout/customize.html

<div class="row row-cards">
	<div class="col-12">
		<div class="card">
			<div class="card-body">
				<div class="btn-list">
					<a href="#" class="btn btn-secondary" data-theme-toggle="primary-vertical">Toggle sidebar</a>
					<a href="#" class="btn btn-secondary" data-theme-toggle="primary-vertical-narrow">Sidebar narrow</a>
					<a href="#" class="btn btn-secondary" data-theme-toggle="primary-right">Sidebar left/right</a>
					<a href="#" class="btn btn-secondary" data-theme-toggle="primary-color">Sidebar color</a>
					<a href="#" class="btn btn-secondary" data-theme-toggle="secondary-color">Secondary color</a>
					<a href="#" class="btn btn-secondary" data-theme-toggle="secondary-visible">Toggle secondary</a>
					<a href="#" class="btn btn-secondary" data-theme-toggle="dark-mode">Dark mode</a>
				</div>
			</div>
		</div>
	</div>
</div>

{% capture_global scripts %}
<script>
	(function () {
		var navbarPrimary = document.getElementById('navbar-primary'),
			navbarSecondary = document.getElementById('navbar-secondary');

		var events = {
			'primary-vertical': function () {
				navbarPrimary.classList.toggle('navbar-vertical');
			},
			'primary-right': function () {
				navbarPrimary.classList.toggle('navbar-right');
			},
			'primary-vertical-narrow': function () {
				navbarPrimary.classList.toggle('navbar-vertical-narrow');
			},
			'dark-mode': function () {
				document.body.classList.toggle('theme-dark');
			},
			'primary-color': function () {
				var classList = navbarPrimary.classList;

				if (classList.contains('navbar-light')) {
					classList.add('navbar-dark');
					classList.remove('navbar-light');
				} else {
					classList.add('navbar-light');
					classList.remove('navbar-dark');
				}
			},
			'secondary-color': function () {
				var classList = navbarSecondary.classList;

				if (classList.contains('navbar-light')) {
					classList.add('navbar-dark');
					classList.remove('navbar-light');
				} else {
					classList.add('navbar-light');
					classList.remove('navbar-dark');
				}
			},
			'secondary-visible': function () {
				navbarSecondary.classList.toggle('d-none');
			},
		};

		for (var name in events) {
			var event = events[name];

			(function(event){
				document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
					event.call();
					e.preventDefault();
					return false;
				});
			})(event);
		}

	})();
</script>
{% endcapture_global %}