ionic4中自定义主题的颜色

ionic4的主题样式提供了一些主题样式,也可以自定义,比如可以修改主题样式的颜色,官方文档(https://ionicframework.com/docs/theming/colors)里说了怎么写CSS,但是没说写在哪个文件,我测了一下,应该是写在src/theme/variables.scss中,

官方提供的主题颜色生成器:https://ionicframework.com/docs/theming/color-generator,这个生成器,只能生成(修改)ionic自带的9个命名主题颜色。

要自己添加更多(命名主题)颜色 ,可以用这个文档下方的自定义颜色生成器:https://ionicframework.com/docs/theming/colors

所谓(命名)颜色主题,官方提供了9个默认的命名颜色主题。而每个命名颜色主题有相应6种状态,每个状态都要有相应的颜色值,比如primary这个主题,其对应6种状态:base、Base (rgb)、contrast、Contrast (rgb)、shade、 tint.

原文地址:https://www.cnblogs.com/johnjackson/p/11792111.html

时间: 2024-11-10 10:47:09

ionic4中自定义主题的颜色的相关文章

小程序之使用阿里字体图标 定义主题的颜色 控制首页标题的样式 如何使用组件 水平居中和垂直居中的方式 H5 关于上线后,

项目搭建 1==> 需要创建的文件夹 styles 存放公共的样式 components 存放组件 lib第三方库的 utils 自己的帮助库 reques 自己的接口 2==>如何快速创建页面 在app.json中 写好页面路径.直接保存,就会自动生成文件 "pages/good_lis/good_lis", "pages/cart/cart" 3==>如何使用阿里字体图标 将网址(生成的http://at.alicdn.com/t/font_1

react中自定义antd主题与支持less(第二部)

自定义主题 首先自定义主题需要修改antd,antd本身也是less写的之后编译成css的,所以当我们需要使用less. 1.yarn add react-app-rewire-less --dev const { injectBabelPlugin } = require('react-app-rewired'); + const rewireLess = require('react-app-rewire-less'); module.exports = function override(

【myeclipse】myeclipse设置主题和颜色

myeclipse设置主题和颜色(带解决jsp页面的script白色显示): 1.从myeclipse主题网站上下载自己喜欢的主题:http://eclipsecolorthemes.org/?list=downloads&lang=html (这里你可以选择预览的语言:java.php.html,由于我是前端,所以选择的html) 2.选择一个预览图点击进去,右面可以下载一个EPF的文件,然后保存在电脑的任何一个地方 (最好是在myeclipse文件夹下建一个color-theme文件夹,方便

WebAppBuilder自定义主题

by 李远祥 基本步骤: 创建新主题的文件夹 注册新的主题到manifest.json 文件 覆盖HeaderController 部件的颜色. 覆盖panel的颜色 覆盖弹出框的颜色 自定义字体 主题可以自定义的部分包括Brand的颜色.字体和其他的基础UI属性.以下使用珠宝箱主题进行修改,新的主题修改涉及到UI的一些CSS属性 Background color Text color Font family Font size Padding 这些UI组件在珠宝箱主题的标题控制组件.panel

Material使用05 自定义主题、黑夜模式\白天模式切换

需求: 1 不使用materil依赖内建的主题,使用自己创建的主题 2 利用自己创建的主题实现白天模式和黑夜模式 1 自定义主题 1.1 创建自定义主题文件 them.scss // 引入material自定义主题支持 @import '[email protected]/material/theming'; // 引入material公用的主题风格 @include mat-core(); // 自定义颜色 $my-app-primary: mat-palette($mat-blue); $m

element 如何自定义主题

自定义主题 在我学习element的时候,就直接忽略了.现在返回来学习一下 ,原来 通过自定义主题可以改变elemnt中默认的一些样式.这样,对于一些不想用elment自带但是用到比较多的样式,可以进行修改. 看了很多关于自定义主题的文章,其实都是 差不多的, 我想自己写一遍,加深一下印象,也希望能给别人带来帮助. 这篇博客的思路,总结性比较强,指的大家j借鉴:https://blog.csdn.net/young_emily/article/details/78591261 改变原有的elem

Flutter自定义主题并切换保存

现在越来越多的应用程序支持黑/白主题切换了,在Flutter中更是简单,Flutter库中提供了ThemeData.dark和Theme.light两个默认主题.在main.dart初始化MaterialApp的时候直接设置进去即可 MaterialApp( title: 'Flutter Demo', theme: ThemeData.light(), home: MyHomePage(title: 'Flutter Demo Home Page'), ); 一.自定义主题 知道怎么设定主题了

[技术干货] Zabbix创建自定义主题(theme)

前提:zabbix系统已部署好. 1.在你的zabbix系统找到assets/styles目录,创建css后缀的文件: cp blue-theme.css custom-theme.css 2.修改custom-theme.css的内容,由于是测试,我修改了导航栏的背景颜色:注释掉原来的css代码,然后把background-color修改成:aqua 3.在你的zabbix系统找到include/classes/core目录,在Z.php文件中添加以下php代码: vim Z.php publ

Vue的elementUI实现自定义主题

使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求,下面来介绍一下两种方法实现的具体步骤,(可以参考官方文档自定义主题官方文档),先说项目中没有使用scss编写,用主题工具的方法(使用的较多) 第一种方法:使用命令行主题工具使用vue-cli安装完项目并引入element-ui(具体可参考第二种方法中的介绍) 一.安装工具1,安装主题工具 npm i element-theme -g 2,安装chalk主题,可以从 npm 安装或者从 GitHub