SMUI 主题

使用 Sass 主题化

_smui-theme.scss 文件是您为主题定义 Sass 变量的地方。您可以查看 MDC-Web 组件的自述文件，了解如何深入设计组件的样式。最重要的（有可能也是您唯一想要的）是设置主题颜色。对于 Material 调色板，您可以使用 @use “@material/theme/color-palette”。您也可以设置边框半径变量的样式。

这有一个 _smui-theme.scss 示例文件，您可以将其用作起点。

  1. @use '@material/theme/color-palette';
  3. $background: #fff;
  5. @use '@material/theme/index' as theme with (
  6.   $primary: color-palette.$purple-500,
  7.   $secondary: color-palette.$teal-600,
  8.   $surface: #fff,
  9.   $background: $background,
  10.   $error: #b00020,
  11. );
  13. html,
  14. body {
  15.   background-color: $background;
  16.   color: if(theme.contrast-tone($background) == 'dark', #000, #fff);
  17. }
  19. a {
  20.   color: color-palette.$blue-500;
  21. }
  22. a:visited {
  23.   color: color-palette.$blue-800;
  24. }

使用基础 CSS 主题化

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

  1. /* Theme colors. */
  2. :root {
  3.   --mdc-theme-primary: #ff3e00;
  4.   --mdc-theme-secondary: #676778;
  5.   --mdc-theme-background: #fff;
  6.   --mdc-theme-surface: #fff;
  7.   --mdc-theme-error: #b71c1c;
  8.   --mdc-theme-on-primary: #fff;
  9.   --mdc-theme-on-secondary: #fff;
  10.   --mdc-theme-on-surface: #000;
  11.   --mdc-theme-on-error: #fff;
  12.   --mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
  13.   --mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
  14.   --mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
  15.   --mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
  16.   --mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
  17.   --mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
  18.   --mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
  19.   --mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
  20.   --mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
  21.   --mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
  22.   --mdc-theme-text-primary-on-dark: #fff;
  23.   --mdc-theme-text-secondary-on-dark: hsla(0, 0%, 100%, 0.7);
  24.   --mdc-theme-text-hint-on-dark: hsla(0, 0%, 100%, 0.5);
  25.   --mdc-theme-text-disabled-on-dark: hsla(0, 0%, 100%, 0.5);
  26.   --mdc-theme-text-icon-on-dark: hsla(0, 0%, 100%, 0.5);
  27. }
  29. /* Layout grid spacing. */
  30. :root {
  31.   --mdc-layout-grid-margin-desktop: 24px;
  32.   --mdc-layout-grid-gutter-desktop: 24px;
  33.   --mdc-layout-grid-column-width-desktop: 72px;
  34.   --mdc-layout-grid-margin-tablet: 16px;
  35.   --mdc-layout-grid-gutter-tablet: 16px;
  36.   --mdc-layout-grid-column-width-tablet: 72px;
  37.   --mdc-layout-grid-margin-phone: 16px;
  38.   --mdc-layout-grid-gutter-phone: 16px;
  39.   --mdc-layout-grid-column-width-phone: 72px;
  40. }