SMUI 主题

使用 Sass 进行主题设置

如果您打算使用 Sass 进行主题设置，阅读一个Sass 简介 会很有帮助。但是，您不需要了解太多关于 Sass 的知识就可以为 SMUI 创建基本的主题。

要创建自定义 Sass 主题，请安装 SMUI 主题构建器。

npm install --save-dev smui-theme

您可以使用它从模板创建主题目录。如果需要，调整到您的源目录。

npx smui-theme template src/theme

这将在 src/theme 中创建一个用于浅色模式的 _smui-theme.scss 文件，以及一个用于深色模式的备用 _smui-theme.scss 文件在 src/theme/dark 中。这就是您设置主题变量的地方。

构建您的主题

在您的 package.json 文件中，在“scripts”部分添加此脚本，根据需要调整源/目标文件。

"prepare": "npm run smui-theme-light && npm run smui-theme-dark",
"smui-theme-light": "smui-theme compile build/smui.css -i src/theme",
"smui-theme-dark": "smui-theme compile build/smui-dark.css -i src/theme/dark",

或者，如果您不需要深色模式支持。

"prepare": "smui-theme compile build/smui.css -i src/theme",

现在运行 npm run prepare 来构建 CSS 文件，然后在您的页面上添加它们。类似于这样，根据需要调整路径。

<!-- SMUI Styles -->
<link rel="stylesheet" href="/smui.css" media="(prefers-color-scheme: light)" />
<link
  rel="stylesheet"
  href="/smui-dark.css"
  media="screen and (prefers-color-scheme: dark)"
/>

或者，如果您不需要深色模式支持。

<!-- SMUI Styles -->
<link rel="stylesheet" href="/smui.css" />

重要：smui-theme 编译器只会包含在运行时安装的包的 Sass。如果您安装了新的 SMUI 包，则应运行 npm run prepare 来重建 CSS。

主题变量

主题设置中最重要的部分（也许是您唯一关心的部分）是设置主题颜色。对于 Material 颜色调色板，您可以使用 @use “@material/theme/color-palette”。您可能还想设置圆角变量。

要了解如何深入设置各个组件的样式，您可以查看MDC-Web 组件 的 README。如果您需要更多帮助，请查看 MDC-Web 网站上的主题设置指南。SMUI 使用来自 MDC-Web 的所有样式，因此该指南中关于 Sass 和 CSS 的所有内容都适用于 SMUI。

以下是一个您可以用作起点的示例 _smui-theme.scss 文件。

@use '@material/theme/color-palette';

$background: #fff;

@use '@material/theme/index' as theme with (
  $primary: color-palette.$purple-500,
  $secondary: color-palette.$teal-600,
  $surface: #fff,
  $background: $background,
  $error: #b00020
);

html,
body {
  background-color: $background;
  color: if(theme.contrast-tone($background) == 'dark', #000, #fff);
}

a {
  color: color-palette.$blue-500;
}
a:visited {
  color: color-palette.$blue-800;
}

进一步自定义

如果您想进一步自定义样式，您可以在其他 MDC 或 SMUI 组件中设置额外的变量。一些值得注意的是形状变量 和排版变量。您可以将它们添加到您的 _smui-theme.scss 文件中。例如，您可以通过设置形状变量来删除 SMUI 中的圆角。

@use '@material/shape/index' as shape with (
  $small-component-radius: 0,
  $medium-component-radius: 0,
  $large-component-radius: 0
);

只需确保将它直接放在 @use '@material/theme/index' 块之后。文件中的所有 @use 语句必须位于 Sass 中任何样式之前。另外，请记住，如果您同时使用浅色和深色主题，则需要将其包含在两个主题文件中。

添加类和变量

如果您想使用 MDC 的类和变量（例如 var(--mdc-theme-primary) 和 class="mdc-theme--primary-bg"），您可以在 Sass 文件中的某个地方添加以下行。一个很好的添加位置是在您的 _smui-theme.scss 文件中。

@use '@material/theme/styles';

添加 Material 排版

您可以添加 Material 排版 作为应用程序的默认排版。

主题设置裸 CSS

如果您使用裸 CSS（或预制主题），您可以使用 CSS 变量设置主题选项的子集。请注意，并非 SMUI 中的所有颜色都从 CSS 变量读取，因此某些部分仍然会使用原始 Sass 编译中定义的颜色。以下是 SMUI 网站上 CSS 中的变量副本。您可以将其用作您自己的主题的起点。

/* Theme colors. */
:root {
  --mdc-theme-primary: #ff3e00;
  --mdc-theme-secondary: #676778;
  --mdc-theme-background: #fff;
  --mdc-theme-surface: #fff;
  --mdc-theme-error: #b71c1c;
  --mdc-theme-on-primary: #fff;
  --mdc-theme-on-secondary: #fff;
  --mdc-theme-on-surface: #000;
  --mdc-theme-on-error: #fff;
  --mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
  --mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
  --mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
  --mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
  --mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-primary-on-dark: white;
  --mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
  --mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
  --mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
  --mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5);
}

/* Layout grid spacing. */
:root {
  --mdc-layout-grid-margin-desktop: 24px;
  --mdc-layout-grid-gutter-desktop: 24px;
  --mdc-layout-grid-column-width-desktop: 72px;
  --mdc-layout-grid-margin-tablet: 16px;
  --mdc-layout-grid-gutter-tablet: 16px;
  --mdc-layout-grid-column-width-tablet: 72px;
  --mdc-layout-grid-margin-phone: 16px;
  --mdc-layout-grid-gutter-phone: 16px;
  --mdc-layout-grid-column-width-phone: 72px;
}