Додавање тамне теме

03.03.2020

Најновија ставка коју сам додао мом сајту док радим на подршци за пријављивање преко друштвених мрежа је подршка за тамну тему прилагођену смерницама материјалног дизајна. То се у Vuetify-у изводи релативно једноставно; најтеже је одабрати саме боје тамне палете.

Када се дефинишу боје, потребно је проследити тему Vuetify-у. Ја сам се одлучио да тему поставим у два засебна фајла, који се затим учитавају преко директиве import.

export default {
    primary: {
        base: '#426344',
        lighten1: '#6e916f',
        darken1: '#19391d',
        darken2: '#003300',
    },
    secondary: {
        base: '#7f9a7f',
        lighten1: '#afcbae',
        darken1: '#526c53',
    },
    accent: '#d3dc7b',
    error: '#d45858',
    info: '#4592cf',
    success: '#69b069',
    warning: '#c78634'
};

import light from './theme/dunedain-light';

import dark from './theme/dunedain-dark';

// ...
export default {
// ...
vuetify: {
        // ...
        theme: {
            // ...
            themes: {
                light, dark
            }
        }
    },
};