Basecoat UI MCP

<!-- Theme Switcher Script --> <script> (() => { try { const stored = localStorage.getItem('themeMode'); if (stored ? stored === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.classList.add('dark'); } } catch (_) {} document.addEventListener('basecoat:theme', (e) => { const mode = e.detail?.mode || (document.documentElement.classList.contains('dark') ? 'light' : 'dark'); if (mode === 'dark') { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } localStorage.setItem('themeMode', mode); }); })(); </script> <!-- Theme Toggle Button --> <button onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))" class="btn-icon-outline" title="Toggle theme"> <svg class="w-4 h-4 dark:hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /> </svg> <svg class="w-4 h-4 hidden dark:block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" /> </svg> </button>