Basic Theming

Theming with Qooxdoo is not obvious for a newcommer
Here is a basic sample :

Application.js

 */
qx.Class.define("test.Application",
{
  extend : qx.application.Standalone,



  /*
  *****************************************************************************
     MEMBERS
  *****************************************************************************
  */

  members :
  {
    /**
     * This method contains the initial application code and gets called 
     * during startup of the application
     * 
     * @lint ignoreDeprecated(alert)
     */
    main : function()
    {
      // Call super class
      this.base(arguments);

      /*
      -------------------------------------------------------------------------
        Below is your actual application code...
      -------------------------------------------------------------------------
      */

      // Create a button
      var button1 = new qx.ui.form.Button("First Button");
      button1.setAppearance("buttonCustom");

      // Document is the application root
      var doc = this.getRoot();
      doc.setAppearance("mainContent");

      // Add button to document at fixed coordinates
      doc.add(button1, {left: 0, top: 0});

      // Add an event listener
      button1.addListener("execute", function(e) {
        alert("Hello World!");
      });
    }
  }
});

Appearance.js

qx.Theme.define("test.theme.Appearance",
{
  extend : qx.theme.modern.Appearance,

  appearances :
  {
    "buttonCustom" : {      
        style : function (states) {
            result = {};
            result.backgroundColor = "#ff0000";
            result.width = 300;
            result.textColor = "#ffffff";
            result.center = true;
            return result;                  
        }
    },

    "mainContent" : {
        style : function () {
            return {
                backgroundColor : "#212122"                 
            }
        }
    }
  }
});