主题

变量有两层。系统变量全站共用，例如 --md-sys-color-primary、--md-sys-typescale-*、--md-sys-shape-*。组件变量只作用于一种组件，例如 --md-filled-button-container-color。

实心按钮的容器色先看 --md-filled-button-container-color。这条没设时，才用 --md-sys-color-primary。

只改主色，所有还没单独设过容器色的按钮一起变：

:root {
  --md-sys-color-primary: #006a6a;
}

只要这一个按钮变，就设组件变量。这时再改主色，这个按钮不变：

md-filled-button.danger {
  --md-filled-button-container-color: #b3261e;
}

字体、圆角也是这个顺序。某个组件具体有哪些变量，看该组件页的主题表。

下面是浅色主题的默认值。暗色里，示意图上的角色与浅色同一档；Background、Surface Dim、Surface Container High、Surface Variant、Surface Tint 仍用各自的暗色档。写在这些颜色上的文字，用对应的 --md-sys-color-on-*。表面用 --md-sys-color-on-surface 或 --md-sys-color-on-surface-variant。

在全站设一次主色和它上面的文字色，自己的元素直接用：

:root {
  --md-sys-color-primary: #006a6a;
  --md-sys-color-on-primary: #ffffff;
}

.banner {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

这些变量要先在 :root 上生成出来，做法见「问题与支持」里的「怎么在自己的样式里使用 --md-sys-*？」。

全部变量：系统颜色对应表、色阶表

全站换字体，改下面两条。默认都是 Roboto。

下面是五档文字的 medium。Display、Headline 用品牌字体，Title、Body、Label 用普通字体。

全站换成另一种无衬线字体：

:root {
  --md-ref-typeface-brand: "Noto Sans";
  --md-ref-typeface-plain: "Noto Sans";
}

只把正文 medium 加大，其它档不动：

:root {
  --md-sys-typescale-body-medium-size: 1rem;
  --md-sys-typescale-body-medium-line-height: 1.5rem;
}

p {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  font-weight: var(--md-sys-typescale-body-medium-weight);
}

只换标题用的字体时，改 --md-sys-typescale-headline-medium-font，不要改上面那两个全局字体名。

全部变量：字体、文字规格

自己的卡片用中等圆角：

.card {
  border-radius: var(--md-sys-shape-corner-medium);
}

按钮默认用的是 --md-sys-shape-corner-full，改 corner-medium 不会让按钮变方。要改按钮圆角，设 --md-filled-button-container-shape。具体见对应组件的主题。

全部变量：圆角