Every website or mobile 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.
- You can create your own theme from scratch.
- 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. You can however start two dev servers on different ports, each server with a theme. This will obviously allow you to see the App with both themes simultaneously.
$ quasar dev mat
$ PORT=3000 quasar dev ios
By default your App will include the compiled Quasar themes (
.cssfiles instead of
node_modules/quasar-framework). The reason is the build speed. This is a section from
src/main.jsrelated to importing the theme:
// === DEFAULT / CUSTOM STYLE ===
// WARNING! always comment out ONE of the two require() calls below.
// 1. use next line to activate CUSTOM STYLE (./src/themes)
// require('./themes/app.' + __THEME + '.styl')
// 2. or, use next line to activate DEFAULT QUASAR STYLE
require('quasar/dist/quasar.' + __THEME + '.css')
If you want to override Quasar variables, comment the second line containing
.cssand uncomment the first one ending with
.styl. The build speed will be slower. DO NOT leave both lines uncommented.
src/css folder from a Quasar App will contain the following files:
You will find more documentation and steps in these files.
|app.ios.styl||iOS entry point. It includes app.variables.styl and Quasar iOS theme.|
|app.mat.styl||Material Design entry point. It includes app.variables.styl and Quasar Material theme.|
|app.variables.styl||(Common code for all themes) Place to override Stylus variables which define the primary color, the secondary color, the list border radius and so many properties.. You can easily make good use of Quasar Themes and customize your App so it will have a distinct overall design.|
|quasar.variables.styl||This file includes your Stylus overrides and Quasar’s Core Stylus variables so you can use them in your |
The Build System expects just
app.mat.styl to exist, so feel free to dig in into the
src/themes folder to understand how and what is rendered by Stylus and change whatever you like and best suits your needs. Just make sure you have those two files there.
In your app’s
*.vue files you can use the core Quasar Stylus variables (examples - colors:
$red-1, media breakpoints:
$breakpoint-md-min and so on).
<!-- Notice lang="stylus" -->
// "variables" is a Webpack alias (defined in /config/index.js)
// which points to /src/themes/quasar.variables.styl
// in your starter kit
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.
You can easily theme your App by adding Stylus variable declarations in
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
For example, change the primary color of your App:
$primary = #00ffff
The platform in which your App runs is automatically detected and the
<body> tag gets following classes:
|Body Class Name||Description|
|Default style; Material Design theme; Android platform|
|Apple platform; iOS theme|
|App runs on a desktop browser|
|App runs on a mobile browser|
|Standalone Mobile App wrapped with Apache Cordova|
|App runs under Electron|
|Touch capable platform|
|Touch capability not present|
|For when entire website is under an IFRAME tag|
So you can write specific Stylus code for your App like this:
Theme Specific CSS
Regarding themes, if you take a look at the Structure of Stylus files above, you’ll notice there are two files (
app.mat.styl). Inject code for the specific theme there after you get the hang of how things stand with those files. It’s best to not clog all themes generated CSS with code specific to a certain theme only.
All your Stylus variables need to be declared before the inclusion of Quasar Framework theme files (from NPM). If you follow the default structure of files (and be care-free) then inject variable overrides in src/themes/app.variables.styl.
Read a complete list of all Stylus variables that you can override.