基于 angular material theming 机制修改 mat-toolbar 的背景色(示例详解)

最近在学习 angular，记录一下昨天的进展，解决的问题是通过 theme 的配置修改 mat-toolbar 的背景色，避免对色彩的硬编码。

首先通过 mat-toolbar （以下统一称为 toolbar）的实现源代码 _toolbar-theme.scss 得知背景色来自 theme 中 background palette 的 app-bar。

background: theming.get-color-from-palette($background, app-bar);

于是通过下面的 scss 代码修改 app-bar 的颜色值

$app-bar-background: map-get(mat.$grey-palette, 900);
$background-palette: map-get($theme, background);
$background-palette: map-merge($background-palette, (app-bar: $app-bar-background));
$theme: map-merge($theme, (background: $background-palette));

注：第1行代码就是我们想使用的背景色

但发现上面的修改对 toolbar 没有起作用，而通过下面的代码可以拿到修改后的背景色

$background-palette: map-get($theme, background);
background-color: mat.get-color-from-palette($background-palette, app-bar);

看来 mat-toolbar 不是通过 theme 的 background 获取背景色的。

查看的 define-light-theme 的实现源码 _theming.scss 发现下面的代码

@if $accent != null {
    @warn $_legacy-theme-warning;
    @return private-create-backwards-compatibility-theme(_mat-validate-theme((
      _is-legacy-theme: true,
      color: _mat-create-light-color-config($primary, $accent, $warn),
    )));
  }

由此猜测 toolbar 可能是 legacy theme

进一步查看 toolbar 的实现源码 _toolbar-theme.scss

@mixin theme($theme-or-color-config) {
  $theme: theming.private-legacy-get-theme($theme-or-color-config);
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-toolbar') {
    $color: theming.get-color-config($theme);
    $density: theming.get-density-config($theme);
    $typography: theming.get-typography-config($theme);
    // ...
  }
}

的确是 legacy theme 。

最终在之前的代码基础上添加下面的代码解决了问题。

$color-palette: map-get($theme, color);
$color-background-palette: map-get($color-palette, background);
$color-background-palette: map-merge($color-background-palette, (app-bar: $app-bar-background));
$color-palette: map-merge($color-palette, (background: $color-background-palette));
$theme: map-merge($theme, (color: $color-palette));

在解决这个问题过程中搜索到的参考材料

Changing the background color in an Angular Material theme

How to get the current angular theme's color of a specific component

Allow overriding of theme background and foreground colors

到此这篇关于基于 angular material theming 机制修改 mat-toolbar 的背景色的文章就介绍到这了,更多相关angular material theming 修改背景色内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用Angular material主题定义自己的组件库的配色体系

    本期为Angular系列的第一篇文章,我会从这里搭建Angular sample项目.组件库.主题.然后每个组件等.使之成为一个比较通用的组件库系列文章,目的有二: 1.自己在写系列文章过程中不断夯实基础.不断学习补缺: 2.分享给一些不熟悉angular及自定义组件的同学,使之快速上手并提高. 1. 使用Angular CLI命令行工具生成一个Angular sample的项目:这里添加了一个optional的参数--style=scss,是为了后面使用angular material的the

  • Angular Material Icon使用详解

    1. 引入图标资源 在项目index.html文件里添加icon的图标库文件的引用. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" rel="stylesheet"> 2. 导入MatIconModule 如果需要在别的组件同样使用,则需要exports里面引出. 3. icons 资源 可以访问

  • Material(包括Material Icon)在Angular2中的使用详解

    1.引入material npm包 npm install @angular/material @angular/cdk 2.新建一个ebiz-material.module.ts方便管理引入material的module ng g module ebiz-material -app=ebiz-ui 3.在app的根module中引入ebiz-material.module.ts import { EbizMaterialModule } from './ebiz-material/ebiz-m

  • Angular6新特性之Angular Material

    Angular6新特性之Angular Material

    Angular Material是包含Navigation/Dashboard/Table三种图形类型,这篇文章中将会了解一些其使用的方式. 准备:安装Material 进入到上篇文章创建的demo2,使用ng add进行安装 liumiaocn:demo2 liumiao$ pwd /tmp/trainings/angualr/demo2 liumiaocn:demo2 liumiao$ 安装命令:ng add @angular/material liumiaocn:demo2 liumiao

  • AngularJs点击状态值改变背景色的实例

    实例如下: //更改边框颜色的代码 $("#shname").css({"border":"1px solid red"}); //排序有时候下标会错乱 不建议使用 建议使用讲师排序代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type=

  • 基于 angular material theming 机制修改 mat-toolbar 的背景色(示例详解)

    最近在学习 angular,记录一下昨天的进展,解决的问题是通过 theme 的配置修改 mat-toolbar 的背景色,避免对色彩的硬编码. 首先通过 mat-toolbar (以下统一称为 toolbar)的实现源代码 _toolbar-theme.scss 得知背景色来自 theme 中 background palette 的 app-bar. background: theming.get-color-from-palette($background, app-bar); 于是通过下

  • Spi机制在Android开发的应用示例详解

    Spi机制在Android开发的应用示例详解

    目录 Spi机制介绍 举个例子 ServiceLoader.load 在Android中的应用 总结 Spi机制介绍 SPI 全称是 Service Provider Interface,是一种将服务接口与服务实现分离以达到解耦.可以提升程序可扩展性的机制.嘿嘿,看到这个概念很多人肯定是一头雾水了,没事,我们直接就可以简单理解为是一种反射机制,即我们不需要知道具体的实现方,只要定义好接口,我们就能够在运行时找到一个实现接口的类,我们具体看一下官方定义. 举个例子 加入我是一个库设计者,我希望把一

  • 基于JavaScript实现继承机制之原型链(prototype chaining)的详解

    如果用原型方式重定义前面例子中的类,它们将变为下列形式: 复制代码 代码如下: function ClassA() {} ClassA.prototype.color = "blue";ClassA.prototype.sayColor = function () {    alert(this.color);}; function ClassB() {} ClassB.prototype = new ClassA(); 原型方式的神奇之处在于最后一行代码.这里,把 ClassB 的

  • golang遍历时修改被遍历对象的示例详解

    前言 很多时候需要将遍历对象中去掉某些元素,或者往遍历对象中添加元素,这时候就需要小心操作了. 对于go语言中的一些注意事项我做了总结和示例,留下点笔记. 遍历切片 1.遍历切片时去掉元素,错误示例: func main() { arr := []int{1, 2, 3, 4} for i := range arr { if arr[i] == 3 { arr = append(arr[:i], arr[i+1:]...) } } fmt.Println(arr) } 最终报错panic: ru

  • QT委托代理机制之Model View Delegate使用方法详解

    QT委托代理机制之Model View Delegate使用方法详解

    目录 本地数据加载(Data) 添加数据模型(Model) 添加代理模型(Proxy) 添加元素的代理(Delegate) 添加视图层(View) 使用效果 之前的一篇文章中介绍过QT的委托代理机制,那时候由于理解的比较浅就简单的给了一个例子.最近又做了一部分相关的工作,发现之前的理解有点问题.这里就详细的介绍一下QT的委托代理机制的用法,希望对大家有帮助. Model-View-Delegate机制可以简单的理解为将本地的一些数据以特定的UI形式呈现出来.常见的数据结构包括列表数据(list)

  • 基于Python_脚本CGI、特点、应用、开发环境(详解)

    基于Python_脚本CGI、特点、应用、开发环境(详解)

    CGI CGI 目前由NCSA维护,NCSA定义CGI如下: CGI(Common Gateway Interface),通用网关接口,它是一段程序,运行在服务器上如:HTTP服务器,提供同客户端HTML页面的接口. CGI程序可以是Python脚本.Perl脚本.Shell脚本.C或者C++程序等. 服务器 在你进行CGI编程前,确保您的Web服务器支持CGI及已经配置了CGI的处理程序. 所有的HTTP服务器执行CGI程序都保存在一个预先配置的目录.这个目录被称为CGI目录,并按照惯例,它被

  • Oracle数据库服务器修改操作系统时间的注意事项详解

    Oracle 数据库服务器修改操作系统时间的注意事项: 对单机或者ha 1.对数据库本身而言,其实是没有影响的.因为scn不依赖于os时间 2.对app(应用程序)而言,若是app中使用了sysdate之类的,那确实是有影响的. 基于这个情况,我们一般推荐:改os时间 不往之前的时间去改,而是往今后的时间去改. 推荐:安装oracle10g时候注意事项&修改oracle数据库字符集编码 [安装oracle10g时候注意事项:1. 关闭网络连接2.--修改oracle数据库字符集编码:先用syst

  • 使用Go基于WebSocket构建千万级视频直播弹幕系统的代码详解

    (1)业务复杂度介绍 开门见山,假设一个直播间同时500W人在线,那么1秒钟1000条弹幕,那么弹幕系统的推送频率就是: 500W * 1000条/秒=50亿条/秒 ,想想B站2019跨年晚会那次弹幕系统得是多么的NB,况且一个大型网站不可能只有一个直播间! 使用Go做WebSocket开发无非就是三种情况: 使用Go原生自带的库,也就是 golang.org/x/net ,但是这个官方库真是出了奇Bug多 使用GitHub大佬 gorilla/websocket 库,可以结合到某些Web开发框

  • 基于PHP+Mysql简单实现了图书购物车系统的实例详解

    PHP+Mysql简单实现了图书购物车 本文主要讲述如何通过PHP+HTML简单实现图书购物车的功能,这是提取我们php项目的部分内容.主要内容包括: 1.通过JavaScript和Iframe实现局部布局界面     2.PHP如何定义类实现访问数据库功能     3.实现简单的添加购物车功能     4.实现了后台管理前台的页面     由于这个项目是在期末完成,PHP只是刚学的,比较简单. 效果图如下: 这是后台管理的页面: 这是前台页面: index.php页面: <!DOCTYPE h

  • 基于Python的接口自动化unittest测试框架和ddt数据驱动详解

    基于Python的接口自动化unittest测试框架和ddt数据驱动详解

    引言 在编写接口自动化用例时,我们一般针对一个接口建立一个.py文件,一条接口测试用例封装为一个函数(方法),但是在批量执行的过程中,如果其中一条出错,后面的用例就无法执行,还有在运行大量的接口测试用例时测试数据如何管理和加载.针对测试用例加载以及执行控制,python语言提供了unittest单元测试框架,将测试用例编写在unittest框架下,使用该框架可以单个或者批量加载互不影响的用例执行及更灵活的执行控制,对于更好的进行测试数据的管理和加载,这里我们引入数据驱动的模块:ddt,测试数据和

随机推荐