本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.16节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
一旦定义好了自己的配色方案（color scheme），可以在HTML中通过设置主题来使用它。而且就算没有定义“自定义配色方案”，仍可以使用默认的配色方案，如代码清单9-18所示。
代码清单9-18 在单张页面中使用多个主题
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Themes 1</title> 04 <meta name="viewport" 05 content="width=device-width, initial-scale=1"> 06 <link rel="stylesheet" href= 07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08 <script type="text/javascript" 09 src="http://code.jquery.com/jquery-1.7.1.min.js"> 10 </script> 11 <script type="text/javascript" src= 12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13 </script> 14 15 </head> 16 <body> 17 18 <div data-role="page"> 19 20 <div data-role="header" data-theme="b"> 21 <h1>Themes 1</h1> 22 23 <a href="#first" data-icon="arrow-l">First</a> 24 <a href="#second" data-icon="arrow-r" data-theme="a">Second</a> 25 26 </div> 27 <div data-role="content"> 28 <p>Content</p> 29 <a href="#third" data-role="button" data-icon="arrow-u" 30 data-theme="c">Third</a> 31 <a href="#third" data-role="button" data-icon="delete" 32 data-theme="d">Fourth</a> 33 <a href="#third" data-role="button" data-icon="arrow-d" 34 data-theme="e">Fifth</a> 35 </div> 36 37 <div data-role="footer" data-position="fixed" data-theme="c"> 38 <div data-role="controlgroup" data-type="horizontal"> 39 <a href="#" data-role="button" data-theme="a">First</a> 40 <a href="#" data-role="button" data-theme="b">Second</a> 41 <a href="#" data-role="button" data-theme="c">Third</a> 42 <a href="#" data-role="button" data-theme="d">Fourth</a> 43 <a href="#" data-role="button" data-theme="e">Fifth</a> 44 </div> 45 </div> 46 </div> 47 48 49 </body> 50 </html>第20行更改了header的主题。然而，在header中的按钮（第24行）却拥有不同的主题。类似地，content拥有的是默认主题，第29～34行中的所有按钮的主题都不一样。甚至组合在一起的按钮也可以有不同的主题，如第39～43行所示。
你也可以为整张页面选择一个主题，而不用在很多不同的元素上进行主题设置。代码清单9-19演示了如何更改主题。
代码清单9-19 更改整张页面的主题
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Themes 2</title> 04 <meta name="viewport" 05 content="width=device-width, initial-scale=1"> 06 <link rel="stylesheet" href= 07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08 <script type="text/javascript" 09 src="http://code.jquery.com/jquery-1.7.1.min.js"> 10 </script> 11 <script type="text/javascript" src= 12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13 </script> 14 15 </head> 16 <body> 17 18 <div data-role="page" data-theme="a"> 19 20 <div data-role="header" > 21 <h1>Themes 2</h1> 22 </div> 23 24 <div data-role="content"> 25 <h1>Heading</h1> 26 <p>Themes can also <a href="#">set the theme</a> for regular 27 content.</p> 28 <ul> 29 <li>Test</li> 30 </ul> 31 </div> 32 33 </div> 34 35 36 </body> 37 </html>第18行设置了整张页面的主题。请看一下屏幕上的显示结果，你会发现甚至是content的背景也渲染成了深色，上面的字是浅色的。
