Back to Plugins
暗色组件助手 Dark Mode Assistant for Components

暗色组件助手 Dark Mode Assistant for Components

Dark Mode Assistant for Components: Easily Toggle Dark Mode

dark themedesign tokensdark modeauto dark modeappearance

Plugin Preview

暗色组件助手 Dark Mode Assistant for Components preview

About this plugin

介绍

“暗色组件助手”插件旨在简化在 Figma 组件中管理暗黑模式的过程。通过几次点击,你可以快速启用任何选中组件或实例的暗黑模式,同时如果可用,插件会应用组件库中的暗色 token 设置。


功能说明

  1. 自动检测并启用选中组件和实例的暗黑模式。
  2. 递归检查并更新嵌套在组和框架中的所有组件的暗黑模式。
  3. 允许你将组件库中的“暗色” token 应用于外观模块。
  4. 与具有“componentProperties”和“appearance”模块的组件兼容。


使用方法

  1. 选中你希望应用暗黑模式的组件、组或框架。
  2. 点击插件按钮,插件会自动为所有选中的元素及其子元素启用暗黑模式。
  3. 插件会自动应用暗黑模式设置,并在可用的情况下将其链接到组件库中的“暗色”token。


注意事项

  1. 插件最佳工作效果是在具有属性定义的组件库中使用。
  2. 如果未找到“appearance”模块,插件仍然会启用暗黑模式,但不会应用 token。
  3. 确保你的组件已正确链接到包含暗黑模式 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

  1. Automatically detects and enables dark mode for selected components and instances.
  2. Recursively checks and updates dark mode for all nested components within groups and frames.
  3. Allows you to apply the "dark" token from your component library's appearance module.
  4. Works seamlessly with components that have "componentProperties" and "appearance" modules.


How to Use

  1. Select the components, groups, or frames that you want to apply dark mode to.
  2. Click the plugin button to enable dark mode for all selected elements and their children.
  3. The plugin will automatically apply the dark mode setting and, if available, link it to the "dark" token in your component library.


Precautions

  1. The plugin works best with components that have properties defined in the component library.
  2. If no "appearance" module is found, the plugin will still enable dark mode but will not apply the token.
  3. Ensure that your components are correctly linked to a component library with dark mode tokens for full functionality.

Plugin Details

Version4
CreatedFebruary 23, 2025
Last UpdatedMarch 22, 2025
Categoryediting & effects plugins
CreatorKingweiCheung
Stats22 installs, 0 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none