borbad.s5l.ru/vue/app/shared/ThemeToggle/index.pug

//- app/shared/ThemeToggle/index.pug
button.theme-toggle(
  @click='toggleTheme'
  class='p-3 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-opacity-50'
  aria-label='Переключить тему'
)
  svg(
    v-if='theme === "light"'
    class='w-6 h-6 text-gray-800 transition-all duration-300 transform rotate-0'
    fill='none' stroke='currentColor' viewBox='0 0 24 24'
    xmlns='http://www.w3.org/2000/svg'
  )
    path(stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z')
  svg(
    v-else
    class='w-6 h-6 text-yellow-300 transition-all duration-300 transform rotate-180'
    fill='none' stroke='currentColor' viewBox='0 0 24 24'
    xmlns='http://www.w3.org/2000/svg'
  )
    path(stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z')