Open In App

jQuery Mobile Page theme Option

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices.

Page is a widget in jQuery Mobile to display single or multiple linked components within the HTML document. It is responsible for maintaining a single item in jQuery Mobile’s framework.

In this article, we are going to learn the jQuery Mobile Page theme option. The theme option sets the colour scheme for the page widget. The colour depends on the colour schemes available in the jQuery Mobile themes.

Syntax: The theme option takes a single character from a-z where each character depicts a colour. The theme colour also depends on the jQuery Mobile theme.

$("#gfgpage").page({
    theme: 'b',
});

 

  • Get the theme option:

    var theme = $( "#gfgpage" ).page( "option", "theme" );
  • Set the theme option:

    $( "#gfgpage" ).page( "option", "theme", "b" );

CDN Links: Use the following CDN links for your jQuery Mobile project.

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example: In the following example, we have used the dark theme i.e. passed character b for the theme of the page widget.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div data-role="page" id="gfgpage">
        <div data-role="header">
            <h1 style="color:green;">GeeksforGeeks</h1>
        </div>
        <div data-role="main" class="ui-content">
            <h3>jQuery Mobile Page theme Option</h3>
            <p>A computer science portal for geeks.</p>
  
            <h5>Tutorials on:</h5>
            <ul>
                <li>Data Structures</li>
                <li>Algorithms</li>
                <li>Machine Learning</li>
            </ul>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $("#gfgpage").page({
                theme: 'b',
            });
        });
    </script>
</body>
</html>


Output:

jQuery Mobile Page theme Option

Reference: https://api.jquerymobile.com/page/#option-theme



Last Updated : 14 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads