使用 Laravel Tailwind 和 Alpine.js 的暗黑主题

欢迎，勇敢的程序员，来到迷人的阴影和代码世界！你是否准备好踏上一次迷蒙色调至高无上的旅程，美学与功能相遇？准备进行一次探入“使用Laravel, Tailwind和Alpine.js的暗色主题”内心的夜间探险。

在现代网页设计中，暗色主题不仅仅是趋势，它是一种启蒙。为夜间码爱好者提供视觉上的舒适，并为用户界面增添一份光滑感，掌握暗色主题的艺术相当于施展一个强大咒语。

先决条件

安装最新的Laravel应用
安装TailwindCSS
安装Alpine.js
暗色主题配置。

前三步的步骤可在此
Readme文档中找到！

你的最终结果应该是这样的

Laravel default welcome page

免责声明 对于这篇指南，我假设你已经在某种程度上熟悉了Laravel、Tailwind和Alpine.js。这里我们不会深入绝对的基础，而是基于你已有的基础，旨在提高和丰富你的知识。所以，如果你对“blade组件”、“实用类”或“x-data”之类的术语熟悉，你就在正确的位置。但是，如果你喜欢接受挑战，那就勇往直前！但如果这些术语对你来说完全是陌生的，那么在开始之前快速回顾这些框架可能是个不错的选择。

打造完美的暗色主题：策略与最佳实践

export default {
    darkMode: 'class', // This is our star player for the dark mode!
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

<body x-data="{darkMode: false}" :class="{'dark': darkMode === true }" class="antialiased">

<button @click="darkMode=!darkMode" type="button" class="relative inline-flex flex-shrink-0 h-6 mr-5 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer bg-zinc-200 dark:bg-zinc-700 w-11 focus:outline-none focus:ring-2 focus:ring-neutral-700 focus:ring-offset-2" role="switch" aria-checked="false">
   <span class="sr-only">Use setting</span>
   <span class="relative inline-block w-5 h-5 transition duration-500 ease-in-out transform translate-x-0 bg-white rounded-full shadow pointer-events-none dark:translate-x-5 ring-0">
      <span class="absolute inset-0 flex items-center justify-center w-full h-full transition-opacity duration-500 ease-in opacity-100 dark:opacity-0 dark:duration-100 dark:ease-out" aria-hidden="true">
         {{-- 
         <x-svg class="w-4 h-4 text-neutral-700" svg="sun"/>
         --}}
         <svg  xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun w-4 h-4 text-neutral-700" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
            <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
         </svg>
      </span>
      <span class="absolute inset-0 flex items-center justify-center w-full h-full transition-opacity duration-100 ease-out opacity-0 dark:opacity-100 dark:duration-200 dark:ease-in" aria-hidden="true">
         {{-- 
         <x-svg class="w-4 h-4 text-neutral-700" svg="moon"/>
         --}}
         <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon w-4 h-4 text-neutral-700" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
         </svg>
      </span>
   </span>
</button>

...
<div class="max-w-7xl mx-auto p-6 lg:p-8">
    <x-theme-toggle/>
...

Laravel, manual dark theme toggle with a blade component

<body x-data="{darkMode: $persist(false)}" :class="{'dark': darkMode === true }" class="antialiased">

这就是它。但一旦你做了，你就会发现现在你的代码里充满了错误！这是因为，持久化功能不是Alpine.js默认内置的。我们必须将其作为插件安装。请参看📖 持久化插件的文档。我还建议您看一下文档中的工作原理段落，以了解所使用的javascript和现代浏览器的基本技术。

快速安装指南 我总是喜欢使用npm进行安装，因为我喜欢将依赖项保持到最小，所以...

npm install @alpinejs/persist

现在这已经完成了，我们必须从我们的资源包中的 app.js 初始化它，如下所示

import './bootstrap';

import Alpine from 'alpinejs'
import persist from '@alpinejs/persist'

window.Alpine = Alpine

Alpine.plugin(persist)

Alpine.start()

就是这样！在浅色和深色主题之间切换，刷新，并查看它是否保持不变。很酷，对吧？

但就在你认为我们正在顺利进入黑夜的时候，地平线上出现了一个微妙的干扰。就像每个伟大的故事一样，总会有一个出人意料的转折等着在阴影中。在我们关于主题和切换的故事中，这个敌手被许多人称为...闪烁虫。这是在页面加载期间发生的光和暗模式之间的短暂闪烁或闪光。这可能会导致用户体验不那么顺畅，因为主题之间的过渡不如期望的那样无缝。问题通常是由在初始页面渲染时应用所选主题样式时微小的延迟引起的。

⻅ 4. 解决闪烁虫？

闪烁虫是在网站上实现主题切换时面临的一个常见问题。本质上，它是在页面加载期间在亮色模式和暗色模式之间发生的短暂的闪烁。这可能会降低用户体验的流畅性，因为主题之间的过渡并不像人们希望的那样无缝。问题通常是由于在应用选择的主题样式时在初始页面渲染期间轻微的延迟造成的。

Alpine.js Flicker bug while refreshing dark theme

您可以通过像疯子一样不断按键盘上的 ctrl+shift+R 组合键来轻松复现这个问题！

解决方案 解决方案非常简单，它在于使用 x-cloak 结合 x-data="{darkMode: $persist(false)}"。

以下是一个分解

x-cloak：这个Alpine.js指令类似于我们元素的隐形斗篷。当元素具有x-cloak属性时，它们会从用户的视角中隐藏。属性仅在被移除（因此，元素变得可见）时才能够移除（仅当Alpine对其元素进行初始更新后）。通过使用x-cloak，我们确保元素仅在正确状态下显示，消除了令人不安的闪烁。
x-data="{darkMode: $persist(false)}"：正如我之前提到的，这段代码负责保持用户的主题偏好。$persist函数确保暗模式状态（对于暗模式为true，对于亮模式为false）在页面加载之间被记住。当页面加载时，Alpine.js迅速检查这个存储的值以确定要显示的哪个主题，确保所选主题的样式在初始渲染时立即应用。

这两个指令共同构成一个组合拳，确保所选主题不仅被回忆起来，而且渲染流畅，为最终用户提供无缝的体验。

首先，我们需要让x-cloak生效，所以只需在您的 resources/app.css 中添加这一行即可

@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] { display: none !important; } /*<-- This Line right here!*/

现在您可以在任何需要的地方使用x-cloak。目前，让我们仅在我们需要的地方使用它。

...
<body x-cloak x-data="{darkMode: $persist(false)}" :class="{'dark': darkMode === true }" class="antialiased">
...
</body

我们就这样开始了。难以捉摸的闪烁虫已被捕获并击溃 🐞🩴💀!

Github

您可以在以下位置找到此项目的代码，可克隆、探索和使用，点击 👉 dark-theme-with-laravel-tailwind-and-alpinejs。

结论

踏入“Laravel、Tailwind 和 Alpine.js 的暗黑主题”的世界之旅是一份证明，展示了现代网络技术如何相互作用，创造愉悦的用户体验。暗黑主题，不仅仅是潮流，它提供了视觉上的舒适感和美学的点缀，受到了开发者和用户的喜爱。

这里详细描述的集成过程是顺序性和精确的，使任何对现有工具有一定了解的开发者都能轻松实现暗黑主题。然而，这不仅仅是一个简单的流程。在这个过程中，将解决开发者面临的一些常见挑战。从初始的环境和工具设置开始，整合Tailwind以实现暗黑模式，使用Blade组件添加手动暗黑主题切换，到使用Alpine.js的持久插件解决问题的方法，直到最后解决的页面刷新故障和难以捉摸的震颤故障。

这就是全部了！希望这个指南对您有所帮助。我也真的希望您能找到一种酷炫的方式来探索这个功能，在构建您项目中的疯狂酷炫暗黑主题的同时！愿您的编码之旅永远照亮，无论是暗黑主题的柔和光芒，还是新知识的耀眼璀璨。祝所有人编码愉快！