Layout Configuration

The provided configuration defines the structure for customizing the logo and theme settings in your application. You can use the LibConfig interface and LIB_LAYOUT_CONFIG injection token to set up and manage these configurations globally.

To further customize your application, you should modify the themeConfig and logoConfig properties within the configuration object. Adjust the availableThemes array to include additional themes by specifying their name and extension. Set a preferred theme as the defaultTheme to ensure it loads on startup:

app.config.ts

import { AppSharedModule, LIB_LAYOUT_CONFIG } from '@tradinos/cms-frontend-layout';

{
  provide: LIB_LAYOUT_CONFIG,
  useValue: {
    themeConfig: {
      availableThemes: [
        {
          name:'lara-light',
          extension: 'css',

        },
        {
          name: 'lara-dark',
          extension: 'css',
        },
      ],
      defaultTheme: {
        name: 'lara-light',
        extension: 'css',
      },
 
    },
    logoConfig: {
      darkLogoPath: 'assets/images/dark-logo.png',
      lightLogoPath: 'assets/images/light-logo.png',
    },
  },
},
importProvidersFrom([
  AppSharedModule,
]),

And you need to update your angular.json file to apply the style in your app :

//If you want to use another theme , you need to replace it with "lara" theme 
"styles": [
    "src/styles.scss",
    {
      "input": "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
      "bundleName": "lara-light",
      "inject": false
    },
    {
      "input": "node_modules/primeng/resources/themes/lara-dark-blue/theme.css",
      "bundleName": "lara-dark",
      "inject": false
    }
]

Do not forget to add prime theme in your index.html file:

 <link id="app-theme" rel="stylesheet" type="text/css" href="lara-light.css">// use your own theme

The themeConfig to applay the style for the light and dark mode , if you have more pritty colors for your app , we ofcourse support the artist inside you 😎, you can override the tailwind theme by adding those to the main style file:

 theme: {
    colors: {
      primary: {
        light: 'var(--primary-light)',
        DEFAULT: 'var(--primary)',
        dark: 'var(--primary-dark)',
      },
      secondary: {
        light: 'var(--secondary-light)',
        DEFAULT: 'var(--secondary)',
        dark: 'var(--secondary-dark)',
      },
      white: 'var(--white)',
      black: 'var(--black)',
    },
    spacing: {
      sm: 'var(--spacing-sm)',
      md: 'var(--spacing-md)',
      lg: 'var(--spacing-lg)',
      xl: 'var(--spacing-xl)',
    },
  }

For example:

@import "@tradinos/cms-frontend-layout/themes/theme.css";
@import "primeicons/primeicons.css";

:root {
  /* Colors */
  --primary-light: #a5b4fc;
  --primary: #6366f1;
  --primary-dark: #4338ca;
  --secondary-light: #e9d5ff;
  --secondary: #a855f7;
  --secondary-dark: #7e22ce;
  --white: #ffffff;
  --black: #000000;

  /* Spacing */
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
}

if you want to know more about prime themes options you can visit this link to explore more themes https://v17.primeng.org/theming#builtinthemes

In the following sections, we will explore modifying these settings to tailor the appearance and functionality of your application.

⚠️ Important: Required Imports in styles.scss

Please ensure that the following imports are present in your src/styles.scss file:

@import "primeicons/primeicons.css"; @import "@tradinos/cms-frontend-layout/themes/theme.css";These imports are required for the layout configuration to work correctly:

• @import "primeicons/primeicons.css"; - Required for PrimeIcons to display correctly

• @import "@tradinos/cms-frontend-layout/themes/theme.css"; - Required for layout theme styles and theme switching functionality

Example from Codebase:

File: src/styles.scss

@import "primeicons/primeicons.css"; Required for icons @import "../node_modules/quill/dist/quill.core.css"; @import "../node_modules/quill/dist/quill.snow.css"; @import "@tradinos/cms-frontend-layout/themes/theme.css"; // Line 12: Required for themeWithout these imports, theme switching and layout styling may not work as expected.