It seems working, If it meets your requirements that is acceptable.
Bu if you don't want to customize the theme source code, you can use the original JS file and customize loading CSS logic.
(function () {
window.initLeptonX = function (layout = currentLayout) {
currentLayout = layout;
// 👇 This event will be called when user interacts a theme change button.
leptonx.CSSLoadEvent.on(event => {
// 👇 You can even customize here according to your requirements.
loadThemeCSS('bootstrap', event, 'bootstrap-');
loadThemeCSS('color', event, '');
});
leptonx.init.run();
}
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}`;
}
leptonx.CSSLoadEvent.on(event => {
loadThemeCSS('bootstrap', event, 'bootstrap-');
loadThemeCSS('color', event, '');
});
function createStyleUrl(theme, type) {
if (isRtl()) {
theme = theme + '.rtl';
}
if (type) {
return `/Themes/LeptonX/Global/${currentLayout}/css/${type}-${theme}.css`;
}
return `/Themes/LeptonX/Global/${currentLayout}/css/${theme}.css`;
}
function isRtl() {
return document.documentElement.getAttribute('dir') === 'rtl';
}
})();
Hello kfrancis Let me check this out. Probably some APIs or XAML extensions might be changed that we used.
By default, it's not possible with an option or configuration but you can try the following approach:
There is a section in the layout like below
<head>
@await Component.InvokeLayoutHookAsync(LayoutHooks.Head.First, StandardLayouts.Application)
<title>@title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta charset="UTF-8" />
<meta name="description" content="@ViewBag.MetaDescription" />
<link rel="icon" href="~/favicon.svg" type="image/svg+xml">
<!-- 👇 You can customize this section in cshtml 👇 -->
<link href="~/Themes/LeptonX/Global/side-menu/css/bootstrap-@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-bootstrap-@selectedStyle" />
<link href="~/Themes/LeptonX/Global/side-menu/css/@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-color-@selectedStyle" />
<abp-style-bundle name="@LeptonXThemeBundles.Styles.Global" />
You can access the entire page code by downloading LeptonX source code
Hi Enisn, We use ABP 7.3, and we manually setup lepton in 2.3 instead of 2.4-preview.
We try to understand why being up to date on a stable version we end up with a preview.
By putting the lepton manually in 2.3 it works.
ABP Framework/Commercial & LeptonX are different products and they have different versions & release cycles and pipleines. And LeptonX depends on ABP, so we can't publish it before ABP is released. ABP templates are shipped with ABP release, so the templates includes 2.3.*-* version pattern to make the build successful, because LeptonX stable version isn't available when the ABP is released.
So, this is the main reason why templates can't know the latest version of LeptonX, and it references the latest stable or premium version of a specific major version
Hi,
LeptonX 2.3 packages for ABP 7.3
If you use ABP 2.2, you should use LeptonX v2.2.x
Can you try with 2.2.2 LeptonX version?
As a second approach, you can replace LeptonXStyleProvider implementation in your application instead customizing application layout.
[Dependency(ReplaceServices = true)]
[ExposeServices(typeof(LeptonXStyleProvider))]
public class MyLeptonXStyleProvider : LeptonXStyleProvider
{
public ICurrentTenant CurrentTenant { get; }
public MyLeptonXStyleProvider(
IHttpContextAccessor httpContextAccessor,
IOptions<LeptonXThemeOptions> leptonXThemeOption,
ICurrentTenant currentTenant) : base(httpContextAccessor, leptonXThemeOption)
{
CurrentTenant = currentTenant;
}
public override async Task<string> GetSelectedStyleAsync()
{
if (CurrentTenant.Name == "Volosoft")
{
return "blue"; // It'll load blue.css (don't use '.css' extension here)
}
return await base.GetSelectedStyleAsync();
}
}
Make sure cookies are deleted, otherwise the client will load the last css after JS is initialized. To disable JavaScript style loading by overriding the Themes\LeptonX\Global\scripts\style-initializer.js file with the following customized version:
(function () {
window.initLeptonX = function (layout) {
leptonx.init.run();
}
})();
It can be placed under wwwroot
Hi, it's not provided by default and and LeptonXThemeOptions is not a tenant-specific option. You can implement something different to make tenant-specific styles.
There is a section in the layout like below
<head>
@await Component.InvokeLayoutHookAsync(LayoutHooks.Head.First, StandardLayouts.Application)
<title>@title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta charset="UTF-8" />
<meta name="description" content="@ViewBag.MetaDescription" />
<link rel="icon" href="~/favicon.svg" type="image/svg+xml">
<!-- 👇 You can customize this section in cshtml 👇 -->
<link href="~/Themes/LeptonX/Global/side-menu/css/bootstrap-@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-bootstrap-@selectedStyle" />
<link href="~/Themes/LeptonX/Global/side-menu/css/@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-color-@selectedStyle" />
<abp-style-bundle name="@LeptonXThemeBundles.Styles.Global" />
You can access the entire page code by downloading LeptonX source code
Thanks for your detailed explanation, I'm creating another internal issue for the angular version, we'll fix it in next releases
For the angular project, can you share more information? Which button do you refer as 'the green button' maybe you can share a screenshot to help us understand better
Ok, It seems it's a bug on single-layer module template. I'm creating an internal issue for that and we'll fix it soon.
You can use the following steps to replace leptonx with basic theme.
Replace using statements
using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX;
using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX.Bundling;
with
using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Bundling;
using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic;
Replace typeof(AbpAspNetCoreMvcUiLeptonXThemeModule), with typeof(AbpAspNetCoreMvcUiBasicThemeModule),
Replace the ConfigureBundles() method inside like below:
private void ConfigureBundles()
{
Configure<AbpBundlingOptions>(options =>
{
options.StyleBundles.Configure(
LeptonXThemeBundles.Styles.Global,
bundle =>
{
bundle.AddFiles("/global-styles.css");
}
);
});
}
