LeptonX Angular UI

要将 LeptonX 添加到您现有的项目中，请按照以下步骤操作。

• 首先，使用以下命令安装 @volosoft/abp.ng.theme.lepton-x。 yarn add @volosoft/abp.ng.theme.lepton-x

• 然后，如下编辑 angular.json 文件：

  将特定于主题的样式添加到文件的 styles 数组中。更多信息请查看主题配置文档。

• 最后，从 app.config.ts 中移除 provideThemeLepton，并在 app.config.ts 中添加以下提供者：

import { provideThemeLeptonX } from '@volosoft/abp.ng.theme.lepton-x';
import { provideSideMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';
// import { provideThemeLepton } from '@volo/abp.ng.theme.lepton'; 

export const appConfig: ApplicationConfig = {
  providers: [
    // provideThemeLepton() 删除此项
    provideSideMenuLayout(), // 取决于您选择的布局
    provideThemeLeptonX(),
  ],
};

如果您想使用 顶部菜单 而不是 侧边菜单，请按如下方式添加 provideTopMenuLayout，并导入这些样式：

import { provideThemeLeptonX } from '@volosoft/abp.ng.theme.lepton-x';
import { provideTopMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTopMenuLayout(),
    provideThemeLeptonX(),
  ],
};

• 至此，LeptonX 主题应已在您的应用程序中成功运行。但是，您可能需要根据需求为每个可用主题覆盖一些 CSS 变量，如下所示：

:root {
  .lpx-theme-dark {
    --lpx-logo: url("/assets/images/logo/logo-light.svg");
    --lpx-logo-icon: url("/assets/images/logo/logo-light-icon.svg");
    --lpx-brand: #edae53;
  }

  .lpx-theme-dim {
    --lpx-logo: url("/assets/images/logo/logo-light.svg");
    --lpx-logo-icon: url("/assets/images/logo/logo-light-icon.svg");
    --lpx-brand: #f15835;
  }

  .lpx-theme-light {
    --lpx-logo: url("/assets/images/logo/logo-dark.svg");
    --lpx-logo-icon: url("/assets/images/logo/logo-dark-icon.svg");
    --lpx-brand: #69aada;
  }
}

如果一切正常，您可以从 package.json 中移除 @volo/abp.ng.theme.lepton 包。

服务端

如需将您的服务端项目（宿主和/或 IdentityServer 项目）迁移到 LeptonX，请遵循服务端迁移文档。