Dark mode & custom colors in Quasar.

Creating theme switch button and setting your brand colors.

Introduction

Hi, Welcome this is my first story on Medium.Com.
And you’re seeing I am not creating a story about how to installing Quasar framework. Just I jumped directly into theming. But whatever I should write about how to installing Quasar framework, too. If so, let’s begin!

Installation

To create a new project firstly we have to open Cmd/Terminal.
Then we go to the path where you wanted to install it.

First thing is first, second is second.
I should tell the things your PC should has before installing CLI based Quasar framework project. Now let’s see:

1. Node JS — https://nodejs.org
2. Npm — https://www.npmjs.com/get-npm
3. Or if you want Yarn(recommended) — https://yarnpkg.com/getting-started/install

Note there are some requirements:

1. You need to have 8.9.0 or upper versions of Node JS
2. Your NPM need to 5 or upper version
3. If you are using Yarn, make sure that the Yarn global install location is in your PATH:

# in ~/.bashrc or equivalent
export PATH="$(yarn global bin):$PATH"

5. Then we create a project with Quasar CLI using below script:

quasar create <folder-name>

Select the options you want and enter some info about yourself.

Now we have the full Quasar starter project as a “Hello World”.
And Quasar installed everything for us.

Go with cd project-name. So run quasar dev in CMD/Terminal to launch dev-Quasar in dev-server.

It opens it in localhost:8080 or some closer port to it. Quasar automatically chooses ports. If you ant to change default port go quasar.conf.js file and edit port: 8080 part.

Adding dark mode

Quasar has default dark mode. Yeap! But just you don’t know.

Let’s learn how to switching to dark mode. Firstly, we need a switcher.
Ok if you just want you can change color modes with any elements.
For instance: QBtn, QSelect, QDropdown, QBtnGroup, QTabs.
Of course you can change them with HTML elements too.

<q-btn flat round
  @click="$q.dark.toggle()"
  :icon="$q.dark.isActive ? 'nights_stay' : 'wb_sunny'"
/>

Here we’re just creating transparent button with white color text. And instead of text we are just placing icons. Yes icons not icon. Because we have two modes. So two icons. Simply we change them when color modes changed.
And to switch between themes we’re using default $q.dark.toggle() function.

So now we’ve switcher. We can put it into any page, inside or outside any component or elements. I think the best place to put it is navigation bar.

So if yo did the things above, you can test it. And you see the change.
Here see what the changes maybe if you add dark mode switcher.

Light mode of https://quasar-qgrid.netlify.com by Pratik Patel

Dark mode of https://quasar-qgrid.netlify.com by Pratik Patel

You see it was working perfectly.

Note: If you add color classes or add your custom styles. Color of that component will not be changed. Like the header of the above website.

So what you should do to change colors in dark mode?

Changing is easy in Quasar. You can write some ternary things by binding attributes. In general we bind classes or stlye attributes to change colors.
Below is an example of how to using ternary operator with binded class.

<q-toolbar :class="$q.dark.isActive ? 'bg-warning' : 'bg-primary'"
/>

Changed dark mode of https://quasar-qgrid.netlify.com by Pratik Patel

You’re seeing that the header is now orange. That default brand color is called warning in Quasar.

That’s it! It is done now we have 2 color modes and a switcher.

Changing default colors

Change default colors of Quasar.

Now let’s just see how to change default colors.
To change colors firstly we need to finde the quasar.variables.sass file.
It is in the css folder. And css folder is inside of the src folder.

If you open it you see sass variables and HEX color codes. Just edit the colors.

Look of src/css/quasar.variables.sass

This changes are for both light and dark mode. If you want to show different colors but use the same brand color name, read below.

Just forget this quasar.variables.sass file. Because, now we create another file but it is not a kind of sass file. It is pure css file. And we can call it palette.css. We can save this palette.css file to src/css/palette.scss. And don’t forget to register it in quasar.conf.js > css.

Look of Palette.css

So you’re seeing we added two root variable holders. First one is for the light mode. And second is for the dark mode.
Inside of the root variable holders, we write our custom colors. and it works perfectly if you add !important after color codes.

Before ending the story, I want to tell you that now you can clap 50X times. If you don’t believe test it. OK, that’s it for today. And it’s done. Just you can test it. Have fun.

In the end of my story/article/information I want to say thanks to my friend who is the owner of Quasar QGrid library. Because I used some pictures of his website above. Thank you friend.