源代码：
下载代码
点击运行
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { brand: { DEFAULT: '#1DA1F2', dark: '#0d74b8', } } } } }; </script> </head> <body class="bg-white dark:bg-gray-900 p-8"> <!-- 切换按钮 --> <button id="toggle-dark-mode" class="mb-4 bg-brand hover:bg-brand-dark text-white font-bold py-2 px-4 rounded"> 切换深色/浅色模式 </button> <!-- 品牌颜色展示部分 --> <div class="text-brand dark:text-brand-dark p-4 border border-brand dark:border-brand-dark rounded"> <p class="font-bold">品牌颜色展示：</p> <p>浅色模式颜色: #1DA1F2</p> <p>深色模式颜色: #0d74b8</p> </div> <script> const toggle = document.getElementById('toggle-dark-mode'); toggle.addEventListener('click', () => { document.documentElement.classList.toggle('dark'); }); </script> </body> </html>
运行结果：
