- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Material Theme Colors
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