Today’s tip is about integration of the Topcoat CSS library with
themeManager.js in Photoshop HTML Panels. Adobe’s Topcoat is:
a brand new open source CSS library designed to help developers build web apps with an emphasis on speed. It evolved from the Adobe design language developed for Brackets, Edge Reflow, and feedback from the PhoneGap app developer community.
It comes with Desktop and Mobile themes, both in Light of Dark shades - a really neat design. HTML Panels have sort of a built-in system to keep in sync with Photoshop interface (four shades, from light gray to black). I’ve said “sort of” because you need to explicitly set the functions, but they’re provided by default by both Extension Builder and boilerplate code by David Deraedt. Basically it’s a matter of triggering some styling when the PS Interface changes - you do this listening for the
The above code first runs
updateThemeWithAppSkinInfo(), (the function that performs the actual styling - changes CSS rules, etc) passing as a parameter an
appSkinInfo object. It contains various host environment (i.e. Photoshop) information, as the screenshot from the Chrome Developer Tools console shows on the right. Depending on these values, you might decide for instance to change the background of your HTML Panel to match the Photoshop own
panelBackgroundColor (or font size, color, whatever).
Please note: Topcoat already comes in two flavors (Light and Dark) so you can always decide to switch to the corresponding CSS depending on the Photoshop’s interface color. You’d pick Topcoat’s Light for the PS LigthGray and MidGray, and Topcoat’s Dark for the PS DarkGray and Black interface. I personally don’t like this option. Topcoat’s background color doesn’t match with Photoshop (I admit I’m a bit picky on this - after all we’re adapting a library that’s not been built for this very purpose). Let’s call 1, 2, 3, 4 the PS interface shades: Topcoat Dark is too light for 1 and too dark for 2, while Topcoat Light is too light for 3 and too dark for 4. I’ll show you in the following example how to better integrate the two systems.
As I’m compiling these tips while I discover new things working on actual projects, so I’ll show you as the example a simple panel I’m currently porting to HTML (called PS Projects).
The code here is really basic - I don’t need anything fancy but three buttons: I’ve set a Large Button Bar using a snippet from Topcoat examples. As you can see, I’ve set IDs for the stylesheets - the reason is going to be clear soon.
The main.js contains (besides stuff I need for JSX operations - the actual routines of my panel) a call to
themeManager.js is as follows:
addRule() are utility functions, while
init() (orders the styling update and adds a theme change event listener) and
onAppThemeColorChanged() (retrieves the AppSkinInfo object and pass it forwards) are the same as in the first code chunk, up in the page.
updateThemeWithAppSkinInfo() extracts from the
AppSkinInfo object the panels background color and set new
color rules in the stylesheet with
id="hostStyle". Then, depending on the Red component of the background color (an arbitrary choice) it determines whether the interface
isLight or not, and load a dark or light Topcoat CSS using jQuery.
The HTML loads two CSS files, even if the panel deals with a total of three. The one with
id="hostStyle" is theme.css and contains minor tweaks - it’s the target of the
addRule() function, which will add there
color rules depending on the PS interface theme (lightGray, darkGray, etc). Then there’s
light.css - which are the original
topcoat-desktop-light.css renamed. In order not to conflict with styles set via
themeManager.js I’ve commented out some bits in the body section of both of them:
As a result I’ve made the two Topcoat Dark and Light versions synchronize with the exact background-color and color.
The Photoshop HTML Panels Development Course
If you’re reading here, you might be interested in my Photoshop Panels development – so let me inform you that I’ve authored a full course:
- 300 pages PDF
- 3 hours of HD screencasts
- 28 custom Panels with commented code
Check it out! Please help me spread the news – I’ll be able to keep producing more exclusive content on this blog. Thank you!