<:import src="base.htm" /> <:define tag="bs-theme-toggle:button" type="button" // parameters :extra=${null} // extra classes for this instance :variant=${'secondary'} :outline=${true} :size=${null} // private :_theme=${globalThis.document?.documentElement.getAttribute('data-bs-theme') ?? 'light'} :_class=${[ 'btn', `btn-${outline ? 'outline-' : ''}${variant}`, size ? `btn-${size}` : '', extra, ].filter(s => s).join(' ')} class=${_class} aria-label="Toggle colour mode" :handle-_theme=${(v) => { const html = globalThis.document.documentElement; if (html.getAttribute('data-bs-theme') === v) return; html.setAttribute('data-bs-theme', v); globalThis.localStorage.setItem('bs-theme', v); }} :on-click=${() => _theme = _theme === 'dark' ? 'light' : 'dark'} >${_theme === 'dark' ? '☀' : '☾'}