Framework7 - Material Theme Colors


Advertisements

Description

Framework7 provides 22 different material color themes, by default, for the application.

Example

The following example demonstrates the use of material 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.material.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> <a href = "#" class = "link icon-only"><i class = "icon icon-back"></i></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>
                  
                  <a href = "#" class = "floating-button"><i class = "icon icon-plus"></i></a>
                  <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>
                        
                        <p class = "buttons-row">
                           <a href = "#" class = "button button-raised active">Button One</a>
                           <a href = "#" class = "button button-raised">Button Two</a>
                           <a href = "#" class = "button button-raised">Button Three</a>
                        </p>
                        
                        <p class = "buttons-row">
                           <a href = "#" class = "button button-raised button-fill active">Button One</a>
                           <a href = "#" class = "button button-raised button-fill">Button Two</a>
                           <a href = "#" class = "button button-raised button-fill">Button 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 = "red">
                                 <div class = "item-inner">
                                    <div class = "item-title">Red</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 = "blue">
                                 <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 = "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 = "cyan">
                                 <div class = "item-inner">
                                    <div class = "item-title">Cyan</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 = "lime">
                                 <div class = "item-inner">
                                    <div class = "item-title">Lime</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "color-radio" value = "amber">
                                 <div class = "item-inner">
                                    <div class = "item-title">Amber</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 = "brown">
                                 <div class = "item-inner">
                                    <div class = "item-title">Brown</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 = "bluegray">
                                 <div class = "item-inner">
                                    <div class = "item-title">Blue Gray</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "color-radio" value = "black" />
                                 <div class = "item-inner">
                                    <div class = "item-title">Black</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>
                        </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 ({
            material: true
         });
         
         var $$ = Dom7;
         $$('input[name = "color-radio"]').on('change', function () {
            if (this.checked) {
               var colors = 'theme-' + 'red pink  blue lightblue cyan green lime amber orange  brown gray bluegray  black'.split(' ').join(' theme-');
               $$('.view').removeClass(colors);
               $$('.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 material_theme_colors.html file in your server root folder.

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

  • The example provides 22 Material color themes for your application. Here we have used only some of the colors to show how they work in the material theme layout. The default color is blue.

framework7_color_themes.htm
Advertisements