Class: SC.Theme

Extends SC.Object.

Represents a theme, and is also the core theme in which SC looks for other themes.

If an SC.View has a theme of "ace", it will look in its parent's theme for the theme "ace". If there is no parent--that is, if the view is a frame--it will look in SC.Theme for the named theme. To find a theme, it calls find(themeName) on the theme.

To be located, themes must be registered either as a root theme (by calling SC.Theme.addTheme) or as a child theme of another theme (by calling theTheme.addTheme).

All themes are instances. However, new instances based on the current instance can always be created: just call .create(). This method is used by SC.View when you name a theme that doesn't actually exist: it creates a theme based on the parent theme.

Locating Child Themes

Locating child themes is relatively simple for the most part: it looks in its own "themes" property, which is an object inheriting from its parent's "themes" set, so it includes all parent themes.

However, it does not include global themes. This is because, when find() is called, it wants to ensure any child theme is specialized. That is, the child theme should include all class names of the base class theme. This only makes sense if the theme really is a child theme of the theme or one of its base classes; if the theme is a global theme, those class names should not be included.

This makes sense logically as well, because when searching for a render delegate, it will locate it in any base theme that has it, but that doesn't mean class names from the derived theme shouldn't be included.

Defined in: theme.js

SproutCore 1.1

Field Summary

Class Methods

Field Detail


Class names for the theme.

These class names include the name of the theme and the names of all parent themes. You can also add your own.

Walks like a duck.

Class Method Detail


Adds a child theme to the theme. This allows the theme to be located by SproutCore views and such later.

Each theme is registered in the "themes" property by name. Calling find(name) will return the theme with the given name.

Because the themes property is an object begetted from (based on) any parent theme's "themes" property, if the theme cannot be found in this theme, it will be found in any parent themes.


Creates a new theme based on this one. The name of the new theme will be added to the classNames set.


Finds a theme by name within this theme (the theme must have previously been added to this theme or a base theme by using addTheme, or been registered as a root theme).

If the theme found is not a root theme, this will specialize the theme so that it includes all class names for this theme.


Semi-private, only used by SC.View to create "invisible" subthemes. You should never need to call this directly, nor even worry about.

Invisible subthemes are only available when find is called on this theme; if find() is called on a child theme, it will not locate this theme.

The reason for "invisible" subthemes is that SC.View will create a subtheme when it finds a theme name that doesn't exist. For example, imagine that you have a parent view with theme "base", and a child view with theme "popup". If no "popup" theme can be found inside "base", SC.View will call base.subtheme. This will create a new theme with the name "popup", derived from "base". Everyone is happy.

But what happens if you then change the parent theme to "ace"? The view will try again to find "popup", and it will find it-- but it will still be a child theme of "base"; SC.View needs to re-subtheme it, but it won't know it needs to, because it has been found.


Creates a child theme based on this theme, with the given name, and automatically registers it as a child theme.

Documentation generated by JsDoc Toolkit 2.4.0 on Wed Apr 08 2015 10:02:21 GMT-0600 (CST)