HTML Panels Tips: #6 integrating Topcoat CSS

Davide Barranca —  — 15 Comments

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 CSInterface.THEME_COLOR_CHANGED_EVENT:


AppSkinInfo Object

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).

Mind you: 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.init(). The themeManager.js is as follows:

The toHex() and 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 background-color and 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 background-color and color rules depending on the PS interface theme (lightGray, darkGray, etc).

Then there’s dark.css and light.css – which are the original topcoat-desktop-dark.css and 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.



Print Friendly

15 responses to HTML Panels Tips: #6 integrating Topcoat CSS

  1. hi
    thank you for HTML Panel series.

    and…I tried this but I wonder why buttons are shrinked

  2. Hi Davide,

    I wonder if Topcoat supports drop-down lists? I’ve created one with:


    It displayed fine in the panel, but when I’m clicking on it, expanded drop down list displayed in the bottom left corner of my monitor. How is it possible?

  3. Sorry, HTML code disappeared
    here is correct:

    ‘Пункт 1’
    ‘Пункт 2’

  4. one more again attempt 🙂

    • Hi Mikhail,
      I’ll try the select and will report back. One thing that makes me slightly apprehensive is the fact the Topcoat project seems to be… quite still (latest update is from November 2013).
      If authors discontinue it, it would be too bad! There must be other, similar CSS frameworks but I don’t know any that fits so well in Adobe Panels.

  5. HI Davide
    I wanna create a extenion for photoshop CS6, and it’s base flash Environment. So I need to build the panel with flash builder. Is there any themes like topcoat that I can use in flash?
    Styling in flash is terrible…

  6. These articles are great!

    Any idea what property/code to use to dynamically disable/enable buttons? (ie, I want to make a button unavailable until the right precursor steps are taken).

  7. Hello Davide,

    with the newest version of CC2015 the adaption to the darkest color isn’t working.
    Do you have a fix for this?


  8. Martin Dahlin June 9, 2016 at 2:49 PM

    Works nicely, however for some reason my panel doesn’t update when switching to the darkest Photoshop theme (it keeps on using the old one that was active).

  9. Hi Davide! Can you tell me how these panels interpret the CSS fed to them? Which engine would they use for it? The issue is that I am trying to use CSS variables in an extension I am developing, but seems like variables are not supported here yet. (..CSS variables are supported by most browsers now!)

    • Hi,
      I’m afraid I have no experience of CSS vars – I must have lived in a cave 🙂
      The CSS engine is the one of Google V8; as far as I know, CC2015.5 implements CEF 3.2272.78, Chromium 41.0.2272.104.

Leave a Reply

Text formatting is available via select .

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">