Add theme example file + Fix font not found

Author: lcharette

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [6.0.0-beta.6](https://github.com/userfrosting/UserFrosting/compare/6.0.0-beta.5...6.0.0-beta.6)
 - Remove Limax from optimizeDeps
+- Add example file on how to overwrite the Less/CSS theme
 
 ## [6.0.0-beta.5](https://github.com/userfrosting/UserFrosting/compare/6.0.0-beta.4...6.0.0-beta.5)
 - Update Docker setup (@ssnukala)

app/assets/main.ts

@@ -27,9 +27,11 @@ import AdminSprinkle from '@userfrosting/sprinkle-admin'
 app.use(AdminSprinkle)
 
 /** Setup Theme */
-import '@userfrosting/theme-pink-cupcake/less/main.less'
 import PinkCupcake from '@userfrosting/theme-pink-cupcake'
 app.use(PinkCupcake)
 
+// Import custom theme overrides
+import './theme.less'
+
 // Done
 app.mount('#app')

app/assets/theme.less

@@ -0,0 +1,26 @@
+@import '@userfrosting/theme-pink-cupcake/less/main.less';
+
+/**
+ * Custom Theme Variables and Overrides
+ * 
+ * This file serves as a customization layer for overriding default Less variables
+ * and CSS styles in your project. It allows you to:
+ * 
+ * - Override default Less variables (colors, fonts, spacing, etc.)
+ * - Add project-specific CSS rules and modifications
+ * 
+ * Usage:
+ * 1. Define custom Less variables to override defaults
+ * 2. Add custom CSS rules and styles
+ * 
+ * Example variable overrides:
+ * @primary-color: #your-custom-color;
+ * @font-family-base: 'Your Custom Font', sans-serif;
+ * @navbar-background: 'Custom navbar color'
+ * 
+ * Check UserFrosting documentation and UiKit documentation for a list of 
+ * available variables to override.
+ */
+
+// Example: Uncomment below to change the navbar background color to green
+// @navbar-background: #009556;