when following these directions ... "have to be added under wwwroot/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/ folder for switching to your custom theme properly when selected." I am getting the following exception. I realize that this is because they have the same name as the NuGet files. this works perfectly in MVC and I would like to retain the same file names (theme name) here as well. Is there any way around this error while still keeping with the names Dark & Light. I also realize I can utilize the source theme project, but I'd rather keep things simple like what works in MVC. Thank you!

Error Conflicting assets with the same target path '_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/abp-bundle.css'. For assets 'Identity: C:\Users\mel.nuget\packages\volo.abp.aspnetcore.components.web.leptonxtheme\2.1.1\staticwebassets\side-menu\css\abp-bundle.css, SourceType: Package, SourceId: Volo.Abp.AspNetCore.Components.Web.LeptonXTheme, ContentRoot: C:\Users\mel.nuget\packages\volo.abp.aspnetcore.components.web.leptonxtheme\2.1.1\staticwebassets, BasePath: _content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme, RelativePath: side-menu/css/abp-bundle.css, AssetKind: All, AssetMode: All, AssetRole: Primary, RelatedAsset: , AssetTraitName: , AssetTraitValue: , CopyToOutputDirectory: Never, CopyToPublishDirectory: PreserveNewest, OriginalItemSpec: C:\Users\mel.nuget\packages\volo.abp.aspnetcore.components.web.leptonxtheme\2.1.1\staticwebassets\side-menu\css\abp-bundle.css' and 'Identity: F:\Documents\SourceCode\Keystone\KeyChoices.Core\KeyChoices.Abp\src\KeyChoices.Blazor\wwwroot_content\Volo.Abp.AspNetCore.Components.Web.LeptonXTheme\side-menu\css\abp-bundle.css, SourceType: Discovered, SourceId: KeyChoices.Blazor, ContentRoot: F:\Documents\SourceCode\Keystone\KeyChoices.Core\KeyChoices.Abp\src\KeyChoices.Blazor\wwwroot, BasePath: _content/KeyChoices.Blazor, RelativePath: _content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/abp-bundle.css, AssetKind: All, AssetMode: All, AssetRole: Primary, RelatedAsset: , AssetTraitName: , AssetTraitValue: , CopyToOutputDirectory: Never, CopyToPublishDirectory: PreserveNewest, OriginalItemSpec: wwwroot_content\Volo.Abp.AspNetCore.Components.Web.LeptonXTheme\side-menu\css\abp-bundle.css' from different projects. KeyChoices.Blazor C:\Program Files\dotnet\sdk\7.0.302\Sdks\Microsoft.NET.Sdk.Razor\targets\Microsoft.NET.Sdk.Razor.StaticWebAssets.targets 391

actually this is an issue with either Blazor server or assembly. exact same issue

Severity Code Description Project File Line Suppression State Error Conflicting assets with the same target path '_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/abp-bundle.css'. For assets 'Identity: C:\Users\mel.nuget\packages\volo.abp.aspnetcore.components.web.leptonxtheme\2.1.1\staticwebassets\side-menu\css\abp-bundle.css, SourceType: Package, SourceId: Volo.Abp.AspNetCore.Components.Web.LeptonXTheme, ContentRoot: C:\Users\mel.nuget\packages\volo.abp.aspnetcore.components.web.leptonxtheme\2.1.1\staticwebassets, BasePath: _content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme, RelativePath: side-menu/css/abp-bundle.css, AssetKind: All, AssetMode: All, AssetRole: Primary, RelatedAsset: , AssetTraitName: , AssetTraitValue: , CopyToOutputDirectory: Never, CopyToPublishDirectory: PreserveNewest, OriginalItemSpec: C:\Users\mel.nuget\packages\volo.abp.aspnetcore.components.web.leptonxtheme\2.1.1\staticwebassets\side-menu\css\abp-bundle.css' and 'Identity: T:\blazor\src\KeyChoices.Blazor\wwwroot_content\Volo.Abp.AspNetCore.Components.Web.LeptonXTheme\side-menu\css\abp-bundle.css, SourceType: Discovered, SourceId: KeyChoices.Blazor, ContentRoot: T:\blazor\src\KeyChoices.Blazor\wwwroot, BasePath: /, RelativePath: _content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/abp-bundle.css, AssetKind: All, AssetMode: All, AssetRole: Primary, RelatedAsset: , AssetTraitName: , AssetTraitValue: , CopyToOutputDirectory: Never, CopyToPublishDirectory: PreserveNewest, OriginalItemSpec: wwwroot_content\Volo.Abp.AspNetCore.Components.Web.LeptonXTheme\side-menu\css\abp-bundle.css' from different projects. KeyChoices.Blazor C:\Program Files\dotnet\sdk\7.0.302\Sdks\Microsoft.NET.Sdk.Razor\targets\Microsoft.NET.Sdk.Razor.StaticWebAssets.targets 391

This is the design of Blazor: https://learn.microsoft.com/en-us/dotnet/core/compatibility/aspnet-core/5.0/blazor-static-web-assets-validation-logic-updated

You can try this:

wwwroot/scripts/leptonx-blazor-compatibility.js

window.afterLeptonXInitialization = function () {
    var isRtl = JSON.parse(localStorage.getItem("Abp.IsRtl"));
    var direction = isRtl ? "rtl" : "ltr";
    replaceStyleWith(
        createStyleUrl('layout-bundle', direction),
        `lpx-layout-bundle-style-${direction}`,
        `lpx-layout-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
    replaceStyleWith(
        createStyleUrl('abp-bundle', direction),
        `lpx-abp-bundle-style-${direction}`,
        `lpx-abp-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
    replaceStyleWith(
        createStyleUrl('blazor-bundle', direction),
        `lpx-blazor-bundle-style-${direction}`,
        `lpx-blazor-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
    replaceStyleWith(
        createStyleUrl('font-bundle', direction),
        `lpx-font-bundle-style-${direction}`,
        `lpx-font-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
    function createStyleUrl(theme, direction = 'ltr') {
        const styleName = direction === 'rtl' ? `${theme}.rtl` : theme;
        return `${window.currentLayout}/css/${styleName}.css`
    function createId(theme, type) {
        return theme && `lpx-theme-${type}-${theme}`;
    function replaceStyleWith(path, id, previousId) {
        const link = document.createElement('link');
        link.href = path;
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.id = id;
        const prevElem = document.querySelector(`#${previousId}`);
        document.getElementsByTagName('head')[0].appendChild(link);
        if (previousId) {
            prevElem?.remove();
        return link;
    function loadThemeCSS(key, theme, themeOld, cssPrefix, direction = 'ltr') {
        const themeId = createId(theme, key);
        const previousThemeId = createId(themeOld, key);
        replaceStyleWith(createStyleUrl(cssPrefix + theme, direction), themeId, previousThemeId);
(function () {
    (function(history){
        var pushState = history.pushState;
        history.pushState = function(state) {
            if (typeof history.onpushstate == "function") {
                history.onpushstate({state: state});
            setTimeout(function(){
                var scrollBar = leptonx.init.perfectScrollbarInstances[0];
                if(scrollBar)
                    scrollBar.element.scrollTop = 0;
                leptonx.mobileNavbar.closeMenu();
            }, 100);
            return pushState.apply(history, arguments);
    })(window.history);
    function isAlreadyLoaded(id) {
        return document.querySelector(`link[id^="lpx-theme-${id}-"]`)?.id;
    function loadThemeCSS(key, event, cssPrefix) {
        const newThemeId = createId(event.detail.theme, key);
        const previousThemeId = createId(event.detail.previousTheme, key);
        const loadedCSS = isAlreadyLoaded(key);
        if (newThemeId !== loadedCSS) {
            leptonx.replaceStyleWith(
                createStyleUrl(cssPrefix + event.detail.theme),
                newThemeId,
                previousThemeId || loadedCSS
    function createId(theme, type) {
        return theme && `lpx-theme-${type}-${theme}`;
    window.initLeptonX = function (layout = currentLayout, defaultStyle = "dim") {
        window.currentLayout = layout;
        leptonx.globalConfig.defaultSettings =
                appearance: defaultStyle,
                containerWidth: 'full',
        leptonx.CSSLoadEvent.on(event => {
            loadThemeCSS('bootstrap', event, 'bootstrap-');
            loadThemeCSS('color', event, '');
        leptonx.init.run();
    const oldAfterLeptonXInitialization = window.afterLeptonXInitialization;
    window.afterLeptonXInitialization = function () {
        if(oldAfterLeptonXInitialization){
            oldAfterLeptonXInitialization();
    function createStyleUrl(theme, type) {
        if (isRtl()) {
            theme = theme + '.rtl';
        if (type) {
            return `${window.currentLayout}/css/${type}-${theme}.css`
        return `${window.currentLayout}/css/${theme}.css`;
    function isRtl() {
        return document.documentElement.getAttribute('dir') === 'rtl';
})();
public class MyScriptContributor : BundleContributor
    public override void ConfigureBundle(BundleConfigurationContext context)
        context.Files.RemoveAll(x => x.Contains("leptonx-blazor-compatibility.js"));
        context.Files.Add("/scripts/leptonx-blazor-compatibility.js");
options.ScriptBundles.Configure(
    BlazorLeptonXThemeBundles.Scripts.Global,
    bundle =>
        bundle.AddContributors(new MyScriptContributor());
Copy all CSS to your project.
Now, it's working