The styles and theme code is found in wwwroot/assets/scss. The main scss style, nanite-theme.scss builds on top of the base Boostrap 5 styles which are provided as NPM dependencies.

To modify the styling, install node sass and its dependencies. Node sass will run in the background and watch scss files. Any changes to scss will be compiled on the fly and converted to regular css when any changes are detected. Node sass is a dev dependency, so all you need to do is:

• Open a terminal and navigate to the wwwroot folder
• Run command npm install
• Once installed, run command npm run watchscss
• Now any changed you make in any .scss file will automatically be detected and a new minified css stylesheet will be generated. Reloading the browser will reflect the changes.

Global styling found in _variables.scss, overwrites the default Bootstrap theme colors, sizes, spacings, etc. Rules become more specific from top to bottom. To understand how theming works in Boostrap 5, read the documentation.

Everything not related to global style is found in /custom:

• Components
• Pages
• Structure
• Fonts
• Icons
• Plugins

Theme JavaScript is found in wwwroot/assets/js

• Nanite-core.js initializes components and configures validation settings
• Nanite-layout.js manages theme color and sidebar state
• Nanite-helpers.js contains global utility functions

Next Steps

That covers everything specific to Razor project. Read about other UI versions in Vue and React or explore the .NET back-end.