Bootswatch é pacote de temas baseado no framework Bootstrap, nele você encontra um conjunto de sessões pré-formatadas que vai te ajudar na hora de construir seu webapp em angular.
Nele você vai encontrar vários itens, como por exemplo:
- Temas
- Navbar
- Forms
- Tables
- Cards
- Popovers
- Alerts
- e outros..
O mais legal é que você tem acesso a vários tipos de temas com estilo próprio!
Como instalar
Primeiro de tudo, crie seu projeto, ao invés de ser com CSS, use o SCSS
Logo em seguida faça as seguintes instalações: npm i bootswatch bootstrap jquery @popperjs/core
Após a instalação, insira os seguintes caminhos na sessão de scripts no angular.json:
"node_modules/jquery/dist/jquery.min.js",
"node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"Agora insira os códigos de importação dentro do styles.scss:
@import "~bootswatch/dist/[theme]/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/[theme]/bootswatch";Uma vez que tenha sido inserido os códigos de importação, lembre-se de escolher o tema que desejar na sessão de temas do bootswatch para inseri-lo no seu projeto, por exemplo:
Seus códigos de importação do styles.scss devem ficar assim por exemplo:
@import "~bootswatch/dist/solar/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/solar/bootswatch";Pronto! Deste modo seu tema já está configurado