added lightmode option

This commit is contained in:
2023-11-22 13:41:53 +01:00
parent 8a4ced29ac
commit 3fd31bcc43
22 changed files with 1501 additions and 816 deletions

View File

@ -1,40 +1,52 @@
<template>
<PageHeader />
<main>
<slot />
</main>
<PageHeader />
<main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
<slot />
</main>
</template>
<script>
import PageHeader from "../layouts/PageHeader.vue";
export default {
name: "Page",
components: {
PageHeader,
}
}
</script>
<script>
import PageHeader from "../layouts/PageHeader.vue";
export default {
name: "Page",
components: {
PageHeader,
},
data() {
return {
darkMode: true,
};
},
}
</script>
<style scoped>
* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: row;
gap: 0.625rem;
padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
background-color: #212121;
}
</style>
<style scoped>
* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: row;
gap: 0.625rem;
padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
height: 100vh;
width: 100vw;
height: 100%;
width: 100%;
}
.main-darkmode {
background-color: #212121;
}
.main-lightmode {
background-color: #EBEBEB;
}
</style>