How to Access Quasar CSS Variables Within Script?

Question

I'm using Quasar 2.17.7.

If I have the below styles in my quasar.variables.scss file:

$company-base: #3c3c3b;
$company-accent: #89c3ce;

$primary: #1976d2;
$secondary: #26a69a;
$accent: #9c27b0;

How can I access these in a script tag? For example...

const accentColor = $q.getColour('company-accent');

kissu · Accepted Answer · 2025-02-04 18:04:40Z

2

Given the docs, you can apparently you can access it this way

import { getCssVar } from 'quasar'

const accentColor = getCssVar('company-accent'); // #89c3ce

And write to it this way

import { setCssVar } from 'quasar'

setCssVar('company-accent', '#newColor');

answered Feb 4 at 18:04

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1