Blazor theme style customization #5194

6 Answer(s)

• 

  0

  liangshiwei created one year ago

  Support Team Fullstack Developer

  Hi,

  Are you using Blazor WASM or Blazor Server?

  Save Cancel
• 

  0

  it@keystonecustomhome.com created one year ago

  that was Blazor server, but were switching to Blazor WASM. get back to you if it's still an issue. Thank you

  Save Cancel
• 

  0

  liangshiwei created one year ago

  Support Team Fullstack Developer

  ok

  Save Cancel
• 

  0

  it@keystonecustomhome.com created one year ago

  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

  

  Save Cancel
• 

  0

  liangshiwei created one year ago

  Support Team Fullstack Developer

  ok, I will check it.

  Save Cancel
• 

  0

  liangshiwei created one year ago

  Support Team Fullstack Developer

  Hi,

  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

  

  Save Cancel