The most important for me is to have as less as possible work & issues in the future, when new version of Diamond will be released by PrimeTek. Secondly I don't want to import any demo/showcase/landing/etc. pages that are in downloaded template (primeng-diamond-11.0.0'). I would like to copy to my project just stuff that is really needed. And Diamond project I'll use "just" as reference and live documentation.
My goal is to use Diamond template and do just few changes like primary, secondary color, logo, border-radius (but maybe more in the future). But I prefer to do it on one/two places, using the constant as mentioned in Diamond doc part: A custom theme can be developed by the following steps. Since I don't know how many changes I will finally need, I believe that creating my own custom theme based on Diamond fits more.
Code: Select all
ng new MyDiamondSASS --style=scss --routing=true
npm install @angular/cdk --save
npm install primeng@latest --save
npm install primeicons@latest --save
npm install primeflex@latest --save
copy primeng-diamond-11.0.0/src/assets/sass/ to MyDiamondCSS/src/assets/sass/
copy primeng-diamond-11.0.0/src/assets/layout/fonts/ to MyDiamondCSS/src/assets/layout/fonts
copy primeng-diamond-11.0.0/src/assets/layout/images/ to MyDiamondCSS/src/assets/layout/images
Code: Select all
MyDiamondSAAS/assets/theme/mytheme/theme.scss
MyDiamondSAAS/assets/layout/mylayout/layout.scss
Code: Select all
// R E Q U I R E D V A R I A B L E S
$primaryColor: #2196F3;
$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
$primaryTextColor: #ffffff;
$highlightBg: #E3F2FD;
$highlightTextColor: #495057;
// C U S T O M V A R I A B L E S
// space for my stuff
@import '../../sass/theme/_theme_light';
Code: Select all
// R E Q U I R E D V A R I A B L E S
// no required variables
// C U S T O M V A R I A B L E S
// space for my stuff
@import '../../sass/layout/_layout_light';
Code: Select all
sass --update src/assets/theme/mytheme/theme.scss:src/assets/theme/mytheme/theme.css
sass --watch src/assets/theme/mytheme/theme.scss:src/assets/theme/mytheme/theme.css
sass --update src/assets/layout/mylayout/layout.scss:src/assets/layout/mylayout/layout.css
sass --watch src/assets/layout/mylayout/layout.scss:src/assets/layout/mylayout/layout.css
Code: Select all
@import "../node_modules/primeicons/primeicons.css";
@import "../node_modules/primeflex/primeflex.scss";
@import "../node_modules/primeng/resources/primeng.min.css";
@import "./assets/theme/mytheme/theme.css";
@import "./assets/layout/mylayout/layout.css";
Code: Select all
ng serve
theme.scss
Code: Select all
// R E Q U I R E D V A R I A B L E S
// $primaryColor: #2196F3;
$primaryColor: #063954;
$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
$primaryTextColor: #ffffff;
$highlightBg: #E3F2FD;
$highlightTextColor: #495057;
// C U S T O M V A R I A B L E S
$fontFamily: Courier;
$borderRadius: 0px;
$infoButtonBg: #62b3e5;
$secondaryButtonBg: #62b3e5;
@import '../../sass/theme/_theme_light';
Code: Select all
// R E Q U I R E D V A R I A B L E S
// no required variables
// C U S T O M V A R I A B L E S
$fontFamily: Courier;
@import '../../sass/layout/_layout_light';