Creating your own theme for Spaz webOS

NOTE: If you want to submit your theme for use in Spaz, you must use a compatible open-source or Creative Commons license. Spaz uses a "New BSD" license for its code. GPL themes cannot be accepted for distribution with Spaz. If you have a question, ask!

To make a theme, you'll need the following:

Theme basics

  • Themes in Spaz webOS are just CSS files, plus any supporting images required by the CSS file.
  • Theme CSS files are stored in the /stylesheets/ directory. For example, Spaz's default theme is defined in /stylesheets/Dreadnaught.css. Supporting files for that theme are in /stylesheets/Dreadnaught/
  • Themes are made available to the user by adding them to the /app/views/themes.js file. Here's what it might look like:
  • The stylesheet property is the name of the CSS file that will be loaded for the theme.
  • The palmtheme property uses the palm CSS "light" or "dark" settings. Set appropriately if you're using a "light" or "dark" theme, so any UI elements you don't override match better with your theme's aesthetic.

Making your own theme

To start with your own theme, the best idea is probably to modify an existing theme. Here's how you might do it:

  1. Make a copy of /stylesheets / Dreadnaught.css to /stylesheets/Mycooltheme.css
  2. Make a copy of the folder /stylesheets / Dreadnaught/ to /stylesheets/Mycooltheme/
  3. Change all the references to the "Dreadnaught/" folder in Mycooltheme.css to "Mycooltheme/"
  4. Add your theme to the file, like so:
  5. Now you will be able to select your theme from the Preferences scene when the app runs. It will look identical to the Dreadnaught theme, though.
  6. Make changes to your theme for extreme greatness!

Submitting a theme

The preferred way to submit a theme, or any code changes to Spaz, is via a GitHub pull request. If you're not familiar with Git and Github, start learning!.

We'll also take theme submissions via zip files. DO NOT INCLUDE THE ENTIRE CODE BASE. Just include your CSS file and supporting image files.