Home

Awesome

Light Switch Hero Banner

Light Switch Sketch Plugin

Light Switch is a plugin for Sketch that provides actions to automatically convert symbols, text styles and layer styles to available light/dark alternatives.

 

Installation

Install Manually

  1. Download the latest release of the plugin
  2. Un-zip
  3. Double-click on Lightswitch.sketchplugin

Install via Sketch Runner

  1. Run Sketch Runner
  2. Search Light Switch on the Install tab
  3. Click the Get button

 

Usage

To use Light Switch; select the layers you want to convert and run one of the commands below OR adjust the to customise the plugin's behaviour.

Menu ActionShortcutDescription
Toggle Light Styles⌘ command + ⌥ option + kSwitch selected layers to available light alternatives
Toggle Dark Styles⌘ command + ⌥ option + lSwitch selected layers to available dark alternatives
SettingsConfigure Light Switch plugin preferences

  Screen recording of Light Switch usage

How it works

Lightswitch takes the currently selected layers and then finds what Sketch Library they came from. If found, it then searches the library for an alternative for each Symbol, Text Style or Layer Style.

For example running the command on a Library Symbol called...<br />

Bars / Navigation Bar / iPhone - Compact / Light / Large Title

...would convert it into<br />

Bars / Navigation Bar / iPhone - Compact / Dark / Large Title

It's important to note that with Symbols and Symbol Overrides, Light Switch will only work correctly if child layers match between light and dark components. Otherwise, Sketch will behave as usual and try and match overrides as best it can.

 

Development Guide

This plugin was created using skpm. For a detailed explanation on how things work, checkout the skpm Readme.

If you have any suggestions on how to improve the plugin — feel free to get in touch.

Contact