Framework7 - iOS Theme Colors


Advertisements

Description

You can use 10 different default iOS color themes for the application.

Example

The following example demonstrates the use of iOS color themes in Framework7 −

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Color Themes</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed toolbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> <a href = "#" class = "link"><i class = "icon icon-back"></i><span>Back</span></a></div>
                        <div class = "center">Color Themes</div>
                        <div class = "right">
                           <a href = "#" class = "link icon-only"><i class = "icon icon-bars"></i></a>
                        </div>
                     </div>
                  </div>
                  
                  <div class = "toolbar">
                     <div class = "toolbar-inner">
                        <a href = "#" class = "link">Left</a>
                        <a href = "#" class = "link">Right</a>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">Lorem ipsum dolor sit amet, 
                        <a href = "#">consectetur</a> adipiscing elit, sed 
                           do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                           nisi ut aliquip ex ea commodo <a href = "#">consequat</a>.
                     </div>
                     
                     <div class = "content-block">
                        <p class = "buttons-row">
                           <a href = "#tab1" class = "tab-link active button">Tab One</a>
                           <a href = "#tab2" class = "tab-link button">Tab Two</a>
                           <a href = "#tab3" class = "tab-link button">Tab Three</a>
                        </p>
                     </div>
                     
                     <div class = "content-block-title">Select Your Theme Color</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "color-radio" value = "blue" checked>
                                 <div class = "item-inner">
                                    <div class = "item-title">Blue</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "color-radio" value = "gray">
                                 <div class = "item-inner">
                                    <div class = "item-title">Gray</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "color-radio" value = "lightblue">
                                 <div class = "item-inner">
                                    <div class = "item-title">Light Blue</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "color-radio" value = "orange">
                                 <div class = "item-inner">
                                    <div class = "item-title">Orange</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "color-radio" value = "pink">
                                 <div class = "item-inner">
                                    <div class = "item-title">Pink</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "color-radio" value = "green">
                                 <div class = "item-inner">
                                    <div class = "item-title">Green</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "color-radio" value = "red">
                                 <div class = "item-inner">
                                    <div class = "item-title">Red</div>
                                 </div>
                              </label>
                           </li>
                        </ul>
                     </div>
                     
                     <div class = "content-block-title">Select Your Default Layout Theme</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "layout-radio" value = "" checked>
                                 <div class = "item-inner">
                                    <div class = "item-title">Default</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "layout-radio" value = "layout-dark">
                                 <div class = "item-inner">
                                    <div class = "item-title">Dark</div>
                                 </div>
                              </label>
                           </li>
                           <li>
                           </li>
                        </ul>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
         var $$ = Dom7;
         
         $$('input[name = "color-radio"]').on('change', function () {
            if (this.checked) {
               $$('.view').removeClass('theme-pink theme-blue theme-red theme-gray theme-orange theme-lightblue theme-green');
               $$('.view').addClass('theme-' + $$(this).val());
            }
         });
         
         $$('input[name = "layout-radio"]').on('change', function () {
            if (this.checked) {
               $$('.view').removeClass('layout-dark layout-white');
               $$('.view').addClass(this.value);
            }
         });
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as ios_theme_colors.html file in your server root folder.

  • Open this HTML file as http://localhost/ios_theme_colors.html and the output is displayed as shown below.

  • The example provides 10 iOS color themes for your application. The default color is blue.

framework7_color_themes.htm
Advertisements