如何制作系统/浅色/深色主题选择器。
如何制作系统/浅色/深色主题选择器。
这篇文章是关于如何在现代应用程序中创建一个非常常见的功能，它是一个主题选择器，它允许用户只使用 HTML、CSS 和 JavaScript 为您的网站或应用程序选择浅色、深色或系统管理的主题。
这是我们正在尝试做的工作的代码笔：
如今，几乎每个应用程序都允许用户选择他们最喜欢的主题，这可以很好地改善用户体验 (UX)，但作为开发人员，我们需要非常小心，以免弄乱预期的设计。
例如，在运行 Android 12 的手机中，如果应用程序没有呈现适当的深色主题，系统将最好在手机以深色模式运行时应用一个主题，但这通常只是改变黑色和白色，可能会破坏应用程序的可读性和许多组件的对比严重损害了用户体验和界面（UX/UI）。
另一个常见的问题是在设置 CSS 配置以支持系统主题时，用户会失去选择与系统所拥有的主题不同的主题的可能性。
因此，我将向您展示一种仅使用 HTML、CSS 和 Vanilla JavaScript 来避免此问题的简单方法，并且由于不需要插件或包，因此该技术可以在任何 JS 框架上使用！
对于本例，我们将创建一个简单的 HTML 页面，如下所示：
HTML template for this example.
到目前为止没有什么奇怪的，唯一需要注意的是元标记 <meta name=”color-scheme” content="light dark" /> 这告诉系统我们的应用程序支持浅色和深色主题，因此它使用我们的 CSS 样式，而不是自动更改黑白。以及我们将用来选择每个主题的三个按钮。
然后在我们的 CSS 上：
CSS root style.
在根元素上，我们将使用默认主题设置变量，在本例中为 Light 主题。然后我们将使用这个变量来设置我们拥有的每个元素的颜色，不允许使用硬编码的颜色！
例如在按钮上我们会这样做！
CSS style using predetermined variables.
然后我们将为我们的黑暗主题添加一个类：
CSS dark theme.
如您所见，这里我们将变量的值更改为深色背景和浅色文本，因此如果我们将此类添加到页面正文元素，则这些值将应用于我们的元素。
到这里一切都很标准，现在让我们转到系统管理的主题：
CSS system dark theme style.
这里我们使用一个 @media（喜欢颜色方案：深色） 当我们设备的系统在黑暗主题上运行时使用一组规则。正是在这一部分中，您通常会遇到用户丢失他们为系统正在使用的主题选择的主题的问题，因为在几乎所有教程中，建议都是使用 ：根 元素来设置系统的黑暗主题，但这只会引发每次我们的系统主题更改为黑暗我们的 ：根 element 将改变我们变量的值，这样我们就完全失去了对主题的控制。这个想法是使用一个类来设置样式，所以无论系统是否处于黑暗模式，只有当用户选择使用系统的主题时才会应用该主题，因此该类附加到我们的 body 元素。
现在我们将使用 JavaScript 更改附加到我们的 body 元素的类，然后控制我们应用的主题：
JavaScript Theme Selector functionality.
为了更容易开发，我们首先捕获我们的 body 元素和三个按钮，然后为每个按钮添加一个单击事件侦听器，将每个按钮的主题传递给我们的 setTheme 函数。我们可以用我们所有的主题制作一个数组，只是为了进行某种验证。然后我们将选择的主题保存到本地存储中，因此当用户再次打开我们的应用程序时，它将使用 loadTheme 函数自动获得首选主题。然后，为了保持整洁，我们从 body 元素中删除所有与主题相关的类，然后添加我们想要的类。
这就是我们需要在我们的应用程序上进行功能主题选择的全部内容，它将与我们的系统主题一起使用，但不会影响我们的用户偏好。
在您可以添加任意数量的主题之后，甚至可以通过更多的工作创建自定义颜色主题创建功能。在我的下一篇文章中对此进行了教程。
我希望我解释得很好，这可以帮助你。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
