fix: dark theme glitch

This commit is contained in:
WDaan 2022-11-16 14:25:05 +01:00
parent fca51c536f
commit 2b913d5064
7 changed files with 14 additions and 12 deletions

View file

@ -30,6 +30,7 @@ export default {
} }
}, },
created() { created() {
this.$vuetify.theme.dark = this.webuiSettings.darkTheme
this.$store.commit('SET_APP_VERSION', getVersion()) this.$store.commit('SET_APP_VERSION', getVersion())
this.$store.commit('SET_LANGUAGE') this.$store.commit('SET_LANGUAGE')
this.checkAuthentication() this.checkAuthentication()

View file

@ -39,7 +39,7 @@
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters, mapState } from 'vuex'
import { BottomActions, TopMenu, SpeedGraph, FreeSpace, TranserStats, CurrentSpeed, FilterSelect } from './index' import { BottomActions, TopMenu, SpeedGraph, FreeSpace, TranserStats, CurrentSpeed, FilterSelect } from './index'
export default { export default {
@ -59,7 +59,7 @@ export default {
} }
}, },
computed: { computed: {
...mapGetters(['getTheme', 'getWebuiSettings', 'getStatus', 'getTorrentCountString']), ...mapGetters(['getWebuiSettings', 'getStatus', 'getTorrentCountString']),
webuiSettings() { webuiSettings() {
return this.getWebuiSettings() return this.getWebuiSettings()
}, },
@ -71,7 +71,6 @@ export default {
} }
}, },
created() { created() {
this.$vuetify.theme.dark = this.getTheme()
this.drawer = this.webuiSettings.openSideBarOnStart && this.$vuetify.breakpoint.mdAndUp this.drawer = this.webuiSettings.openSideBarOnStart && this.$vuetify.breakpoint.mdAndUp
} }
} }

View file

@ -44,7 +44,7 @@
<script> <script>
import qbit from '@/services/qbit' import qbit from '@/services/qbit'
import { mapGetters } from 'vuex' import { mapGetters, mapState } from 'vuex'
import { mdiBrightness4, mdiSpeedometerSlow, mdiBrightness7, mdiSpeedometer, mdiExitToApp, mdiBell, mdiBellOff } from '@mdi/js' import { mdiBrightness4, mdiSpeedometerSlow, mdiBrightness7, mdiSpeedometer, mdiExitToApp, mdiBell, mdiBellOff } from '@mdi/js'
import ConnectionStatus from './ConnectionStatus.vue' import ConnectionStatus from './ConnectionStatus.vue'
@ -64,12 +64,13 @@ export default {
mdiBellOff mdiBellOff
}), }),
computed: { computed: {
...mapGetters(['getTheme', 'getStatus', 'getAlarm']), ...mapState(['webuiSettings']),
...mapGetters(['isDarkMode', 'getWebuiSettings', 'getStatus', 'getAlarm']),
webuiSettings() { webuiSettings() {
return this.getWebuiSettings() return this.getWebuiSettings()
}, },
theme() { theme() {
return this.getTheme() ? this.$i18n.t('navbar.action.dark') : this.$i18n.t('navbar.action.light') return this.isDarkMode() ? this.$i18n.t('navbar.action.dark') : this.$i18n.t('navbar.action.light')
}, },
alarm() { alarm() {
return this.getAlarm() return this.getAlarm()
@ -95,8 +96,8 @@ export default {
qbit.toggleSpeedLimitsMode() qbit.toggleSpeedLimitsMode()
}, },
toggleTheme() { toggleTheme() {
this.$store.commit('TOGGLE_THEME') this.webuiSettings.darkTheme = !this.webuiSettings.darkTheme
this.$vuetify.theme.dark = !this.$vuetify.theme.dark this.$vuetify.theme.dark = this.webuiSettings.darkTheme
} }
} }
} }

View file

@ -81,7 +81,7 @@ export default {
}, },
...mapGetters(['getTheme']), ...mapGetters(['getTheme']),
theme() { theme() {
return this.getTheme() ? 'Dark' : 'Light' return this.getTheme()
} }
}, },
watch: { watch: {

View file

@ -4,7 +4,7 @@ export default {
computed: { computed: {
...mapGetters(['getTheme']), ...mapGetters(['getTheme']),
theme() { theme() {
return this.getTheme() ? 'dark' : 'light' return this.getTheme()
}, },
isMobile() { isMobile() {
return this.$vuetify.breakpoint.smAndDown return this.$vuetify.breakpoint.smAndDown

View file

@ -7,7 +7,7 @@ export default {
return this.$vuetify.breakpoint.xsOnly return this.$vuetify.breakpoint.xsOnly
}, },
theme() { theme() {
return this.getTheme() ? 'dark' : 'light' return this.getTheme()
}, },
state() { state() {
return this.torrent.state.toLowerCase() return this.torrent.state.toLowerCase()

View file

@ -1,7 +1,8 @@
export default { export default {
getAppVersion: state => () => state.version, getAppVersion: state => () => state.version,
containsTorrent: state => hash => state.selected_torrents.includes(hash), containsTorrent: state => hash => state.selected_torrents.includes(hash),
getTheme: state => () => state.webuiSettings.darkTheme, isDarkMode: state => () => state.webuiSettings.darkTheme,
getTheme: state => () => state.webuiSettings.darkTheme ? 'dark' : 'light',
getModalState: state => guid => state.modals.filter(m => m.guid === guid)[0], getModalState: state => guid => state.modals.filter(m => m.guid === guid)[0],
getSettings: state => () => state.settings, getSettings: state => () => state.settings,
getStatus: state => () => state.status, getStatus: state => () => state.status,