Back to Plugins

暗色组件助手 Dark Mode Assistant for Components
Dark Mode Assistant for Components: Easily Toggle Dark Mode
dark themedesign tokensdark modeauto dark modeappearance
Plugin Preview
About this plugin
介绍
“暗色组件助手”插件旨在简化在 Figma 组件中管理暗黑模式的过程。通过几次点击,你可以快速启用任何选中组件或实例的暗黑模式,同时如果可用,插件会应用组件库中的暗色 token 设置。
功能说明
- 自动检测并启用选中组件和实例的暗黑模式。
- 递归检查并更新嵌套在组和框架中的所有组件的暗黑模式。
- 允许你将组件库中的“暗色” token 应用于外观模块。
- 与具有“componentProperties”和“appearance”模块的组件兼容。
使用方法
- 选中你希望应用暗黑模式的组件、组或框架。
- 点击插件按钮,插件会自动为所有选中的元素及其子元素启用暗黑模式。
- 插件会自动应用暗黑模式设置,并在可用的情况下将其链接到组件库中的“暗色”token。
注意事项
- 插件最佳工作效果是在具有属性定义的组件库中使用。
- 如果未找到“appearance”模块,插件仍然会启用暗黑模式,但不会应用 token。
- 确保你的组件已正确链接到包含暗黑模式 token 的组件库,以获得完整功能。
Introduction
The "Dark Mode Assistant for Components" plugin is designed to streamline the process of managing dark mode properties in Figma components. With just a few clicks, you can quickly enable dark mode for any selected component or instance, while also applying the appropriate token settings for dark mode if available.
Function Description
- Automatically detects and enables dark mode for selected components and instances.
- Recursively checks and updates dark mode for all nested components within groups and frames.
- Allows you to apply the "dark" token from your component library's appearance module.
- Works seamlessly with components that have "componentProperties" and "appearance" modules.
How to Use
- Select the components, groups, or frames that you want to apply dark mode to.
- Click the plugin button to enable dark mode for all selected elements and their children.
- The plugin will automatically apply the dark mode setting and, if available, link it to the "dark" token in your component library.
Precautions
- The plugin works best with components that have properties defined in the component library.
- If no "appearance" module is found, the plugin will still enable dark mode but will not apply the token.
- Ensure that your components are correctly linked to a component library with dark mode tokens for full functionality.
Plugin Details
Version | 4 |
---|---|
Created | February 23, 2025 |
Last Updated | March 22, 2025 |
Category | editing & effects plugins |
Creator | KingweiCheung |
Stats | 22 installs, 0 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the editing & effects plugins category.