Creating a reusable theme in SproutCore

The first step is to open a terminal window and go to the app directory.

Type and run the following command:

sc-gen theme app_theme

and make sure that the name of theme is not the same with the app name because will generate conflict.

If all went ok, you will see these messages:

~ Created directory at themes/app_theme
~ Created directory at themes/app_theme/resources
~ Created file at themes/app_theme/resources/theme_styles.css

You could check that the above mentioned structure has been created in your app folder. After that you need to create the theme.js file in the apps/app folder with the following content:

SC.Apptheme = SC.BaseTheme.create({
 name: "app_theme",
 description: "The default theme for my application"
});

SC.Theme.addTheme(SC.Apptheme);
SC.defaultTheme = 'app_theme';

Make sure that the name and defaultTheme properties match the name you gave when you generated the theme.

The last step is to edit the Buildfile and add the theme property to the application configuration:

, :theme => 'app_theme'

Now you can start using your new theme. You can put all the CSS and image files that you need in the new resources folder.

NOTE: If you encounter the following error: ArgumentError: invalid byte sequence in UTF-8, please check this.

You can even use SCSS extension

For example, for getting another background color for the SC.ButtonView, put this piece of code in a CSS file under the new resource folder:

$theme.button {
  background-color: #000000;
  &.active {
    background-color: #c0c0c0;
  }
}

References:

http://guides.sproutcore.com/theming_app.html#styling-a-button

Ideas/Reviews/Thanks:

Piotr Steininger, Alex Percsi (Twitter: poolshark25)

That was my piece of code.