renderScrollerCSS.js

exports.renderScrollerCSS = function(theme) {
    var scratchCanvas = getScratchCanvas(...);
    
    // Convert a color array [r, g, b] to rgb(r, g, b).
    var getRGB = function(arr) {
        return 'rgb(' + arr.join(',') + ')';
    }
    
    // Draw the arrow for the scroller. Return the canvas data as DataURL, so
    // that it can be used for css directly.
    getArrow(rotation) {
        scratchCanvas.width = 11;
        scratchCanvas.height = 11;
        
        // Draw the arrow on the canvas.
        (...)
        
        // Rotate the canvas depending on the passed direction.
        (..)
        
        return 'url("' + scratchCanvas.toDataURL() + '")';
    }
    
    // The CSS data - stored as JS object.
    var css = {
        '.bespin-screen .sc-scroller-view.controls-hidden': {
            display: 'none'
        },

        '.bespin-screen .sc-scroller-view .track, .bespin-screen .sc-scroller-view .thumb, .bespin-screen .sc-scroller-view .button-bottom, .bespin-screen .sc-scroller-view .button-top': {
            position: 'absolute'
        },

        '.bespin-screen .sc-scroller-view:hover .track': {
            'background-color': getRGB(theme.track),
            border: 'solid ' + getRGB(theme.border) + ' 1px'
        },

        // An example on how to draw images with canvas.
        '.bespin-screen .sc-scroller-view.sc-vertical .button-bottom': {
            bottom: '7px',
            background: getArrow(180) + ' no-repeat center center ' + getRGB(theme.button)
        }
    }
    
    // Add a new <style> element on the page and insert the defined data.
    var style = document.createElement('style');
    style.innerHTML = jsObj2CSS(css);

    document.body.appendChild(style);
}

StandardTheme.js

"define metadata";
({
    "description": "Provides the standard Bespin theme",
    "provides": [
        {
            "ep": "editorTheme",
            "name": "standard",
            "description": "The standard Bespin theme",
            "pointer": "#theme"
       } 
    ]
});
"end";

// Define the basic theme:
exports.theme = {
    // Theme of the gutter:
    gutter: {
        color: "#e5c138",
        backgroundColor: "#4c4a41" 
    },

    // Theme of the editor:
    editor: {
        color: "#e6e6e6",
        backgroundColor: "#2a211c",

        cursorColor: "#879aff",
        selectedTextBackgroundColor: "#526da5",

        unfocusedCursorColor: "#ff0033",
        unfocusedCursorBackgroundColor: "#73171e",

        // ...and the tags:
        tags: {
            comment: "#666666",
            directive: "#999999",
            error: "#ff0000",
            identifier: "#e6e6e6",
            keyword: "#42A8ED",
            operator: "#88BBFF",
            string: "#039A0A" 
        }
    },

    scroller: {
        track:  [60,  60,  60],
        border: [150, 150, 150],
        thumb:  [150, 150, 150],
        button: [100, 100, 100],
        arrow:  [255, 255, 255]
    }
};