HTML Web 组件中的暗模式切换

 原文英文，约800词，阅读约需3分钟。发表于：。

When designing my digital garden, I knew I wanted a cute dark mode toggle. Once I had drawn my SVG, I started building a web component that had all the same functionality as my dark mode toggle in...

作者设计了一个暗模式切换组件，使用SVG绘制图标，并通过自定义元素API定义<toggle-component>。组件考虑用户颜色偏好，并在页面重载时保持选择。通过焦点和悬停样式确保无障碍访问，使用事件监听器设置主题。样式表和脚本在HTML中导入，完整代码在GitHub上可查看。

GitHub SVG html web 无障碍 暗模式 组件 自定义元素
HTML Web 组件中的暗模式切换
相关推荐 去reddit讨论
分享给好友
沉浸式翻译 immersive translate
小红花众创空间
  1. Meta 宣布推出 AI 驱动的视频生成器 Movie Gen
    Meta推出Movie Gen AI视频生成器，可通过文本生成高清视频并添加音效，还能编辑现有视频和图像。由于成本高和生成时间长，暂不公开发布。工具引发版...
  2. 模块化：Python程序员轻松入门Mojo🔥
    本文介绍了Mojo编程语言，从Python程序员的角度出发，通过一个简单的例子展示了Mojo的语法和性能优势。文章指出Mojo与Python语法相似，但在...
  3. Modular：我们筹集了1亿美元以改善全球开发者的AI基础设施
    Modular宣布获得1亿美元新融资，加速实现全球开发者AI基础设施愿景。他们的下一代AI开发者平台改善了AI的可编程性、可用性、可扩展性、计算效率和硬件...
  4. 模块化：Mojo🔥 如何实现比 Python 快 35,000 倍的加速 – 第二部分
    在本博客文章中，我们将继续优化Mandelbrot集合问题，并将速度提高到Python的26,000倍。我们将分享使用的技术，并讨论Mojo的优势。第三部...
  5. Modular：发布 MAX 开发者版预览
    Modular推出了Modular Accelerated Xecution (MAX)平台，旨在简化在不同硬件平台上部署AI模型。MAX包括先进的AI编...
  6. 模块化：Mojo🔥 - 它终于来了！
    自从5月2日推出Mojo编程语言以来，已有超过120,000名开发者注册使用Mojo Playground，19,000名开发者在Discord和GitH...
  7. 模块化：Mojo🔥如何实现比Python快35,000倍的速度提升——第一部分
    本文介绍了Mojo编程语言在Mandelbrot集合问题上的性能优化，通过类型注释、严格模式和简化计算等方法，实现了46倍至89倍的速度提升。与NumPy...
  8. 模块化：在Python🐍中使用Mojo🔥
    本文介绍了在Mojo中使用Python模块和包的方法，包括查找和加载模块和包、使用venv创建虚拟环境和使用Conda安装libpython。文章提供了示...
  9. 【Hadoop】【持续更新】hdfs 常见命令
    hdfs fsck命令是用于检查Hadoop分布式文件系统（HDFS）中的文件和目录的工具。它可以检测出文件和目录的损坏、丢失和副本问题，并提供修复建议。...
  10. 【Hadoop】Yarn 作业启动源码解读
    本文介绍了作业提交的流程和相关类的功能。作业提交的核心类是Job.java，其中的submit()函数实现了作业的提交。在作业提交过程中，主要包括连接Re...
更多...