使用自定义 CSS 定制 Lepton 主题

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

请注意，自定义 CSS 必须包含 Lepton 主题使用的所有样式。如果只想覆盖某些样式，可以使用 Web 项目 wwwroot 文件夹中的 global-styles.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);

设置样式路径

将以下代码添加到： YourProjectWebModule.cs 中的 ConfigureServices 方法内

。

Configure<LeptonThemeOptions>(options =>
{
    options.StylePath = "/styles/custom.css";
});

运行 Web 项目

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