暗模式图标 - HTML

暗模式已成为全球流行趋势，越来越多的用户渴望在夜间使用应用程序时享受更好的阅读体验。为了满足这一需求，现在许多应用和网站都支持暗模式。为了帮助你的用户更轻松地开启或关闭暗模式，你可以在你的网站或应用程序中添加一个暗模式图标。

什么是暗模式图标

暗模式图标是一个控制暗模式的图标，通常是一个半圆形的图标，有一个可以开关的按钮。当用户单击该按钮时，暗模式将被启用或禁用。

如何创建暗模式图标

在创建暗模式图标之前，你需要在你的网站或应用程序中启用暗模式。这可以通过添加以下CSS代码实现：

@media (prefers-color-scheme: dark) {
  /* 改变你的CSS样式 */
}

一旦你在你的应用程序中启用了暗模式，接下来你就可以开始创建暗模式图标了。在HTML中，你可以使用SVG图标或font icons来创建暗模式图标。下面是两种创建暗模式图标的例子：

使用SVG图标

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="none" d="M0 0h24v24H0V0z"/>
  <path d="M12 4.67c-4.3 0-8.05 2.49-9.83 6.11-.18.37-.18.81 0 1.18 1.78 3.63 5.53 6.11 9.83 6.11s8.05-2.49 9.83-6.11c.18-.37.18-.81 0-1.18-1.78-3.62-5.53-6.11-9.83-6.11zm0 10c-2.94 0-5.45-1.68-6.67-4 1.22-2.32 3.73-4 6.67-4s5.45 1.68 6.67 4c-1.22 2.32-3.73 4-6.67 4z"/>
</svg>

使用font icon

<i class="material-icons">brightness_medium</i>

如何添加暗模式图标

要将暗模式图标添加到你的网站或应用程序中，请将以下代码添加到你的HTML文件的适当位置：

<a href="#" id="dark-mode-toggle"><i class="material-icons">brightness_medium</i></a>

<script>
  const darkModeToggle = document.querySelector('#dark-mode-toggle');
  darkModeToggle.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
  });
</script>

这将在你的网站或应用程序中添加一个暗模式图标，并在单击该图标时切换暗模式。

总结

暗模式图标可以帮助你的用户更轻松地开启或关闭暗模式，从而提高他们的阅读体验。无论你是使用SVG图标还是font icons，添加暗模式图标都是一项简单的任务。现在你可以轻松地为你的网站或应用程序添加一个漂亮的暗模式图标了！