import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

import '@mdi/font/css/materialdesignicons.css'

const light = {
  dark: false,
  colors: {
    'primary': '#18a86b',
    'secondary': '#8A8D93',
    'surface': '#F4F5FA',
    'background': '#F4F5FA',

    'success': '#56CA00',
    'info': '#16B1FF',
    'warning': '#FFB400',
    'error': '#FF4C51',

    'on-primary': '#FFFFFF',
    'on-success': '#FFFFFF',
    'on-warning': '#FFFFFF',
    'on-secondary': '#FFFFFF',
    'on-background': '#3A3541',
    'on-surface': '#3A3541',
  },
}

const dark = {
  dark: true,
  colors: {
    'primary': '#18a86b',
    'secondary': '#8A8D93',
    'surface': '#212121',
    'background': '#121212',

    'success': '#56CA00',
    'info': '#16B1FF',
    'warning': '#FFB400',
    'error': '#FF4C51',

    'on-primary': '#FFFFFF',
    'on-success': '#FFFFFF',
    'on-warning': '#FFFFFF',
    'on-secondary': '#FFFFFF',
    'on-background': '#FFFFFF',
    'on-surface': '#FFFFFF',
  },
}

export default createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light,
      dark,
    },
  },
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
})
