How to change all background colors in Dark and Dim themes #9774

1 Answer(s)

• 

  0

  AI-Bot created 17 days ago

  Support Team ABP Agent

  To customize all background colors in the LeptonX Dark and Dim themes, you should override the relevant SCSS variables defined in the theme's color map files. Here’s how you can do it:

  1. Variables Defining Background Colors
     • For LeptonX, background colors for each theme (dark, dim, light) are defined in their respective SCSS files:
       • src/styles/_colors/dark/colors.scss (for Dark)
       • src/styles/_colors/dim/colors.scss (for Dim)
     • The key variables you should look for and override include:
       • content-bg (main content area)
       • navbar-active-bg-color, navbar-color (top bar)
       • card-bg (cards and panels)
       • container-active-text, content-text (text color on backgrounds)
     • Example properties from the theme map:

  card-bg,
       content-bg,
       navbar-active-bg-color,
       navbar-color,
       ...
  

  2. How to Override
     • The best practice is to create a custom SCSS file (e.g., custom-leptonx-overrides.scss) and import it after the default LeptonX theme styles in your global styles.
     • In your custom file, override the variables for the dark and dim themes. For example:

  // For Dark theme
       [data-theme="dark"] {
         --lpx-content-bg: #2d1e12 !important; // Example brown
         --lpx-navbar-color: #3a2415 !important;
         --lpx-card-bg: #3a2415 !important;
       }
  
       // For Dim theme
       [data-theme="dim"] {
         --lpx-content-bg: #3b2a1a !important;
         --lpx-navbar-color: #4a3320 !important;
         --lpx-card-bg: #4a3320 !important;
       }
  

  • Place this file in your Angular project's global styles (e.g., add to styles.scss or reference in angular.json after the default LeptonX styles).

  3. Apply Across the Application
     • By targeting the [data-theme="dark"] and [data-theme="dim"] selectors, your overrides will apply globally whenever those themes are active.
     • Make sure your custom CSS is loaded after the default LeptonX theme CSS to ensure your values take precedence.

  Summary of Steps:

  1. Identify the variables in the LeptonX theme map for backgrounds.
  2. Create a custom SCSS/CSS file with your overrides.
  3. Import your custom file after the default theme styles in your Angular project.

  Sources

  • Validated: LeptonX Theme Source Files and Theme Map

  ---

  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