`

移动端安卓和IOS开发框架Framework7教程-Color Themes

Framework7 
阅读更多

iOS Theme Colors

实例预览

Framework7 comes with 10 ready to use default iOS color themes. But first of all, you need to include additional stylesheet to be able to use all these color themes:

  1. <head>
  2.     ...
  3.     <link rel="stylesheet" href="path/to/framework7.ios.min.css">
  4.     <!-- It should be included After main Framework7 styles -->
  5.     <link rel="stylesheet" href="path/to/framework7.ios.colors.min.css">
  6. </head>
复制

 

gray   #8e8e93
white   #ffffff
black   #000000
lightblue   #5ac8fa
yellow   #ffcc00
orange   #ff9500
pink   #ff2d55
blue (default)   #007aff
green   #4cd964
red   #ff3b30

Material Theme Colors

实例预览

Framework7 comes with 22 ready to use default Material color themes. And also, you need to include additional stylesheet to be able to use all these color themes:

  1. <head>
  2.     ...
  3.     <link rel="stylesheet" href="path/to/framework7.material.min.css">
  4.     <!-- It should be included After main Framework7 styles -->
  5.     <link rel="stylesheet" href="path/to/framework7.material.colors.min.css">
  6. </head>
复制

 

red   #f44336
pink   #e91e63
purple   #9c27b0
deeppurple   #673ab7
indigo   #3f51b5
blue (default)   #2196f3
lightblue   #03a9f4
cyan   #00bcd4
teal   #009688
green   #4caf50
lightgreen   #8bc34a
lime   #cddc39
yellow   #ffeb3b
amber   #ffc107
orange   #ff9800
deeporange   #ff5722
brown   #795548
gray   #9e9e9e
bluegray   #607d8b
white   #ffffff
black   #000000
 

Apply Color Themes

It is easy to apply color themes. All you need is just to add theme-[color] class to the required parent element. It could be body, view, page, navbar, toolbar, list-block, etc. For example:

  1. <body class="theme-red">
  2.     ...
  3. </body>
  4.  
  5. <div class="page theme-green">
  6.     ...
  7. </div>
  8.  
  9. <div class="list-block theme-pink">
  10.     ...
  11. </div>
  12.  
  13. <div class="navbar theme-orange">
  14.     ...
  15. </div>
  16.  
  17. <div class="buttons-row theme-yellow">
  18.     ...
  19. </div>
复制

Note, that applied color theme affects only interractive elements such as links, buttons, form elements, icons. It doesn't change basic text color or background colors on other blocks.

Layout Themes

Framework7 also has 2 additional layout themes: "white" and "dark". To apply layout theme we need to add layout-[theme] class to the required parent element. It could be body, view, page, navbar, toolbar, list-block, etc. For example:

  1. <body class="layout-dark">
  2.     ...
  3. </body>
  4.  
  5. <div class="page layout-white">
  6.     ...
  7. </div>
  8.  
  9. <div class="list-block layout-dark">
  10.     ...
  11. </div>
复制

Helper Classes

There are also additional helper classes that could be used without/outside themes:

  • color-[color] - if you want to change text color of required block, or change color of separate button, link or icon, for example:

    1. <a class="button color-red">Red button</a>
    2. <i class="icon icon-back color-red">
    复制
     

  • bg-[color] - if you want quickly to set predefined background color on some block or element:

    1. <span class="badge bg-pink">14</span> - pink badge
    复制
     

  • border-[color] - if you want to set predefined border color:

    1. <div class="navbar border-white">...</div>
    复制
     

And of course, you can mix these helper classes:

  1. <div class="navbar bg-lightblue color-white border-gray">...</div>
复制

Note, that you can't use helper classes inside of container with theme classes. For example, this will have no effect:

  1. <div class="theme-red">
  2.     <a href="#" class="color-blue">Link will be red, not blue</a>
  3. </div>
复制

 

1
顶
1
踩
分享到：
| 移动端安卓和IOS开发框架Framework7教程- ...
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    replace-colorthemes, 用Emacs主题框架替换颜色主题.zip

    replace-colorthemes, 用Emacs主题框架替换颜色主题 color-theme-modern 这个项目用Emacs主题框架取代了颜色主题。如果你想让我移植你的favarite主题，请按的问题请求。屏幕截图屏幕截图在这里是 。安装所有主题均...

    all-color-themes.jar

    Android studio主题

    Gnome-OSC-HS--2-themes.zip

    Gnome-OSC-HS--2-themes，包含Gnome-OSC-HS-(transparent)和Gnome-OSC-HS-(transparent)，用于Ubuntu 18.04，仿mac风格，直接放入/usr/share/themes下就可以了使用

    Stylish-Custom-themes-for-any-website_v1.8.3.rar

    标题 "Stylish-Custom-themes-for-any-website_v1.8.3.rar" 提供了一个关于自定义网站主题的扩展程序，版本为1.8.3。这个扩展程序允许用户为他们访问的任何网站定制样式，从而改变浏览器的视觉体验。其中，“Stylish...

    putty-color-themes-master.zip

    PuTTY是一个Telnet、SSH、rlogin、纯TCP以及串行接口连接软件。较早的版本仅支持Windows平台，在最近...Putty是一个免费的、Windows x86平台下的Telnet、SSH和rlogin客户端，但是功能丝毫不逊色于商业的Telnet类工具。

    framework7 demo

    这款框架的设计灵感来源于iOS和Android的原生界面，使得开发者能够创建出与原生应用体验相似的Web应用。它提供了丰富的组件和API接口，适用于开发跨平台的Hybrid App或Web App。 在"framework7 demo"中，你将找到一...

    Laravel开发-platform-themes-lang-cs

    在本文中，我们将深入探讨Laravel框架在开发过程中的应用，特别是针对“Laravel开发-platform-themes-lang-cs”项目，这是一个将Cartalist平台的用户界面语言本地化为捷克语的工程。Laravel作为PHP的热门框架，以其...

    Gnome-OSC-HS--2-themes.tar.xz

    Gnome-OSC-HS--2-themes.tar.xz ubuntu18.04 仿 mac 主题

    eclipse主题插件Eclipse Color Themes

    Eclipse Color Themes是一款针对Eclipse集成开发环境的增强插件，它允许用户自定义和导入各种色彩主题，为代码编辑器提供美观且个性化的显示效果。这款插件极大地提升了开发者在长时间编程时的视觉舒适度，同时也能...

    lovelace-ios-themes::red_heart::mobile_phone::house::robot:主题受iOS暗:black_large_square:和浅:white_medium_square:模式的启发，适用于不同背景的Lovelace家庭助理，by @basnijholt

    这包括暗模式和亮模式以及7种不同的HomeKit背景。安装此主题将添加28个不同的主题： ios-light-mode-dark-green ios-dark-mode-dark-green ios-light-mode-light-blue ios-dark-mode-light-blue ios-light-mode-...

    Laravel开发-laravel-themes

    在本文中，我们将深入探讨 Laravel 开发中的一个重要组件——`laravel-themes`，这是一款专为 Laravel 5.3 设计的主题管理工具。Laravel 是一个优雅、强大的 PHP 框架，而 `laravel-themes` 为开发者提供了更灵活的...

    Laravel开发-wardrobe-themes

    6. **CSS 框架集成**：许多 Wardrobe-themes 可能会集成 Bootstrap 或其他 CSS 框架，这些框架提供了预设的样式和组件，可以快速构建美观的界面。 7. **主题安装与配置**：在 WardrobeCMS 中，安装和激活新的主题...

    jquery-easyui-themes

    jquery-easyui-themes,easyui主题包，包含metro-blue metro-gray metro-green metro-orange metro-red ui-cupertino ui-dark-hive ui-pepper-grinder ui-sunny这些主题，具体的php使用方式见：...

    新版Android开发教程 笔记7--基础UI编程1

    以上是“新版Android开发教程 笔记7--基础UI编程1”中的核心知识点，通过学习和实践这些内容，开发者可以构建出功能丰富、交互流畅的Android应用程序。对于初学者而言，理解并熟练掌握这些概念是成为专业Android...

    eclipse-color-theme-master.zip

    描述中提到的链接是一个CSDN博客文章，作者"chszs"提供了关于如何安装和使用这些颜色主题的教程。根据提供的URL，我们可以预期这篇博客会详细介绍安装步骤和使用方法，这对于不熟悉Eclipse插件管理的用户非常有帮助...

    iedea color themes

    idea color themes 网站上上的所有主题

    jquery-ui-themes-1.8.22.zip

    本文将深入探讨“jquery-ui-themes-1.8.22.zip”这一压缩包，揭示其中包含的资源和使用方法，帮助开发者更好地理解和应用jQuery UI。 首先，让我们理解“jquery-ui-themes-1.8.22.zip”的结构。这个压缩包是jQuery ...

    google 社区 jquery-ui-themes-1.8.12.zip

    《jQuery UI Themes 1.8.12：Google 社区资源详解》 在Web开发领域，jQuery UI是一个广泛使用的JavaScript库，它扩展了基础的jQuery功能，提供了丰富的用户界面组件，如日期选择器、对话框、拖放操作等。jQuery UI...

Magicbox
Global site tag (gtag.js) - Google Analytics