首页 产品 关于 <!-- 深色模式切换按钮 -->
{document.querySelector('html').classList.remove('dark')}// Whenever the user explicitly chooses light modelocalStorage.theme='light'// Whenever the user explicitly chooses dark modelocalStorage.theme='dark'// Whenever the user explicitly chooses to respect the OS preferencelocalStorage.removeItem(...
// tailwind.config.jsmodule.exports={darkMode:'class',// 或者使用 'media'theme:{extend:{colors:{// 自定义深色模式颜色dark:{50:'#f9fafb',100:'#f3f4f6',200:'#e5e7eb',300:'#d1d5db',400:'#9ca3af',500:'#6b7280',600:'#4b5563',700:'#374151',800:'#1f2937',900:'#111827',...
classList.remove('dark') } // Whenever the user explicitly chooses light mode localStorage.theme = 'light' // Whenever the user explicitly chooses dark mode localStorage.theme = 'dark' // Whenever the user explicitly chooses to respect the OS preference localStorage.removeItem('theme') Again ...
'inlocalStorage)&&window.matchMedia('(prefers-color-scheme: dark)').matches)){document.documentElement.classList.add('dark')}else{document.documentElement.classList.remove('dark')}// 选择浅色模式localStorage.theme='light'// 选择深色模式localStorage.theme='dark'// 选择追随系统localStorage.removeItem(...
}else{document.documentElement.classList.remove('dark') }// Whenever the user explicitly chooses light modelocalStorage.theme='light'// Whenever the user explicitly chooses dark modelocalStorage.theme='dark'// Whenever the user explicitly chooses to respect the OS preferencelocalStorage.removeItem('the...
classList.remove("dark"); } }); (10)分组 子选择:group[/name],如: 兄弟选择:peer[/name],如: 注意,兄弟选择仅支持对被命名的元素后面的元素选择 0x04 更好的开发环境 (1)基于 Tailwind CLI 构建环境 之前使用 CDN 的方式使用 Tailwind 并非生产的最佳选择,Tailwind...
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { if (e.matches) { html.classList.add('dark'); } else { html.classList.remove('dark'); } }); // 手动切换主题 darkModeToggle.addEventListener('click', () => { ...
dark.value=true;}});// 切换主题consthandleToggleTheme=()=>{dark.value=!dark.value;if(dark.value){localStorage.setItem('tool-theme-mode','dark');document.documentElement.classList.add('dark');}else{localStorage.removeItem('tool-theme-mode');document.documentElement.classList.remove('dark');}...
(prefers-color-scheme: dark)').matches)){themeToggleLightIcon.classList.remove('hidden');}else{themeToggleDarkIcon.classList.remove('hidden');}varthemeToggleBtn=document.getElementById('theme-toggle');themeToggleBtn.addEventListener('click',function(){// toggle icons inside buttonthemeToggleDark...