53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<template>
|
|
<div id="appSettings" class="uk-width-large">
|
|
<h3>Appearance</h3>
|
|
<p>
|
|
<label>
|
|
Theme
|
|
<select v-model="appTheme" class="uk-select">
|
|
<option value="light">Light</option>
|
|
<option value="dark">Dark</option>
|
|
<option value="system">System</option>
|
|
</select>
|
|
</label>
|
|
</p>
|
|
<p>
|
|
<button class="uk-button uk-button-default" @click="toggleFullscreen">
|
|
Toggle Fullscreen
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// Export main app
|
|
export default {
|
|
name: "AppSettings",
|
|
|
|
data: function() {
|
|
return {};
|
|
},
|
|
|
|
computed: {
|
|
appTheme: {
|
|
get() {
|
|
return this.$store.state.appTheme;
|
|
},
|
|
set(value) {
|
|
this.$store.commit("changeAppTheme", value);
|
|
},
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
async toggleFullscreen() {
|
|
if (!document.fullscreenElement) {
|
|
await document.documentElement.requestFullscreen();
|
|
} else {
|
|
await document.exitFullscreen();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less"></style>
|