diff --git a/front/index.html b/front/index.html index 2cee400cf..de34034ff 100644 --- a/front/index.html +++ b/front/index.html @@ -59,7 +59,7 @@ - +
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue index 4383b368f..e41408101 100644 --- a/front/src/components/Sidebar.vue +++ b/front/src/components/Sidebar.vue @@ -480,6 +480,7 @@ import Modal from '@/components/semantic/Modal.vue' import $ from 'jquery' import useThemeList from '@/composables/useThemeList' +import useTheme from '@/composables/useTheme' export default { name: 'Sidebar', diff --git a/front/src/composables/useTheme.ts b/front/src/composables/useTheme.ts index 838248d10..ab8cdd1c7 100644 --- a/front/src/composables/useTheme.ts +++ b/front/src/composables/useTheme.ts @@ -1,12 +1,12 @@ import { useColorMode } from '@vueuse/core' -import { watch } from '@vue/composition-api' -const theme = useColorMode() - -document.body.classList.add(`theme-${theme.value}`) -watch(theme, (newValue, oldValue) => { - document.body.classList.remove(`theme-${oldValue}`) - document.body.classList.add(`theme-${newValue}`) +const theme = useColorMode({ + selector: 'body', + modes: { + auto: '', + light: 'theme-light', + dark: 'theme-dark' + } }) export default () => theme diff --git a/front/src/main.ts b/front/src/main.ts index 07e266c07..cde525aba 100644 --- a/front/src/main.ts +++ b/front/src/main.ts @@ -4,7 +4,9 @@ import VueLazyload from 'vue-lazyload' import store from '~/store' import { sync } from 'vuex-router-sync' import VueCompositionAPI, { createApp } from '@vue/composition-api' -import { CreateElement } from 'vue' +import Vue, { CreateElement } from 'vue' + +Vue.config.devtools = true logger.default.info('Loading environment:', import.meta.env.MODE) logger.default.debug('Environment variables:', import.meta.env) @@ -14,13 +16,16 @@ sync(store, router) const app = createApp({ store, router, + components: { + App: () => import('~/App.vue') + }, data: () => ({ isMounted: false }), async mounted () { this.isMounted = true }, render (h: CreateElement) { if (this.isMounted) { - return import('~/App.vue') + return h('app') } // TODO (wvffle): Import fake app component diff --git a/front/src/modules/locale.ts b/front/src/modules/locale.ts index 7388aa128..fe9edcd4a 100644 --- a/front/src/modules/locale.ts +++ b/front/src/modules/locale.ts @@ -58,7 +58,7 @@ export const install: AppModule = ({ store, app }) => { document.documentElement.setAttribute('lang', htmlLocale) if (locale === 'en_US') { - Vue.prototype.$language.current = locale + Vue.config.language = locale store.commit('ui/momentLocale', 'en') } }, { immediate: true })