app/config/theme.ts

import { ThemeDefinition } from 'vuetify'

interface Theme {
    dark: boolean,
    colors: {
        /**
         * @see Cf. doc/colors.md pour le rôle de chaque couleur
         */
        // Global
        'background': string,
        'on-background': string,
        'surface': string,
        'on-surface': string,
        'primary': string,
        'on-primary': string,
        'primary-alt': string,
        'on-primary-alt': string,
        'secondary': string,
        'on-secondary': string,
        'secondary-alt': string,
        'on-secondary-alt': string,
        'neutral-strong': string,
        'on-neutral-strong': string,
        'neutral': string,
        'on-neutral': string,
        'on-neutral--clickable': string,
        'neutral-soft': string,
        'on-neutral-soft': string,
        'danger': string,
        'on-danger': string,
        'success': string,
        'on-success': string,
        'warning': string,
        'on-warning': string,
        'info': string,
        'on-info': string,

        // Special cases
        // TODO: voir ceux dont on peut se passer
        'x-create-btn': string,
        'on-x-create-btn': string
    }
}


export const lightTheme: Theme = {
    dark: false,
    colors: {
        'background': '#ecf0f5',
        'on-background': '#000000',

        'surface': '#ffffff',
        'on-surface': '#000000',

        'primary': '#00ad8e',
        'on-primary': '#ffffff',

        'primary-alt': '#a9e0d6',
        'on-primary-alt': '#777777',

        'secondary': '#324150',
        'on-secondary': '#f5f5f5',

        'secondary-alt': '#2a3745',
        'on-secondary-alt': '#ffffff',

        'neutral-strong': '#777777',
        'on-neutral-strong': '#ecf0f5',

        'neutral': '#e6e6e6',
        'on-neutral': '#666666',
        'on-neutral--clickable': '#00997d',

        'neutral-soft': '#ecf0f5',
        'on-neutral-soft': '#464646',

        // Content
        'danger': '#f56954',
        'on-danger': '#ffffff',

        'success': '#00a65a',
        'on-success': '#ffffff',

        'warning': '#f39c12',
        'on-warning': '#ffffff',

        'info': '#3c8dbc',
        'on-info': '#ffffff',

        'x-create-btn': '#f39c12',
        'on-x-create-btn': '#ffffff',
    }
}

export const darkTheme: Theme = {
    dark: true,
    colors: {
        'background': '#1a1a1a',
        'on-background': '#ffffff',

        'surface': '#262626',
        'on-surface': '#ffffff',

        'primary': '#00ad8e',
        'on-primary': '#ffffff',

        'primary-alt': '#a9e0d6',
        'on-primary-alt': '#777777',

        'secondary': '#324150',
        'on-secondary': '#f5f5f5',

        'secondary-alt': '#2c3a48',
        'on-secondary-alt': '#ffffff',

        'neutral-strong': '#595959',
        'on-neutral-strong': '#ecf0f5',

        'neutral': '#324150',
        'on-neutral': '#cccccc',
        'on-neutral--clickable': '#a9e0d6',

        'neutral-soft': '#090c11',
        'on-neutral-soft': '#cccccc',

        // Content
        'danger': '#f56954',
        'on-danger': '#ffffff',

        'success': '#00a65a',
        'on-success': '#ffffff',

        'warning': '#f39c12',
        'on-warning': '#ffffff',

        'info': '#3c8dbc',
        'on-info': '#ffffff',

        'x-create-btn': '#f39c12',
        'on-x-create-btn': '#ffffff',
    }
}