Svelte Material UI (SMUI) 主题定制完全指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00361/article/details/148578129

Svelte Material UI (SMUI) 主题定制完全指南

svelte-material-ui Svelte Material UI Components 项目地址: https://gitcode.com/gh_mirrors/sv/svelte-material-ui

前言

Svelte Material UI (SMUI) 是基于 Material Design 的 Svelte 组件库，提供了强大的主题定制能力。本文将深入讲解如何通过 Sass 和 CSS 变量两种方式为 SMUI 创建自定义主题，让你的应用拥有独特的视觉风格。

第一部分：使用 Sass 定制主题

1.1 准备工作

在开始主题定制前，需要安装 SMUI 主题构建工具：

npm install --save-dev smui-theme

1.2 创建主题模板

运行以下命令生成主题模板文件：

npx smui-theme template src/theme

这将创建：

src/theme/_smui-theme.scss (浅色主题)
src/theme/dark/_smui-theme.scss (深色主题)

1.3 配置构建脚本

在 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 文件。

1.4 引入主题文件

在 HTML 中引入生成的主题文件：

<!-- 支持深色模式 -->
<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)" />

<!-- 仅浅色模式 -->
<link rel="stylesheet" href="/smui.css" />

重要提示：安装新 SMUI 包后，需要重新运行 npm run prepare 以包含新包的样式。

1.5 核心主题变量配置

在 _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);
}

1.6 高级定制选项

形状定制

@use '@material/shape/index' as shape with (
  $small-component-radius: 0,   // 小组件圆角
  $medium-component-radius: 0,  // 中等组件圆角
  $large-component-radius: 0    // 大组件圆角
);

排版定制

@use '@material/typography/index' as typography with (
  $font-family: 'Roboto, sans-serif'
);

第二部分：使用 CSS 变量定制主题

对于不使用 Sass 的项目，可以通过 CSS 变量实现基础主题定制：

:root {
  /* 主题色 */
  --mdc-theme-primary: #ff3e00;
  --mdc-theme-secondary: #676778;
  --mdc-theme-background: #fff;
  --mdc-theme-surface: #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-layout-grid-margin-desktop: 24px;
  --mdc-layout-grid-gutter-desktop: 24px;
}

注意：CSS 变量只能覆盖部分样式，完整定制仍需使用 Sass。