如何使用 Chakra UI 和 构建可访问的前端应用程

Chakra UI 允许您为应用程序设置主题。我所说的“主题”是指应用程序的调色板、字体比例、字体堆栈、断点、边框半径值等的设置。由于颜色和对比度是可访问性的重要组成部分，因此使用易于感知的颜色非常重要。 开箱即用的 Chakra UI 附带一个默认主题对象，可以满足您在颜色、字体等方面的大多数应用程序需求。默认 AERO 领先  主题的设置考虑到了对比度，可以轻松切换颜色模式（稍后会详细介绍）。 然而，Chakra UI 允许您扩展或完全替换默认主题。这可以通过接受基于样式系统主题规范的主题对象来实现。 主题对象中的值可自动在您的应用程序中使用。例如， 中指定的颜色可以由组件中的和属性引用。要个性化您的应用程序，您可以覆盖 Chakra UI 提供的默认主题或在其中设置新值。为此，Chakra UI Nuxt 模块公开一个chakra对象，该对象将接受一个extendTheme接受对象的属性。给定的对象extendTheme将递归合并到 Chakra UI 默认主题对象。让我们将我们的品牌调色板添加到 Chakra，以便我们可以在我们的应用程序中使用它。 注意：Chakra UI 建议使用 50 – 900 之间的键将调色板添加到主题的颜色对象中。您可以使用Coolors和palx等 Web 工具来生成这些调色板。 对于我们的演示主页，我将使用石灰的品牌颜色。为了让 Chakra UI 识别这种颜色，我将在项目目录根目录中名为（您可以随意命名）的文件夹中创建一个对象。chakra在此对象中，我将定义我们的品牌调色板。