<template>
  <v-btn fab text @click="switchDarkMode">
    <v-tooltip bottom>
      {{ $t('general.theme')}}
      <template
        v-slot:activator="{ on, attrs }"
        color="#FFCCCC"
        max-width="10"
      >
        <v-icon :color="`${$vuetify.theme.dark && 'yellow'}`" v-bind="attrs" v-on="on">icon-sun</v-icon>
      </template>
    </v-tooltip>
  </v-btn>
</template>

<script>
export default {
  mounted() {
    if (localStorage.getItem('dark') == 'true') {
      setTimeout(() => (this.$vuetify.theme.dark = true), 0)
    }
  },
  methods: {
    switchDarkMode() {
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
      localStorage.setItem('dark', this.$vuetify.theme.dark.toString())
    },
  },
}
</script>

<style lang="scss" scoped>
.v-tooltip__content.v-tooltip__content--fixed {
  max-width: 272px;
  padding: 15px 20px;
  line-height: 18px;
  top: 75px !important;
  left: 1020px !important; 

  position: absolute !important;

  // box-shadow: 2px 10px 2px 1px rgba(0, 0, 0, .15);
  filter: drop-shadow(5px 10px 0.35rem rgba(0, 0, 0, 0.15));
  &:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 13px solid #30b7cd;
    left: 130px;
    top: -17px;
    transform: rotate(90deg);
  }
}
</style>
