Tips for creating a theme (or overrides) for a desktop-like looking

[danielo515]

Hello everyone,

I have been reading the documentation of quasar, and indeed the customization system it looks very powerful.
What I want is tips to customize the stylus variables to make the interface match a desktop app (or close to it):

• Toolbars with all buttons close to each other (no space)
• Buttons with a clear border, and some glossy effect
• Toolbars with the exact same size of the buttons it holds, plus a border
• Input fields with less space between them

This forum for example, is closer to what I want to achieve than the default MAT theme

[a47ae]

This should all be achievable by either writing a theme from scratch, which gives you total freedom or by taking the Material Theme as a base and overwriting the styles. For styles that are not changeable via the variables, look at the source code of the components and take note of the class names, that overwrite these styles as you like.

It’s a bit hard to give specific advice because you asked for a lot of things and you are not very concrete with your requirements. If you have a specific problem on achieving the desired output, why you can describe in more detail I think people can help you better.

[danielo515]

Hello @a47ae
Thanks for your answer. Indeed I wanted to provide more detailed information (including some screenshots) but I wanted to get first some advice about which places to look into. For example, how can I write a theme from scratch? Can I just copy one of the existing ones and start modding it out of the box ? Will it be easier to start overwriting variables until I get stuck ? Reading document seems that I can only override variables once , in one specific file . Am I wrong ? Can I just create a file that overrides certain variables and include it ?

[a47ae]

Honestly, I think writing a theme from scratch would be a bit too much if you just started with Quasar.
But nevertheless, here are some starting points for writing a new theme.
First, take a look at the Quasar Source. This is the place where the Material Theme is defined: https://github.com/quasarframework/quasar/blob/dev/src/css/mat.styl
Take not that it just import from various places, there is a normalization style, base style, variables and then each component gets imported.
The component styles all reside in `src/components/<component-name>. For example here is the Input Material Style. https://github.com/quasarframework/quasar/blob/dev/src/components/input/input.mat.styl

If you wanted to write your own Theme you could just write one large CSS file, but this will be hard to maintain. Also, you can not copy an existing theme as one file, because of the imports. Instead, you should create stylus files for every component and import them in a base file, like Quasar does it.

But I would start with just overwriting variables and if you get stuck try to overwrite parts of the Styles.
For overwriting variables please refer to the docs: http://beta.quasar-framework.org/guide/quasar-theming.html

[arjanski]

@a47ae Thank you very much, this answer was exactly what I also was just looking for. I am relatively new to GUI frameworks like Quasar and am also investigating its uses for someone who wants to create a “desktop–first” look

Great to hear that each component has its own Stylus file, this basically sold me. I’m fine with doing some reverse-engineering via the console, but my projects demands full control over every pixel, so this just got easier to imagine with Quasar.

[a47ae]

Glad I could help, if you have any other questions feel free to ask

[arjanski]

@a47ae Thanks for the nice offer! Actually I do have a related question.

I would like to globally override certain CSS variables of Quasar components that I will be using, so that I don’t have to worry about locally having to change their appearane again and again.

So I set up my first Qusar project using the Material Design theme, which I activated doing so in my main.js:

require(./themes/app.${__THEME}.styl)

One thing that I don’t yet quite understand (due to my lack of the Quasar setup) is where to put my custom override variables. Do I put them in a newly created file “quasar.variables.styl” in /themes or do I include them in the “Quasar Material Design Stylus” section of app.mat.styl? Both ways don’t work for me.

Maybe you could elaborate on that, since it should be a simple newbie question? Cheers!

[a47ae]

So the variables you want to override for all themes belong in ./themes/app.variables.styl.
The theme specific variables belong in ./themes/app.<theme>.styl.
This is because some variables are only relevant for e.g. the Material Design Theme. You can find the variable names here: http://beta.quasar-framework.org/components/stylus-variables.html . Note that on some variables it tells you Not Applicable which indicates that this varaible is only used in the other theme.

So for things like colors and stuff, I would out the overrides into ./themes/app.variables.styl.
Try to enter the following in there: $primary = #2DE363 this should give you a green primary color and therefore for example a green top bar.

For component specific stuff I would put the overrides into ./themes/app.mat.styl. So for example to change the alert padding put $alert-padding = 2rem right before the line @import '~quasar-framework/dist/quasar.mat.styl'.

If you want to override styles, I would create a new folder inside ./themes and create a stylus file for each component. Then create a file <my-theme>.stly in the same folder and import all the component styles in there. Finally in ./themes/app.mat.stly import <my-theme>.styl right before @import '~quasar-framework/dist/quasar.mat.styl'.

And always make sure that you comment out he require(./themes/app.${__THEME}.styl) line and comment in the require(quasar/dist/quasar.${__THEME}.css) line im main.js to use custom themes.

[arjanski]

@a47ae Wow thank you for that lightning-fast response! Will give it a try.

Just one thing regarding your last sentence: In the main.js it says that

// 1. use next line to activate CUSTOM STYLE (./src/themes)
require(./themes/app.${__THEME}.styl)

while you wrote to comment out the above and rather use

// 2. or, use next line to activate DEFAULT QUASAR STYLE
require(quasar/dist/quasar.${__THEME}.css)

Did I understand this correctly? I undestood the inline comments in main.js the other way around.

[a47ae]

Ups, this was more a language problem, English is not my first language
With “comment out” I actually meant the exact opposite thing (remove the comment), so your understanding of the inline comments is correct and I should probably proof read my responses

[danielo515]

Thanks for the detailed answer. It wasn’t clear for me neither how the override of variables should be performed. Maybe a bit of documentation on this regard is required.

Thanks again

[a47ae]

It is a bit hard to find, but it is documented here: http://quasar-framework.org/guide/quasar-theming.html#Structure

[leob]

Interesting discussion!

Apart from a WordPress theme that I saw somewhere, I haven’t seen any examples (at least not open sourced) of a completely new custom Quasar theme.
It’s nice that there are standard Material and iOS themes out of the box but it’s not for everybody or for every app/website.

What I’m doing often with Quasar is, apart from overriding the variables in the “app variables” file, define/override CSS styles in the “styl” section of my App component, all the components int he app will automatically ‘inherit’ from those styles so they’re essentially “global”.

But this is not the same as a completely separate ‘custom’ theme, which would allow me to run the standard material, iOS and ‘custom’ theme (let’s call it the “web theme” or the “generic theme”) side by side and be able to switch between them.

I suppose developing a completely separate custom theme would just be a matter of copying an existing theme and making changes to it. The big problem of course is keeping the new theme up to date with the two ‘standard’ themes as these are being maintained and developed. Maybe if we could made a good “generic” web/desktop theme we could persuade Razvan to make it part of the core so it’s kept maintained (possibly with help from the community) … I think a third “generic” theme besides the two standard themes would be nice.

Bookmarking this discussion!