Skip to main content

Theming

You have full control over the layout of your app.

The layouts/MainLayout.vue is used as the base for the application. For authentication this is layouts/AuthLayout.vue.

Main layout

Colors​

The application colors are seeded by default based on the qore.php config file. This file is publishable.

'primary_color' => [
    'default' => '#4F46E5'
],

'tint_color' => [
    'default' => '#4941D6'
],

Colors can be defined by users via the preferences. You can find more information here: Preferences

If you'd like to set a default color, you should make a seeder to seed the correct preference. Currently, the PreferencesAndSettingsSeeder parses the qore.php to seed default preferences.

Other colors​

When a user is not logged in yet, preferences cannot be accessed yet. For this we have default colors.

You can set default colors for your app in frontend/src/css/quasar.variables.scss:

$primary: #609ed4;
$secondary: #26A69A;
$accent: #9C27B0;

$dark: #1D1D1D;

$positive: #21BA45;
$negative: #C10015;
$info: #31CCEC;
$warning: #F2C037;

Aditionally, you can define custom colors. For example in frontend/src/css/app.scss we define a contrast color:

:root {
    --q-color-contrast: #fffff;
}

.text-contrast {
    color: var(--q-color-contrast);
}

.bg-contrast {
    background-color: var(--q-color-contrast);
}