Quasar 
Quasar Theming
Every website/app needs a specific design to differentiate from the competition. This is where Quasar Framework excels, because:
- It offers two themes out of the box: Material and iOS
- The two themes can be customized/extended easily from the App code. You can change the primary color, the secondary color, and most of the CSS. Customizing does not mean having multiple CSS files, one overriding properties from the other. No. You’ll have one stylesheet with each CSS property declared only once.
- All themes include a CSS reset (following latest standards) to eliminate quirks between platforms.
Quasar CSS is a blank slate that you can easily customize and modify to fit your brand, while still following the standards of each platform. The best apps in the app stores are fully customized and Quasar makes it easy to do the same with your App.
Quasar is built on top of Stylus, which allows it to set some default styles for your App but makes it extremely easy for you to change the defaults in your App code.
Customizing a theme means overriding Stylus variables which can hold colors, sizes, border types and so on. After reading this intro you can go to Components > Stylus Variables for a list of all Stylus variables that you can override so you can theme your App.
Please note the following:
- When building your App or starting the dev server you can only use one theme at a time.
- Quasar themes can be configured in
/src/css/themesfolder, which contains three files, as you’ll see in the next section.
Structure
src/css/themes folder from a Quasar App will contain the following files:src
└── css
└── themes
├── common.variables.styl # Theme Shared Quasar Variables
├── variables.mat.styl # Quasar Variables that apply to Material only
└── variables.ios.styl # Quasar Variables that apply to iOS only
You will find more documentation and steps in these files.
Using Stylus variables in Vue files
In your app’s *.vue files you can use the core Quasar Stylus variables (examples - colors: $primary, $red-1, media breakpoints: $breakpoint-md, $breakpoint-md-min and so on).<!-- Notice lang="stylus" -->
<style lang="stylus">
// "variables" is a Webpack alias (provided out of the box by Quasar CLI)
@import '~variables'
div
color $red-1
background-color $grey-5
</style>
NOTE: You must add @import '~variables' within your <style> tags, in order for Quasar to parse any Stylus variables you may add. If you don’t, Quasar will literally pass the variables as text and any theming changes using Stylus variables won’t work.
NOTE: The <style> tag uses Stylus code. You can’t use any other CSS pre-processor.
Theming Your App
You can easily theme your App by adding Stylus variable declarations in src/css/themes/common.variables.styl or the other two files (in the latter case if you want different looks for each Quasar theme).
To customize the look and feel of this app, you can override the Stylus variables found in Quasar’s source Stylus files. Setting variables before Quasar’s Stylus will use these variables rather than Quasar’s default Stylus variable values. Stylus variables specific to the themes belong in either the variables.ios.styl or variables.mat.styl files.
For example, change the primary color of your App:$primary = #00ffff
Platform Specific Styles
The platform in which your App runs is automatically detected and the <body> tag gets following classes:
| Body Class Name | Description |
|---|---|
mat | Default style; Material Design theme; Android platform |
ios | Apple platform; iOS theme |
desktop | App runs on a desktop browser |
mobile | App runs on a mobile browser |
cordova | Standalone Mobile App wrapped with Apache Cordova |
electron | App runs under Electron |
touch | Touch capable platform |
no-touch | Touch capability not present |
within-iframe | For when entire website is under an IFRAME tag |
So you can write specific Stylus code for your App like this:body
&.cordova .tag
color $primary
&.desktop .tag
color $secondary
&.mobile .tag
color $tertiary
Stylus Variables
Read a complete list of all Stylus variables that you can override.