Toolbar改变字体颜色记录

本文介绍如何通过设置Toolbar主题和样式来实现Toolbar标题、按钮颜色及菜单背景颜色的自定义,达到预期的设计效果。

最近在搞Toolbar时遇到一个问题,Toolbar上面的颜色总是和我期待的颜色不一样,我想要的效果是:

  1. Toolbar标题颜色、返回按钮颜色、更多按钮颜色、点击更多后出现的菜单底色为白色
  2. 更多按钮下的菜单字体为黑色

最后尝试了很多方法,最后发现这样设置两个地方就可以:
1. 在Toolbar属性里加上两个主题:

android:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar”
app:popupTheme=”@style/ThemeOverlay.AppCompat.Light”

2.在主题中添加:

< item name=”android:textColorPrimary”>#FFFFFF< /item>

下面分别讲一下添加的这几行代码的含义:
android:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar” 表示我们将Toolbar设置为深色主题,深色主题中的图标及字体为白色,这样就把返回按钮颜色、更多按钮颜色设置为了白色。如果只添加这一行代码标题并不会变为白色,而且点击更多按钮弹出的菜单框字体颜色为白色,底色为黑色,这不是我们想要的效果。
app:popupTheme=”@style/ThemeOverlay.AppCompat.Light” 表示我们将菜单设置为亮色主题,这样点开菜单框就会是白色底黑色字了。但是标题字体颜色还是黑色的,这就需要我们添加的第三行代码了:< item name=”android:textColorPrimary”>#FFFFFF< /item>

这一行代码联合我们第一个设置的主题,就能将标题颜色设置为白色。

总而言之,这三行代码相互起作用,少了哪一行都不能达到我们期望的效果~

### 如何在 Quill Editor 中设置或修改文字颜色 要在 Vue 的 `quill-editor` 组件中实现文字颜色的设置功能,可以通过自定义工具栏选项来完成。以下是具体方法: #### 自定义工具栏中的颜色选项 通过引入 Quill 并扩展其默认的功能模块,可以轻松实现对文字颜色的支持。 ```javascript import { quillEditor, Quill } from 'vue-quill-editor'; import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.bubble.css'; // 导入并注册颜色属性 let ColorAttribute = Quill.import('attributors/class/color'); Quill.register(ColorAttribute, true); export default { components: { quillEditor, }, data() { return { editorOption: { placeholder: '输入文本...', theme: 'snow', modules: { toolbar: { container: [ [{ 'color': [] }], // 文字颜色下拉菜单 ], }, }, }, }; }, }; ``` 以上代码实现了以下几点[^1]: - 使用 `Quill.import` 方法导入了 `class/color` 属性。 - 将该属性注册到 Quill 编辑器实例中。 - 在工具栏配置中添加了一个支持动态选择的文字颜色选项。 #### 动态调整颜色白名单 如果希望限制用户可以选择的颜色范围,则可以在初始化时指定一个白名单数组作为参数传递给工具栏配置项。 ```javascript const colorWhitelist = ['#FF5733', '#33FF57', '#3357FF']; // 定义允许使用的颜色集合 ColorAttribute.whitelist = colorWhitelist; // 应用于颜色过滤机制 Quill.register(ColorAttribute, true); ``` 这样做的好处在于能够有效控制最终呈现效果的一致性和美观度,同时也减少了不必要的复杂操作界面带来的干扰因素[^2]。 #### 处理事件绑定逻辑 当需要监听某些特定交互行为(比如失去焦点或者获得焦点)发生后的回调函数执行情况时,可以直接利用组件自带的相关钩子来进行处理。 ```html <template> <div id="app"> <quill-editor v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"> </quill-editor> </div> </template> <script> methods: { onEditorBlur(editor) { console.log('editor blur!', editor); // 打印当前编辑状态信息至控制台供调试查看 }, onEditorFocus(editor) { console.log('editor focus!', editor); // 同样记录聚焦时刻的数据变化以便后续分析优化性能表现等方面考虑 } } </script> ``` 此部分展示了如何附加额外的行为响应能力于基础控件之上而不破坏原有结构设计原则的同时增强了用户体验满意度水平。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值