使用自定义 CSS 定制 Lepton 主题

你可能希望通过自定义 CSS（层叠样式表）文件来改变网站的某些外观。本文档将向你展示如何向你的 ABP Blazor WebAssembly 解决方案添加自定义 CSS，以替换现有的 Lepton 主题 CSS。通过添加自定义 CSS，你将修改网站的整体外观。

请注意，自定义 CSS 必须包含 Lepton 主题使用的所有样式。如果只想覆盖某些样式，可以使用 Web 项目 wwwroot 文件夹中的 global.css 文件。

如何添加自定义 CSS？

下载 Lepton 主题源代码

下载 Lepton 主题源代码以获取现有的 CSS 文件。为此，在项目根文件夹中创建一个名为 LeptonTheme 的新文件夹，并在 LeptonTheme 文件夹内运行以下 ABP CLI 命令：

abp get-source Volo.LeptonTheme

复制到你的项目

在以下文件夹中，你将找到所有 Lepton CSS 文件。

src\Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton\Themes\Lepton\Global\styles

默认主题使用 Lepton6.css。
在 Web 项目的 wwwroot 文件夹下创建一个名为 styles 的文件夹。
将 Lepton6.css 复制到 wwwroot/styles 文件夹，并将其重命名为 custom.css。

自定义 CSS

打开 custom.css 并找到 .lp-opened-sidebar 样式。 注释掉现有的背景样式，并添加以下背景样式，这将改变主菜单的背景颜色。

 background: linear-gradient(7deg, #9f3049, #84a21f);

设置样式路径

将以下代码添加到：

wwwroot/appsettings.json 文件中 。

  "AbpCli": {
    "Bundle": {
      "Mode": "BundleAndMinify",
      "Name": "global",
      "Parameters": {
        "LeptonTheme.StylePath": "styles/custom.css"
      }
    }
  }

运行 Web 项目

现在主菜单的背景颜色已改变。通过这种方法，你可以改变网站的整体外观。