源代码：
下载代码
AI 编程工具
点击运行
<!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: 'media', // 基于系统首选项 (默认) darkMode: 'class', // 基于类名手动切换 theme: { extend: { colors: { brand: { DEFAULT: '#1DA1F2', dark: '#0d74b8', }, }, }, }, plugins: [], }; </script> </head> <body> <div class="p-6"> <h1>欢迎来到深色模式</h1> <button id="toggle-dark-mode" class="mt-4 bg-gray-200 dark:bg-gray-700 text-black dark:text-white p-2 rounded"> 切换模式 </button> </div> <div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl"> <div> <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg"> <svg class="h-6 w-6 text-white" xmlns="https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg> </span> </div> <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3> <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm"> The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. </p> </div> <script> const toggle = document.getElementById('toggle-dark-mode'); toggle.addEventListener('click', () => { const isDark = document.documentElement.classList.toggle('dark'); localStorage.theme = isDark ? 'dark' : 'light'; }); </script> </body> </html>
运行结果：
AI 编程工具