Как включить темную тему в Vuetify

Рейтинг: 0Ответов: 1Опубликовано: 14.08.2023

коллеги.

Использую в своем приложении на Vue3 готовую библиотеку Vuetify, смотрел в документации, как включить темную тему, повторил, не получается.

Может вы подскажете?

Код vuetify.js:

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

// Vuetify
import { createVuetify } from 'vuetify'

export default createVuetify({
theme: {
  defaultTheme: dark
  }
})

Код компонента App.vue:

<script>
import SideBar from "@/components/SideBar.vue"
import Wallet from "@/pages/Wallet.vue";
import Navbar from "@/components/Navbar.vue";
import Registration from "@/pages/Registration.vue";
import MainLanding from "@/pages/MainLanding.vue";

export default {
  components: {
    MainLanding,
    Registration,
    Navbar,
    SideBar,
    Wallet
  },
  data(){
    return {
      theme: useTheme(),
    }
  }
}
</script>


<template>
  <v-app>
    <v-theme-provider theme="dark">
<!--  Sidebar  -->
<!--    <SideBar v-if="isAuth"/>-->
    <Navbar/>
    <v-main>
      <router-view></router-view>
    </v-main>
  </v-theme-provider>
  </v-app>
</template>
javascript vue3 vuetify
Источник: Stack Overflow на русском

Ответы

▲ 0

После изменения vuetify.js все должно работать. Если вы задаете defaultTheme: dark глобально, так, как это сделали вы, то это уже применяется ко всем компонентам. Если же вы используете <v-theme-provider theme="dark"> то темная тема примениться лишь вложенным в нее компонентам.

Вот пример моего кода, тут глобальная тема светлая, а компонент card - темный.

Надеюсь это вам поможет, удачи !)

vuetify.ts (в вашем случае js)

export default createVuetify({
  theme: {
    defaultTheme: 'light',
  },
})

App.vue

<template>
  <v-app>
    <v-main>
      <v-theme-provider theme="dark">
        <v-card
        text="Lorem ipsum dolor sit.." />
      </v-theme-provider>
    </v-main>
  </v-app>
</template>