css - Hur man ställer in vårt eget anpassade tema i PrimeNG

Jag använder den senaste versionen av "primeng": "^12.2.0",. Jag vill sätta mitt eget anpassade tema för primeng. Jag har gått igenom många bloggar, men kunde inte hitta någon lösning.

Jag kopierade theme.css-filen från ‘node_modules/primeng/resources/themes/bootstrap4-dark-blue’ och skapade min nya mapp i src och jag importerade mitt nya tema i angular.json-filen. Men ovanstående theme.css-fil innehåller över 6000 rader CSS-kod, och den följer inga variabler, vilket betyder att varje CSS-klass innehåller färgkod, det vill säga att klassfärgen inte refererar till någon enda variabel, så om jag till exempel vill ändra primärfärgen för temat, måste jag ändra varje färg istället för bara en variabel.

Finns det något bättre sätt att ändra primärfärg, sekundärfärg etc. i primeng?

Svar #1

Såvitt jag förstår av ditt problem, vill du faktorisera dina CSS-variabler.

Till största delen har det gjorts riktigt svårt att tvinga dig att köpa ett redan gjort tema, eller att du ska köpa temageneratorn.

Det finns inget enkelt sätt att göra det på nativt sätt. Du kan beväpna dig med tålamod och använda CTRL + F eller betala licensen.

I mitt team valde vi den enkla vägen. Du kommer att förlora mer tid än att köpa det konkreta temat eller designern. Det beror på vad som är värt smärtan du kommer att gå igenom.

Länk till affären

Länk för temadesignerlicens

Svar #2

Det var ett tag sedan frågan ställdes men i de mer senaste versionerna finns det ett sätt att bygga dina egna teman.

PrimeNG tillåter nu att skapa anpassade teman med primeng-sass-theme-förrådet, du behöver ställa in alla variabler från mythemes-mappen som anges i dokumentationen och importera det till ditt projekt.

Du kan hitta mer information om hur du konfigurerar och importerar ditt tema och hur det fungerar i deras dokumentation på: https://primeng.org/theming#customtheme