1、Ionic4.x Theming(主题)

Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改。

https://ionicframework.com/docs/theming/advanced

2、Ionic4.x 增加内置主题颜色

找到 src/theme/variables.scss 文件,如下代码新增 favorite 颜色

.ion-color-favorite {
--ion-color-base: #69bb7b;
--ion-color-base-rgb: 105,187,123;
--ion-color-contrast: #ffffff;
--ion-color-contrast-rgb: 255,255,255;
--ion-color-shade: #5ca56c;
--ion-color-tint: #78c288;
}

用法

<ion-button color="favorite">
自定义颜色
</ion-button>

3、修改内置组件默认样式

官方文档:https://ionicframework.com/docs/api/button

在 ionic4.x 组件中有 CSS Custom Properties。我们可以通过 CSS Custom Properties 提供的样式 来修改 ionic4.x 内置组件的默认样式。

找到 src/theme/variables.scss 文件修改 ion-button 的默认样式。

ion-button {
--color: #222; --background:red;
}

4、修改底部 Tabs 背景颜色以及按钮颜色

<ion-tabs>
<ion-tab-bar slot="bottom" color="favorite">
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon> <ion-label>Tab One</ion-label>
</ion-tab-button> <ion-tab-button tab="tab2">
<ion-icon name="apps"></ion-icon>
<ion-label>Tab Two</ion-label> </ion-tab-button>
</ion-tab-bar> </ion-tabs>
.ion-color-favorite {
--ion-color-base: #69bb7b;
--ion-color-base-rgb: 105,187,123;
--ion-color-contrast: #ffffff;
--ion-color-contrast-rgb: 255,255,255;
--ion-color-shade: #5ca56c;
--ion-color-tint: #78c288;
}

contrast 对比色,比如底部 tabs 的颜色是#69bb7b 则里面按钮的颜色是#ffffff

Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色的更多相关文章

  1. AgileBoot - 如何集成内置数据库H2和内置Redis

    本项目地址: github: https://github.com/valarchie/AgileBoot-Back-End gitee: https://gitee.com/valarchie/Ag ...

  2. 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改

    作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...

  3. kafka删除主题数据和删除主题

    1.删除主题 在server.properties中增加设置,默认未开启 delete.topic.enable=true 删除主题命令 /bin/kafka-topics --delete --to ...

  4. ROS笔记——创建简单的主题发布节点和主题订阅节点

    在安装好ROS后,接着学习如何创建节点和节点之间的通信方式,以一个简单的主题发布节点和主题订阅节点说明. 节点是连接ROS网络等可执行文件,是实现某些功能的软件包,也是一个主要计算执行的进程. 一.创 ...

  5. R语言︱LDA主题模型——最优主题数选取(topicmodels)+LDAvis可视化(lda+LDAvis)

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:在自己学LDA主题模型时候,发现该模 ...

  6. R语言︱LDA主题模型——最优主题...

    R语言︱LDA主题模型——最优主题...:https://blog.csdn.net/sinat_26917383/article/details/51547298#comments

  7. 用js限制网页只能在微信内置浏览器或支付宝内置浏览器中打开

    function is_weixinOrAli(){ var ua = navigator.userAgent.toLowerCase(); //判断浏览器的类型 if (ua.match(/Micr ...

  8. 自用 Pycharm 主题配色分享(主题才是开发第一生产力)

    写在前面的话 是的,我又回来了,上一篇[使用 Visual Studio Code(VSCode)搭建简单的 Python + Django 开发环境]才说真香,结果用两天就发现很多恶心的问题拦住了菜 ...

  9. Unity苹果(iOS)内购接入(Unity内置IAP)

    https://www.jianshu.com/p/4045ebf81a1c Unity苹果(iOS)内购接入(Unity内置IAP) Kakarottog                       ...

随机推荐

  1. Linux 命令之 alias

    alias 的作用是为命令设置别名,用于提高输入效率 alias 的临时设置 临时设置很简单,直接举例说明 [r@1lin24 ~]$ alias cdlog='cd /var/log' [r@1li ...

  2. Spring Cloud 之 全局配置

    在微服务架构中,全局配置的重要性不言而喻.SpringCloud的全局配置存储主要基于 Git 来实现,即配置信息存储在Git服务器,以统一的方式对外提供访问.在使用上分为 ConfigServer和 ...

  3. [终章]进阶20-流程控制结构--if/case/while结构 - 三个while的存储过程案例(批量生成表单数据) - 随机长度的随机字符串的存储过程案例

    . mysql 存储过程中尽量使用 @变量 而不用局部变量, @变量不容易报错!权限小,更改一下就报错! . sql中判断相等'=' ,用'=' 不用'=='. . #流程控制结构 /* 顺序结构: ...

  4. Eigen

    Eigen: https://eigen.tuxfamily.org/dox/GettingStarted.html

  5. seo与python大数据结合给文本分词并提取高频词

    最近研究seo和python如何结合,参考网上的一些资料,写的这个程序. 目的:分析某个行业(例如:圆柱模板)用户最关心的一些词,根据需求去自动调整TDK,以及栏目,内容页的规划 使用方法: 1.下载 ...

  6. P2P system:How Chord tackles failures

    若有peer failures 怎么办 接上面的例子,如果N32 fail掉了,但是N80的finger table还没有更新,这样query到了N16,它找不到N32,只有N80,这样query就会 ...

  7. 多线程下,使用new实现单例

    import threading class Test(object): from threading import Lock lock = Lock() flag = None def __new_ ...

  8. 洛谷P2577 午餐【贪心】【线性dp】

    题目:https://www.luogu.org/problemnew/show/P2577 题意:n个人每个人有一个打饭时间和吃饭时间,将他们分成两个队伍.每个人打到饭之后就马上去吃饭.问怎么安排可 ...

  9. The 2019 China Collegiate Programming Contest Harbin Site F. Fixing Banners

    链接: https://codeforces.com/gym/102394/problem/F 题意: Harbin, whose name was originally a Manchu word ...

  10. Java多线程下载初试

    一.服务端/客户端代码的实现 服务端配置config @ConfigurationProperties("storage") public class StoragePropert ...