feat(app-vite&app-webpack): Add excludeColorPalette option

app-vite/templates/entry/client-entry.js

@@ -40,6 +40,11 @@ import 'quasar/dist/quasar.<%= metaConf.css.quasarSrcExt %>'
 import 'quasar/src/css/flex-addon.sass'
 <% } %>
 
+<% if (!framework.excludeColorPalette) { %>
+  // Don't include the Quasar palette if the user indicates it
+import 'quasar/src/css/color-palette.sass'
+<% } %>
+
 <% css.length > 0 && css.filter(asset => asset.client !== false).forEach(asset => { %>
 import '<%= asset.path %>'
 <% }) %>

app-vite/templates/entry/server-entry.mjs

@@ -28,6 +28,11 @@ import 'quasar/dist/quasar.<%= metaConf.css.quasarSrcExt %>'
 import 'quasar/src/css/flex-addon.sass'
 <% } %>
 
+<% if (!framework.excludeColorPalette) { %>
+  // Don't include the Quasar palette if the user indicates it
+import 'quasar/src/css/color-palette.sass'
+<% } %>
+
 <% css.length > 0 && css.filter(asset => asset.server !== false).forEach(asset => { %>
 import '<%= asset.path %>'
 <% }) %>

app-vite/types/configuration/framework-conf.d.ts

@@ -17,6 +17,7 @@ interface QuasarFrameworkConfiguration {
   iconSet?: QuasarIconSets;
   lang?: QuasarLanguageCodes;
   cssAddon?: boolean;
+  excludeColorPalette?: boolean;
   /** @default 'kebab' */
   autoImportComponentCase?: "kebab" | "pascal" | "combined";
   components?: (keyof QuasarPluginOptions["components"])[];

app-webpack/templates/entry/client-entry.js

@@ -40,6 +40,11 @@ import 'quasar/dist/quasar.<%= metaConf.css.quasarSrcExt %>'
 import 'quasar/src/css/flex-addon.sass'
 <% } %>
 
+<% if (!framework.excludeColorPalette) { %>
+  // Don't include the Quasar palette if the user indicates it
+import 'quasar/src/css/color-palette.sass'
+<% } %>
+
 <% css.length > 0 && css.filter(asset => asset.client !== false).forEach(asset => { %>
 import '<%= asset.path %>'
 <% }) %>

app-webpack/templates/entry/server-entry.js

@@ -28,6 +28,11 @@ import 'quasar/dist/quasar.<%= metaConf.css.quasarSrcExt %>'
 import 'quasar/src/css/flex-addon.sass'
 <% } %>
 
+<% if (!framework.excludeColorPalette) { %>
+  // Don't include the Quasar palette if the user indicates it
+import 'quasar/src/css/color-palette.sass'
+<% } %>
+
 <% css.length > 0 && css.filter(asset => asset.server !== false).forEach(asset => { %>
 import '<%= asset.path %>'
 <% }) %>

app-webpack/types/configuration/framework-conf.d.ts

@@ -17,6 +17,7 @@ interface QuasarFrameworkConfiguration {
   iconSet?: QuasarIconSets;
   lang?: QuasarLanguageCodes;
   cssAddon?: boolean;
+  excludeColorPalette?: boolean;
   /** @default 'kebab' */
   autoImportComponentCase?: "kebab" | "pascal" | "combined";
   components?: (keyof QuasarPluginOptions["components"])[];

docs/src/pages/quasar-cli-vite/quasar-config-file.md

@@ -260,6 +260,9 @@ interface QuasarFrameworkConfiguration {
   /* if you want the Quasar CSS Addons (see specific docs page) */
   cssAddon?: boolean;
 
+  /* if you don't want to include the default color palette Quasar provides by default */
+  excludeColorPalette?: boolean;
+
   /**
    * Format in which you will write your Vue templates when
    * using Quasar components.
@@ -286,6 +289,8 @@ interface QuasarFrameworkConfiguration {
 ```
 
 More on cssAddon [here](/layout/grid/introduction-to-flexbox#flex-addons).
+<!-- TODO: Make this refer to an actual page -->
+More on excludeColorPalette [here](/)
 
 ### animations
 

docs/src/pages/quasar-cli-webpack/quasar-config-file.md

@@ -207,6 +207,7 @@ return {
     lang: 'de', // Tell Quasar which language pack to use for its own components
 
     cssAddon: true // Adds the flex responsive++ CSS classes (noticeable bump in footprint)
+    excludeColorPalette: false // Remove the color-palette CSS classes (reduces CSS footprint)
   }
 }
 ```

docs/src/pages/style/color-palette/color-palette.md

@@ -26,6 +26,10 @@ Also check [Theme Builder](/style/theme-builder) for a tool on customizing the b
 
 Here's the list of colors provided out of the box. Within your app's `*.vue` files you can use them as CSS classes (in HTML templates) or as [Sass/SCSS variables](/style/sass-scss-variables) in `<style lang="...">` tags.
 
+::: tip Reduce CSS footprint
+If you do not use any of the colors listed below, you can exclude the colors from being included in the bundle. This will reduce the CSS footprint of your application. You can configure this under `quasar.config file > framework > excludeColorPalette: true`. 
+:::
+
 <color-list />
 
 ## Using as CSS Classes