791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
<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>
|