ionic-framework - 如何在 Ionic App 中更改原色
问题描述
在我的 variables.scss 文件中,我的原色为棕色。我有 2 个主题文件:
主题.green.scss 主题.yellow.scss
如果我想将绿色和黄色作为我的主题的原色,我该怎么做?在此先感谢您的帮助
解决方案
您可以使用以下代码更改或添加新颜色:
先去src/global.scss
:root {
--ion-color-gold: #ffd700;
--ion-color-gold-rgb: 255, 215, 0;
--ion-color-gold-contrast: #000000;
--ion-color-gold-contrast-rgb: 0, 0, 0;
--ion-color-gold-shade: #e0bd00;
--ion-color-gold-tint: #ffdb1a;
}
.ion-color-gold {
--ion-color-base: var(--ion-color-gold) !important;
--ion-color-base-rgb: var(--ion-color-gold-rgb) !important;
--ion-color-contrast: var(--ion-color-gold-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-gold-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-gold-shade) !important;
--ion-color-tint: var(--ion-color-gold-tint) !important;
}
所以现在你有一个新的颜色gold
,当你可以这样使用它时:
<ion-button color="gold">We now have a gold button :)</ion-button>
如果您想更改
primary
颜色,只需将每行更改为gold
以 这种方式更改即可。--ion-color-gold: #ffd700;
primary
推荐阅读
- java - 合并排序的 Java 实现;找不到错误
- c++ - 使用 TRESTClient 关闭时程序异常终止
- hibernate - 保存 JPA 实体错误 - TransientObjectException:对象引用未保存的瞬态实例 - 保存瞬态实例
- python - 如何根据单元格中存在的单词使用 pandas 替换列值
- java - 使用 Jetty 阻止响应
- react-native - 无法播放视频。如何访问 Android 模拟器中文件下载中的视频路径
- javascript - 如何从已编译的 Electron 应用程序中获取源文件?
- model-view-controller - 向剑道网格编辑器弹出窗口添加 id
- wso2 - 有没有办法更新正在运行的 Siddhi 应用程序
- python - Asyncio:当我们需要使用异步方法时,如何在 __del__ 方法中清理类的实例