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. mniGraffle常用快捷键

    OmniGraffle 是 Mac 上的绘图利器.Graffle 在很多方面对标 Windows 系统上的 Microsoft Visio,是制作各种文档的绝妙工具. 变换移动 放大:Cmd+Shif ...

  2. python中IO多路复用、协程

    一.IO多路复用 IO多路复用:检测多个socket是否已经发生变化(是否已经连接成功/是否已经获取数据)(可读/可写) import socket def get_data(key): client ...

  3. C语言Ⅰ博客作业06

    这个作业属于哪个课程 C语言程序设计Ⅰ 这个作业要求在哪里 熟练掌握多分支结构,字符型数据类型和逻辑运算符 我在这个课程的目标是 https://www.cnblogs.com/tongyingjun ...

  4. 29、[源码]-AOP原理-AnnotationAwareAspectJAutoProxyCreatovi

    29.[源码]-AOP原理-AnnotationAwareAspectJAutoProxyCreatovi

  5. 洛谷 P2580 于是他错误的点名开始了 题解

    每日一题 day10 打卡 Analysis trie树模板题,只需用到简单的插入和查询就好了 如果想要学trie树,见信息学奥赛一本通·提高篇P82 #include<iostream> ...

  6. ueditor+flash粘贴word

    实现方式: 1.前端引用代码 .粘贴word里面的图片路径是fill://D 这种格式 我理解这种是非浏览器安全的 许多浏览器也不支持 目前项目是用了一种变通的方式: 先把word上传到后台 .poi ...

  7. bat批处理运用

    一.简单批处理内部命令简介 1.Echo 命令 –显示 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置. 语法: echo [{on│off}] [mess ...

  8. jQuery相关方法10

    一.链式编程的原理 <script> //构造函数 function Person(age){ this.age=age; this.sayHi=function(txt){ if(txt ...

  9. 数据库学习之七--视图(View)

    一.定义 视图:指计算机数据库中的一个临时虚拟表,其内容由查询定义:同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在. 二.优点 1. 优点: a. ...

  10. NetworkX系列教程(1)-创建graph

    小书匠Graph图论 研究中经常涉及到图论的相关知识,而且常常面对某些术语时,根本不知道在说什么.前不久接触了NetworkX这个graph处理工具,发现这个工具已经解决绝大部分的图论问题(也许只是我 ...