YUI Library Examples: StyleSheet: Adjusting a page theme on the fly

StyleSheet: Adjusting a page theme on the fly

In this example, we'll change some colors in this page's color theme. Enter any valid CSS color value into the inputs and submit the changes to see them applied to the page.

View example in new window.

Example values: #123456 or #123 or rgb(0,10,30) or red

Headings and labels

h1,h2,h3,h4,h5,h6,
#demo label {
    color: #e76300;
}

Demo background

.example-container {
    background-color: #F1F6F7;
}

Left nav hover color

#bd .toc3 li.selected a,
#bd .toc3 li a:hover {
    color: #28b;
}

Full code listing

Markup

<div id="demo">
    <form id="demo_form" action="#" method="get">
        <fieldset>
            <p>Example values: #123456 or #123 or rgb(0,10,30) or red</p>
            <label for="demo_headings">Headings and labels</label>
                <input type="text" size="7" id="demo_headings" value="#e76300">
            <pre><code>h1,h2,h3,h4,h5,h6,
#demo label {
    color: <em id="demo_heading_value">#e76300</em>;
}</code></pre>

<label for="demo_bg">Demo background</label>
                <input type="text" size="7" id="demo_bg" value="#F1F6F7">
            <pre><code>.example-container {
    background-color: <em id="demo_background_value">#F1F6F7</em>;
}</code></pre>
            <label for="demo_hover">Left nav hover color</label>
                <input type="text" size="7" id="demo_hover" value="#28b">
            <pre><code>#bd .toc3 li.selected a,
#bd .toc3 li a:hover {
    color: <em id="demo_hover_value">#28b</em>;
}</code></pre>

</fieldset>
        <p>
            <input type="submit" id="update" value="Update theme">
        </p>
    </form>
</div>

JavaScript

// Create a new YUI instance, requiring node and stylesheet
YUI({base:"../../build/", timeout: 10000}).use("node", "stylesheet", function (Y) {
	
	var Demo = {};
	
	//We need a validator to make sure we're not trying to set
	//invalid color values in StyleSheet:
	Demo.isValidColor = function (v) {
			return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) ||
				   /^rgb$\s*\d+\s*,\s*\d+\s*,\s*\d+\s*$$/.test(v) ||
				   /^[a-z]+$/i.test(v);
	}

//When the DOM is ready, we'll initialize the example,
	//creating our StyleSheet instance and adding our event 
	//listeners:
    Demo.init = function () {
	
        // Create a new StyleSheet instance for us to override some current
        // page styles.  For illustration, we'll seed it with the CSS to 
		// style the demo form.  Note that you wouldn't want to use this 
		// as a standard technique; the initial styling of your content
		// should come from .css files included in link elements.  However,
		// this block of code illustrates how a block of style information
		// can be applied to the page on demand:
        Demo.theme = Y.StyleSheet("\
            #demo form,\
            #demo fieldset {\
                border: none; padding: 0; margin: 0;\
            }\
            #demo fieldset p {\
                background: #fff;\
                border: 1px solid #ccc;\
                padding: 1em 1ex;\
            }\
            #demo pre code {\
                background: #fff;\
                border: 1px solid #ccc;\
                color: #555;\
                display: block;\
                font-weight: normal;\
                margin: 1ex 0 1em;\
                padding: 1ex;\
            }\
            #demo label {\
                font-weight: bold;\
                color: #e76300;\
            }\
            #demo pre code em {\
                color: #000;\
                font-weight: bold;\
            }\
        ");

// Store Node references for the input fields for value retrieval
        Demo.headings   = Y.get('#demo_headings');
        Demo.background = Y.get('#demo_bg');
        Demo.hover      = Y.get('#demo_hover');

// Set up the submit handler to update the page styles and to
		// prevent the default action of the form:
        Y.on('submit', function (e) {
            e.halt();
            Demo.update();
        }, '#demo_form');
		
		//Log a message that the example is ready:
		Y.log("The example has been initialized.", "info", "example");
    }

//The event handler that process changes in the form field
	//values.  Each time the form is submitted, we check the 
	//validity of the submitted values and, if valid, apply
	//them using our StyleSheet instance.
    Demo.update = function () {
	
        var v = Y.Lang.trim(Demo.headings.get("value"));
        if (Demo.isValidColor(v)) {
            // multiple selectors are delimited by commas
            Demo.theme.set('h1,h2,h3,h4,h5,h6, #demo label', { color : v });
            Y.get('#demo_heading_value').set("innerHTML", v);
        } else {
			Y.log("The value submitted for headings was not valid.", "info", "example");
		}

v = Y.Lang.trim(Demo.background.get("value"));
        if (Demo.isValidColor(v)) {
            // use camelCase for style property names
            Demo.theme.set('.example-container', { backgroundColor : v });
            Y.get('#demo_background_value').set("innerHTML", v);
        } else {
			Y.log("The value submitted for background was not valid.", "info", "example");
		}

v = Y.Lang.trim(Demo.hover.get("value"));
        if (Demo.isValidColor(v)) {
            Demo.theme.set(
                '#toc ul li.selected a,'+
                '#toc ul li a:hover', { color : v });

Y.get('#demo_hover_value').set("innerHTML", v);
        } else {
			Y.log("The value submitted for hover color was not valid.", "info", "example");
		}

//Log a message that the update was processed fully:
		Y.log("The stylesheet has been updated.", "info", "example");

}

// Initialize the example when the DOM is ready
	Y.on("domready", Demo.init);

});

YUI Library Examples: StyleSheet: Adjusting a page theme on the fly

StyleSheet: Adjusting a page theme on the fly

Full code listing

Markup

JavaScript

StyleSheet Examples:

More StyleSheet Resources: