Back to Plugins
Appearance

Appearance

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

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-name

Style [night] / color-name




Style / color-name [day]

Style / color-name [night]

Plugin Details

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

Technical Details

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

More Like This

Discover other plugins in the shapes-colors category.