EpThemeToggle

Props

Name	Description	Type	Default
currentTheme	The current theme of the application.	string	-

Events

Name	Description	Payload
toggle-theme	-	-

INFO

This component does not use slots.

Component Code

<template>
  <ep-button
    title="Toggle theme"
    @click="toggleTheme"
  >
    <template #icon-left>
      <!-- @slot Icon to display for theme toggle (typically a sun or moon icon) -->
      theme icon
    </template>
  </ep-button>
</template>

<script setup>
  import { computed } from 'vue'

  import EpButton from '../button/EpButton.vue'

  defineOptions({
    name: 'EpThemeToggle'
  })

  const props = defineProps({
    /**
     * The current theme of the application.
     * @values light, dark
     */
    currentTheme: {
      type: String,
      required: true
    }
  })

  const buttonIcon = computed(() => props.currentTheme === 'dark' ? 'light-mode' : 'dark-mode')

  const emit = defineEmits(['toggle-theme'])

  const toggleTheme = () => {
    emit('toggle-theme')
  }
</script>