Back to Plugins
Appearance

Appearance

This plugin generates a dark/light theme from your selection.The plugin works with external library styles and local styles.You can choose styles name identification in settings. By default, the plugin use [day] for light and [night] for dark.🤓 How it works:1. Use [day] and [night] in your style names. Example: Style name[day]/ Style name[night].2. Apply your color styles.3. Select any object, then choose Appearance → Dark mode or Appearance → Light mode.📔 How it works with external library styles:1. Open external library file and use [day] and [night] in color style names. Example: Style name[day]/ Style name[night].2. Publish changes.3. Select Appearance → Save styles for saving external color styles to the plugin.4. Open any file linked to the library.5. Apply color styles.6. Select any object then choose Appearance → Dark mode or Appearance → Light mode---✏️ Name examples:You can use [day] / [night] at any place of your style names.Color name [day]Color name [night]Style [day] / color-nameStyle [night] / color-nameStyle / color-name [day]Style / color-name [night]

themenightschememodedaydarkcolorappearanceswitchlight

Plugin Preview

Appearance preview

About this plugin

This plugin generates a dark/light theme from your selection.The plugin works with external library styles and local styles.You can choose styles name identification in settings. By default, the plugin use [day] for light and [night] for dark.🤓 How it works:1. Use [day] and [night] in your style names. Example: Style name[day]/ Style name[night].2. Apply your color styles.3. Select any object, then choose Appearance → Dark mode or Appearance → Light mode.📔 How it works with external library styles:1. Open external library file and use [day] and [night] in color style names. Example: Style name[day]/ Style name[night].2. Publish changes.3. Select Appearance → Save styles for saving external color styles to the plugin.4. Open any file linked to the library.5. Apply color styles.6. Select any object then choose Appearance → Dark mode or Appearance → Light mode---✏️ Name examples:You can use [day] / [night] at any place of your style names.Color name [day]Color name [night]Style [day] / color-nameStyle [night] / color-nameStyle / color-name [day]Style / color-name [night]

Plugin Details

Version24
CreatedOctober 1, 2019
Last UpdatedNovember 15, 2022
Categoryshapes-colors
CreatorAlex Dyakov
Stats26197 installs, 1182 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Editor Types:
    figma