Complete guide to SCSS design tokens, color palette, Line Awesome icons, and global font imports that define the visual identity of the Despacho Frontend.
Use this file to discover all available pages before exploring further.
Quasar’s theming system is built on SCSS variables that feed directly into the component library’s own stylesheets. Every color, surface shade, and semantic state in the Despacho Frontend flows from a single file: src/css/quasar.variables.scss. Changing a value there ripples through every Quasar component that uses that token — buttons, badges, chips, alerts, and more — without touching individual component styles.
// Quasar SCSS (& Sass) Variables// --------------------------------------------------// To customize the look and feel of this app, you can override// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.// Check documentation for full list of Quasar variables// Your own variables (that are declared here) and Quasar's own// ones will be available out of the box in your .vue/.scss/.sass files// It's highly recommended to change the default colors// to match your app's branding.// Tip: Use the "Theme Builder" on Quasar's documentation website.$primary: #1368c7;$secondary: #42b441;$accent: #abe648;$buttom: #ff7110;$dark: #1d1d1d;$dark-page: #121212;$positive: #21ba45;$negative: #c10015;$info: #31ccec;$warning: #f2c037;
Sky blue — informational messages and neutral status indicators
$warning
#f2c037
Amber — warnings, permission issues, and caution notices
The orange variable is named $buttom — not $button. This is a typo carried over from the source file. Do not rename it without also updating every reference in component styles simultaneously, or Quasar’s component stylesheet references will break.
Every SCSS variable listed above corresponds to a named color in Quasar’s design system. You reference them by name (lowercase, no $) in component color props and CSS utility classes:
<!-- Primary action button --><q-btn color="primary" label="Guardar expediente" /><!-- Destructive action button --><q-btn color="negative" flat label="Eliminar" /><!-- Success badge on a status chip --><q-chip color="positive" text-color="white" icon="las la-check"> Activo</q-chip><!-- Warning banner --><q-banner class="bg-warning text-dark"> Este expediente requiere documentación adicional.</q-banner><!-- Line Awesome icon with a semantic color --><q-icon color="info" name="las la-info-circle" size="1.5rem" />
Quasar also generates CSS utility classes for every color token — bg-primary, text-secondary, bg-dark-page, etc. — which you can apply directly in template markup without writing any custom CSS.
Navigate to src/css/quasar.variables.scss. This is the only file you need to edit for global color changes.
2
Change or add variables
Modify any existing value or add new SCSS variables for project-specific tokens:
$primary: #0a4f9e; // darker brand blue for better contrast$sidebar-width: 260px; // project-specific layout token
3
Rebuild the application
Run npm run build (or npm run dev to see changes immediately in the dev server). Quasar reprocesses all component styles against the updated variables.
The Quasar Theme Builder lets you pick colors interactively and preview how they render across all Quasar components before committing a change to the codebase. Use it to generate a harmonious palette and then copy the resulting SCSS variables directly into quasar.variables.scss.
The Line Awesome icon font is enabled in quasar.config.js:
extras: ['line-awesome'],
This bundles the Line Awesome CSS and font files into the build output so icons are available without any CDN dependency. Reference icons using the las (solid), lar (regular), or lab (brands) prefixes:
<!-- Scales of justice — appropriate for a legal firm --><q-icon name="las la-balance-scale" /><!-- User account icon in a toolbar --><q-icon name="las la-user-tie" size="24px" color="primary" /><!-- Document icon for file listings --><q-icon name="las la-file-contract" /><!-- Brand icon (brands prefix) --><q-icon name="lab la-linkedin" />
Line Awesome uses the same class-name conventions as Font Awesome 5, so any Font Awesome 5 icon name works if you substitute the fa prefix with la. Browse the full catalog at icons8.com/line-awesome.
src/css/app.scss is loaded via the css array in quasar.config.js:
css: ['app.scss'],
This file is injected into the bundle before all component styles, making it the correct location for global resets, base typography, and CSS custom property declarations. The current app.scss imports four Google Fonts (with one duplicate import):
// src/css/app.scss — global styles in SCSS form@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght,ELSH,ELXP@100..900,86.7,85&display=swap');@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
app.scss imports Permanent+Marker twice (two identical @import statements). This is a harmless duplicate but adds an unnecessary network request on every page load. Remove one of the duplicate imports to keep the file clean.
To add new global styles — for example, a base font size or a CSS custom property for the sidebar width — append them directly to app.scss:
Quasar automatically makes quasar.variables.scss available in every component’s SCSS scope — you do not need to manually @import the variables file. The Quasar CLI handles the injection.
