From e0ed4f30b6f03375914a433f930ed27e81c5165e Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Mon, 22 Apr 2019 23:59:37 +0900
Subject: [PATCH] Change to color customizable

---
 src/components/Welcome.vue | 14 +++++++++++---
 src/views/App.vue          | 36 +++++++++++++++++++++++++++++-------
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/components/Welcome.vue b/src/components/Welcome.vue
index 5d71e6e9..fbe9c399 100644
--- a/src/components/Welcome.vue
+++ b/src/components/Welcome.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="welcome">
+  <div id="welcome">
+    <img alt="Vue logo" src="@/assets/logo.png">
     <h1>Welcome TheDesk</h1>
   </div>
 </template>
@@ -8,5 +9,12 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
 @Component
-export default class Welcome extends Vue {}
-</script>=
\ No newline at end of file
+export default class Welcome extends Vue {
+}
+</script>=
+
+<style lang="postcss">
+#welcome {
+  padding-top: 60px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/App.vue b/src/views/App.vue
index 7b1db797..cc4ee6f8 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -1,11 +1,11 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="@/assets/logo.png">
+  <div id="app" :style="styles">
     <Welcome/>
   </div>
 </template>
 
 <script lang="ts">
+import { remote } from 'electron'
 import { Component, Vue } from 'vue-property-decorator'
 import Welcome from '@/components/Welcome.vue'
 
@@ -14,16 +14,38 @@ import Welcome from '@/components/Welcome.vue'
     Welcome,
   },
 })
-export default class App extends Vue { }
+export default class App extends Vue {
+  public color: string = '#2c3e50'
+  public backgroundColor: string = 'white'
+  public fontSize: string = '16px'
+
+  public get styles(): { [key: string]: string } {
+    return {
+      '--color': this.color,
+      '--background-color': this.backgroundColor,
+      '--font-size': this.fontSize,
+    }
+  }
+}
 </script>
 
 <style>
-#app {
+html {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+}
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+}
+#app {
+  color: var(--color);
+  background-color: var(--background-color);
+  font-size: var(--font-size);
+
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  height: 100%;
 }
 </style>