Flex 4 Sample Themes

January 6, 2010By 20 Comments

One of the more recent downloads of the Flex 4 Nightly builds contains some new Flex 4 Sample Themes. As a non-designer, I find these invaluable in helping me make my applications more appealing. Since the source is provided, I’m given an instant base to work with and can modify to my liking rather than starting from scratch.

These sample themes are located in the Flex 4 SDK zip under …/samples/themes. To apply one to your application, you simply go into your project properties (either right click on your app folder in Flash Builder and select Properties from the context menu or go to File | Properties while your project folder is selected) and select ‘Flex Theme’. Then click the ‘Import Theme’ button and find the location of the theme that you want to use in your …/samples/themes directory of your Flex 4 SDK and type in a name for it or accept the default name it creates. Once you see that it has been added to your choices (probably under category ‘Other’), then you can select it and your project will use it the next time it’s run.

In this post I’m going to show a preview of a very simple app with some of these sample themes. I’m using the Flex 4 States and Transitions Tour de Flex sample as the simple app that is showing the different previews. The source code for that sample can be found here.

Default Spark Theme

Arcade Theme

Cobalt Theme

Graphite Theme

Zen Theme

The following set of themes are simply the default Spark theme with some CSS color properties changed to illustrate how you can use plain CSS to make some dramatic changes quickly. The CSS for these themes is also included in the samples/themes directory under the given theme.

Spark-Cobalt Theme

Spark-Desert Theme

Spark-Graphite Theme

Spark-Sage Theme

Spark-Sky Theme

If you don’t see the …/samples/themes directory in your Flex 4 SDK version then get a more recent one from here. I noticed the themes available sometime around the beginning of December, so if you’re SDK is more recent than that, you’ll likely have to get a more recent version.

Also, for all of you creative ones out there that are building really cool themes in Flex 4, I encourage you to submit your themes for the rest of us to use :).

Filed in: Adobe FlexFlex 4Flex/AIR Tags:

About the Author ()

Comments (20)

Trackback URL | Comments RSS Feed

  1. Cool! Indeed wouldn’t hurt to have a couple of extra themes by default.

    Will check out/compile/check out these today.


  2. Rob says:

    Cool, look forward to giving them a look!

  3. Tink says:

    A wireframe theme would be really useful i.e. white with black outlines?

    This would have been my first choice for building apps to match a wireframe without the client going, “oh i don’t like that color”, or “i doesn’t match the design” and you having to continually repeat yourself saying that it hasn’t been skinned yet.

  4. @Tink – Flex 4 does have a set of wireframe skins built in. Project > Properties > Flex Theme > Wireframe.

    The spark wireframe skins are very simple and don’t support styling. They are mostly blue and white so not quite black and white, but you can find them in the spark.skins.wireframe package if you want to tweak them from there.

  5. Luiz says:

    Thanks for the hint!
    I made an attempt to use these nice themes and I keep getting run-time errors (such as “Property initialized not found on spark.primitives.Rect and there is no default value” in default skin class for the Spark Application component)

    But I just imported a new theme (say “graphite”) but still use the old (stable) SDK. Maybe I have to switch to a newest SDK to make those new sample themes work?

    Appreciate your advise.

    • devgirl says:

      Hi Luiz, You do need to download a more recent SDK. I’ve had success with SDK 13023 and those themes should work for you (though there are even newer SDK versions available as well now). You can download them from here:

      Hope this helps!

      • Luiz says:

        It helped, thanks. I was able to work with graphite theme on the build 13023.

        But the official version of FB4 released lately does not seem to work properly. An attempt to use graphite theme (graphic) results in run-time errors .

        Any insider information? Or just to wait for a couple of patches? 🙂


        • devgirl says:

          Hmm, I will look into this and get back to you!

        • devgirl says:

          Hi Luiz, I was able to apply the GraphiteGraphical theme ok from my official FB4 release. Did you ensure that you are using the themes that came with the Flex 4.0 SDK (on my Mac the path to the graphite one is: /Applications/Adobe Flash Builder 4/sdks/4.0.0/samples/themes/graphite)? Maybe you have an old one lying around from beta? Thanks! Holly

          • Luiz says:

            Thank you Holly! I am sorry for bothering you but it turned out to be my own fault. The point is that when I opened the project created in FB 4 Beta 2 by FB4 official it behaved and was built normally but the reference to SDK 4.0 was not automatically changed to official SDK 4.0! So my project still pointed to Beta 2 SDK 4.0 and that created all sorts of run-time crashes.

          • devgirl says:

            Great!! I’m glad you got to the bottom of it!

  6. dwhogg says:

    Great summary, but I am having difficulty taking an existing theme and making a new one based on that. I have created a new flex library project and include all the files found for a given theme under the SDK directory (copying them over to my new project). I then include the new theme in Flash Builder (Project/Properties/Flex Theme/Import Theme…) and it appears to work. However, when I then use that theme it looks just like the default Spark theme.

    Anyone have a sample theme Flex Builder Library project I can peruse? Thanks in advance!

    • dwhogg says:

      I think part of my problem is a misunderstanding on my part about creating a theme in a Flash Library project. I was thinking that the resulting SWC file (eg. mygraphite.swc) would have embedded within it all of the associated assets. However, it appears that the swc file simply includes references so those original assets need to be available as well.

      That has helped, but am still struggling with taking an existing theme and then modifying. For example, the design view doesn’t seem to show the new theme (in this case I am basing this on a graphical theme – graphite).

      Again, would love some sample Flash Builder Projects that show how to set this up. Seems like it should be straightforward – get an existing theme and make a copy so you can modify (in design view) for your flex project!

  7. Zeboch says:

    Good summary, but how to get sources from basic Spark Theme ?

    Because I want to start from this theme and modify it but I can’t find it into the …/samples/themes directory.

  8. Edgar says:

    Are the themes for to use in commercial products?

  9. Edgar says:

    Also, is there to easily switch between themes at runtime?

  10. Keelah says:

    Yes, Edgar (:
    And u can find more at Adobe Site õ/

  11. Hey I know this is off topic but I was wondering if
    you knew of any widgets I could add to my blog that automatically tweet my newest
    twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe
    you would have some experience with something like this.

    Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your
    new updates.

    my web blog – Project Spark Beta Download (http://Www.Youtube.Com)

Leave a Reply