PrimeNG Style issue when using theme css file with imports rather than injection

When I use primeng themes via injecting the stylesheets in angular.json, I get the result I am looking for which is shown below.

"styles": [
"src/styles.css",
"node_modules/primeng/resources/themes/lara-dark-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css"
]




When I don't inject the themes, but rather put them in a theme-dark.css file which I then link in the index.html, I get a different result with missing styles...

"styles": [
"src/styles.css",
{
"input": "src/assets/themes/theme-light.css",
"bundleName": "theme-light",
"inject": false
},
{
"input": "src/assets/themes/theme-dark.css",
"bundleName": "theme-dark",
"inject": false
}
]


The theme-dark.css file contains the following:

@import "primeng/resources/themes/lara-dark-blue/theme.css";
@import "primeng/resources/primeng.css";


Here is my styles.css file since I am also using Tailwind:


@import "primeflex/primeflex.min.css";
@import "primeicons/primeicons.css";

@layer tailwind-base, primeng, tailwind-utilities;

@layer tailwind-base {
@tailwind base;
}

@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
}

p-password.w-full {
.p-password, .p-password-mask, .p-password-input {
width: 100%;
display: block;
}
}

.dark-toggle.p-inputswitch {
.p-inputswitch-slider::before {
margin-top: -12px;
background: transparent;
content: "";
}
}
.dark-toggle.p-inputswitch-checked .p-inputswitch-slider::before {
content: "";
}

Essentially, I want the first image's results but without the injection of the styles within the angular.json, so the themes of primeng and colors can be changed on the fly...

Continue reading...