tabler/shared/includes/settings.html

<div class="settings">
	<a href="#" class="btn btn-floating btn-icon btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-settings" aria-controls="offcanvas-settings" aria-label="Theme Settings">
		{% include "ui/icon.html" icon="brush" %}
	</a>

	<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvas-settings" role="dialog" aria-modal="true" aria-labelledby="offcanvas-settings-title">
		<div class="offcanvas-header">
			<h2 class="offcanvas-title" id="offcanvas-settings-title">Theme Settings</h2>
			<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
		</div>
		<div class="offcanvas-body d-flex flex-column">
			<div>
				<div class="mb-4">
					<label class="form-label">Color mode</label>
					<p class="form-hint">Choose the color mode for your app.</p>
					{% assign modes = 'light,dark' | split: ',' %} {% for mode in modes %}
					<label class="form-check">
						<div class="form-selectgroup-item">
							<input type="radio" name="theme" value="{{ mode }}" class="form-check-input"{% if mode == 'light' %} checked{% endif %} />
							<div class="form-check-label">{{ mode | capitalize }}</div>
						</div>
					</label>
					{% endfor %}
				</div>

				<div class="mb-4">
					<label class="form-label">Color scheme</label>
					<p class="form-hint">The perfect color mode for your app.</p>

					<div class="row g-2">
						{% for color in site.colors %}
						<div class="col-auto">
							<label class="form-colorinput">
								<input name="theme-primary" type="radio" value="{{ color[0] }}" class="form-colorinput-input" />
								<span class="form-colorinput-color bg-{{ color[0] }}"></span>
							</label>
						</div>
						{% endfor %}
					</div>
				</div>

				<div class="mb-4">
					<label class="form-label">Font family</label>
					<p class="form-hint">Choose the font family that fits your app.</p>

					<div>
						{% assign fonts = 'sans-serif,serif,monospace,comic' | split: ',' %} {% for font in fonts %}
						<label class="form-check">
							<div class="form-selectgroup-item">
								<input type="radio" name="theme-font" value="{{ font }}" class="form-check-input"{% if font == 'sans-serif' %} checked{% endif %} />
								<div class="form-check-label">{{ font | capitalize }}</div>
							</div>
						</label>
						{% endfor %}
					</div>
				</div>

				<div class="mb-4">
					<label class="form-label">Theme base</label>
					<p class="form-hint">Choose the gray shade for your app.</p>

					<div>
						{% assign bases = 'slate,gray,zinc,neutral,stone' | split: ',' %} {% for base in bases %}
						<label class="form-check">
							<div class="form-selectgroup-item">
								<input type="radio" name="theme-base" value="{{ base }}" class="form-check-input"{% if base == 'gray' %} checked{% endif %} />
								<div class="form-check-label">{{ base | capitalize }}</div>
							</div>
						</label>
						{% endfor %}
					</div>
				</div>

				<div class="mb-4">
					<label class="form-label">Corner Radius</label>
					<p class="form-hint">
						Choose the border radius factor for your app.
					</p>

					<div>
						{% assign radiuses = '0,0.5,1,1.5,2' | split: ',' %} {% for radius in radiuses %}
						<label class="form-check">
							<div class="form-selectgroup-item">
								<input type="radio" name="theme-radius" value="{{ radius }}" class="form-check-input"{% if radius == "1" %} checked{% endif %} />
								<div class="form-check-label">{{ radius }}</div>
							</div>
						</label>
						{% endfor %}
					</div>
				</div>
			</div>

			<div class="mt-auto space-y">
				<button type="button" class="btn w-100" id="reset-changes">
					{% include "ui/icon.html" icon="rotate" %}
					Reset changes
				</button>
				<a href="#" class="btn btn-primary w-100" data-bs-dismiss="offcanvas">
					Save
				</a>
			</div>

		</div>
	</form>
</div>

{% capture_script %}
<script>
	/*
	This script handles the theme settings offcanvas functionality
	It uses the Tabler API to save the selected settings and apply them to the document
	It also updates the URL with the selected settings as query parameters
	It also has a reset button to clear all settings and revert to default

	This is just a demo script to show how to implement theme settings. You can modify it as needed.
	*/
	document.addEventListener("DOMContentLoaded", function () {
		var themeConfig = {
			theme: "light",
			"theme-base": "gray",
			"theme-font": "sans-serif",
			"theme-primary": "blue",
			"theme-radius": "1",
		}

		var url = new URL(window.location)
		var form = document.getElementById("offcanvas-settings")
		var resetButton = document.getElementById("reset-changes")

		// Wait for Tabler to be available
		var waitForTabler = function (callback) {
			if (window.Tabler) {
				callback()
			} else {
				setTimeout(function () {
					waitForTabler(callback)
				}, 50)
			}
		}

		var checkItems = function () {
			var config = window.Tabler ? window.Tabler.getConfig() : themeConfig

			for (var key in themeConfig) {
				var value = config[key] || themeConfig[key]

				if (!!value) {
					var radios = form.querySelectorAll(`[name="${key}"]`)

					if (!!radios) {
						radios.forEach((radio) => {
							radio.checked = radio.value === value
						})
					}
				}
			}
		}

		waitForTabler(function () {
			form.addEventListener("change", function (event) {
				var target = event.target,
					name = target.name,
					value = target.value

				if (name === "theme") {
					window.Tabler.setTheme(value)
				} else if (name === "theme-primary") {
					window.Tabler.setPrimary(value)
				} else if (name === "theme-base") {
					window.Tabler.setBase(value)
				} else if (name === "theme-font") {
					window.Tabler.setFont(value)
				} else if (name === "theme-radius") {
					window.Tabler.setRadius(value)
				}

				url.searchParams.set(name, value)
				window.history.pushState({}, "", url)
			})

			resetButton.addEventListener("click", function () {
				window.Tabler.reset()
				checkItems()
			})

			checkItems()
		})
	})
</script>
{% endcapture_script %}