A Sketch plugin that calculates and applies the correct color for you to get actual design color after applying it to a translucent UIToolbar or UINavigationBar.
Calculations are based on this post by Tom. So I just made a Sketch plugin for it.
Installation
Better Way:
- Download the Sketch Toolbox plugin manager app and install.
- Search
iOS Bar Color Calculator
in the app and install.
Manuel:
- Download the files and unzip.
- Double click the
iOS-Bar-Color-Calculator.sketchplugin
bundle to install.
Explanation and Usage
Usage:
- Select the background layer of the bar (single or multiple), and from plugins menu, select:
iOS Bar Color Calcuator
>
Design Color to Bar Color
. - If you want to revert the original color, select:
iOS Bar Color Calcuator
>
Bar Color to Design Color
.
Explanation:
Important Note:
In iOS, the opacity of a translucent UINavigationBar or UIToolbar isn’t specified in the documents. So, 84% opacity and 40px blur are just predictions of mine by experiments. This plugin works just for this opacity value with a white background. And there is a small fallibility.
Moreover, sometimes Apple changes the parameters of iOS — as it’s stated in the post I referred at the beginning too. So you should check things before to be sure.
Customization / Contribution:
You can play with the formula to make it better or more flexible. To do that:
- Open plugin folder by clickling
Plugins
>
Reveal Plugins Folder...
- Right click
iOS-Bar-Color-Calculator.sketchplugin
and pressShow Package Contents
- Open
Contents
>
Sketch
>
helpers.cocoascript
with an editor. - Play with the formula. It’s Javascript mostly.
Contact
You can contact me from Twitter.