3 Answer(s)

• 

  0

  AI-Bot created one month ago

  Support Team ABP Agent

  To create and use a new LeptonX theme or customize the color schema for a Blazor Hybrid app, follow these steps:

  1. Create a New LeptonX Theme

  • Copy the existing LeptonX theme folder (typically under wwwroot/themes/lepton-x or similar) to a new folder, e.g., wwwroot/themes/leptonx-custom.
  • Rename the theme files and update references inside the files to use your new theme name (e.g., replace lepton-x with leptonx-custom).

  2. Update or Create SCSS/CSS Files

  • Edit or create SCSS/CSS files in your new theme folder.
  • To change primary, secondary, and other colors, locate the variables section (often in a file like _variables.scss or similar) and update values:

  $primary: #your-primary-color;
    $secondary: #your-secondary-color;
    $background: #your-background-color;
  

  • For background color in dark mode, override the relevant CSS variable or class:

  body.lpx-dark {
      background-color: #6B4F28; /* Example brown */
    }
  

  3. Reference the New Theme in Your Project

  • In your Blazor project, update the theme reference in the Program.cs or Startup.cs (or wherever the theme is configured):

  builder.Services.Configure<LeptonXThemeOptions>(options =>
    {
        options.DefaultStyle = "custom"; // Use your new style name
    });
  

  • Ensure your new theme's CSS is included in the project and loaded by the app (add to _Host.cshtml or index.html as needed).

  4. Register and Use the Theme

  • If your theme introduces a new style (e.g., "custom"), register it in the theme options or via dependency injection so the app recognizes it.

  5. Other Vital Information

  • Make sure all assets (images, fonts, etc.) referenced in your theme are present in the new theme folder.
  • If you want to support switching between multiple styles, implement a style switcher in your UI and update the theme dynamically.

  Secondary: Change Only the Color Schema

  • To only change colors (primary, secondary, background), override the relevant CSS variables in a custom CSS file and include it after the default LeptonX CSS.
  • For example, in wwwroot/css/custom-leptonx-overrides.css:

  :root {
      --lpx-primary: #your-primary-color;
      --lpx-secondary: #your-secondary-color;
    }
    body.lpx-dark {
      background-color: #6B4F28; /* Brown for dark mode */
    }
  

  • Add this file to your Blazor app's layout so it loads after the main theme.

  This approach aligns with common ABP conventions, but specific official documentation for this exact scenario is not available.

  Sources

  • Validated: LeptonX Lite Theme Overview

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  1

  Sturla created one month ago

  Ok I´m going to answer this and suggest that this will be added as whole to to the abp.io documentation (you can fix it if its incurrect but it works now fine for me!)

  How to change the color pallet

  I didn´t really need to create a new template, I just needed to change the default color pallet schema so it works with every default theme.

  Step 1

  Create this css file Blazor/wwwroot/css/custom-leptonx-overrides.cs

  Step 2

  Add the following overrides to it (you choose the colors)

  /*
   * YourSite Custom LeptonX Theme Overrides
   * Following ABP LeptonX theme customization guidelines
   * High specificity overrides to ensure they load after LeptonX defaults
   */
  
  /* LeptonX and Bootstrap color variable overrides */
  :root {
      /* LeptonX variables */
      --lpx-primary: #BB977D !important;
      --lpx-primary-rgb: 72, 81, 88 !important;
      --lpx-secondary: [#485158](https://abp.io/QA/Questions/485158) !important;
      --lpx-secondary-rgb: 187, 151, 125 !important;
      --lpx-success: #EEA646 !important;
      --lpx-success-rgb: 238, 166, 70 !important;
      --lpx-warning: #EEA646 !important;
      --lpx-warning-rgb: 238, 166, 70 !important;
      --lpx-info: #BB977D !important;
      --lpx-info-rgb: 72, 81, 88 !important;
      --lpx-danger: #ef4444 !important;
      --lpx-danger-rgb: 239, 68, 68 !important;
      --lpx-brand: #BB977D !important;
      --lpx-brand-rgb: 72, 81, 88 !important;
      --lpx-brand-contrast: #fff !important;
      --lpx-brand-hover: #3a434a !important;
      --lpx-brand-active: #23272b !important;
      /* Bootstrap variables */
      --bs-primary: #BB977D !important;
      --bs-primary-rgb: 72, 81, 88 !important;
      --bs-secondary: [#485158](https://abp.io/QA/Questions/485158) !important;
      --bs-secondary-rgb: 187, 151, 125 !important;
      --bs-success: #EEA646 !important;
      --bs-success-rgb: 238, 166, 70 !important;
      --bs-warning: #EEA646 !important;
      --bs-warning-rgb: 238, 166, 70 !important;
      --bs-info: #BB977D !important;
      --bs-info-rgb: 72, 81, 88 !important;
      --bs-danger: #ef4444 !important;
      --bs-danger-rgb: 239, 68, 68 !important;
      /* Button backgrounds and borders */
      --bs-btn-primary-bg: #BB977D !important;
      --bs-btn-primary-border-color: #BB977D !important;
      --bs-btn-primary-hover-bg: #3a434a !important;
      --bs-btn-primary-hover-border-color: #3a434a !important;
      --bs-btn-primary-active-bg: #23272b !important;
      --bs-btn-primary-active-border-color: #23272b !important;
      --bs-btn-primary-color: #fff !important;
      --bs-btn-secondary-bg: [#485158](https://abp.io/QA/Questions/485158) !important;
      --bs-btn-secondary-border-color: [#485158](https://abp.io/QA/Questions/485158) !important;
      --bs-btn-secondary-hover-bg: #a07d5f !important;
      --bs-btn-secondary-hover-border-color: #a07d5f !important;
      --bs-btn-secondary-active-bg: #8a6a4d !important;
      --bs-btn-secondary-active-border-color: #8a6a4d !important;
      --bs-btn-secondary-color: #fff !important;
  }
  
  /* High specificity for buttons and LeptonX/Bootstrap classes */
  .btn-primary, .lpx-btn-primary {
      background-color: var(--bs-primary) !important;
      border-color: var(--bs-primary) !important;
      color: var(--bs-btn-primary-color) !important;
  }
  .btn-secondary, .lpx-btn-secondary {
      background-color: var(--bs-secondary) !important;
      border-color: var(--bs-secondary) !important;
      color: var(--bs-btn-secondary-color) !important;
  }
  
  /* Optionally, override icon and menu item colors */
  .lpx-menu-item.selected .lpx-menu-item-icon,
  .lpx-menu-item.selected .lpx-menu-item-link,
  .lpx-menu-item.selected .lpx-menu-item-link .lpx-menu-item-icon {
      color: var(--lpx-brand) !important;
  }
  
  /* Dark mode overrides (optional, extend as needed). 
     This can be done for all the other themes "light","system" etc. */
  [data-bs-theme="dark"], [data-theme="dark"] {
      --lpx-primary: #23272b !important;
      --lpx-secondary: #8a6a4d !important;
      --bs-primary: #23272b !important;
      --bs-secondary: #8a6a4d !important;
  }
  

  Step 3: Update main.css in Blazor.Client

  Add the css above to the www/main.css file.

  Step 4: Create a bundle contriputor

  Create this class in Blazor root

  public class YourSiteThemeBundleContributor : BundleContributor
  {
      public override void ConfigureBundle(BundleConfigurationContext context)
      {
          // Add global styles and custom CSS files in the correct order
          context.Files.Add(new BundleFile("/global-styles.css", true));
          context.Files.Add(new BundleFile("/css/custom-leptonx-overrides.css", true));
          context.Files.Add(new BundleFile("/main.css", true));
      }
  }
  

  and update the code in ConfigureBundles() in your module class

  Configure<AbpBundlingOptions>(options =>
  {
      // Blazor Web App
      options.Parameters.InteractiveAuto = true;
  
  
      // MVC UI - Use bundle contributor for global styles
      options.StyleBundles.Configure(
          LeptonXThemeBundles.Styles.Global,
          bundle =>
          {
              bundle.AddContributors(typeof(YourSiteThemeBundleContributor));
          }
      );
  
      options.ScriptBundles.Configure(
          LeptonXThemeBundles.Scripts.Global,
          bundle =>
          {
              bundle.AddFiles("/global-scripts.js");
          }
      );
  
      // Blazor UI - Use bundle contributor for global styles
      options.StyleBundles.Configure(
          BlazorLeptonXThemeBundles.Styles.Global,
          bundle =>
          {
              bundle.AddContributors(typeof(YourSiteThemeBundleContributor));
          }
      );
  });
  

  I hope this will help the next poor soul out there!

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  hi

  Thanks. Your question has been refunded.

  Save Cancel

  1