Merge branch 'feat/themes' into beta

client/public/index.html

@@ -6,6 +6,14 @@
   <meta http-equiv="X-UA-Compatible" content="IE-edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Personal Website</title>
+
+  <style>
+  body, html {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+  }
+</style>
 </head>
 
 <body>

client/src/App.vue

@@ -1,10 +1,13 @@
 <template>
-  <div id="app">
+<div id="app" :class="theme">
   <div id="nav">
     <router-link to="/">Home</router-link> |
     <router-link to="/posts">Posts</router-link> |
     <router-link to="/qa">QA</router-link>
   </div>
+  <div>
+    <button id="toggleThemeButton" @click="toggleTheme">{{ themeToggleVerb }} my eyes</button>
+  </div>
   <router-view />
 </div>
 </template>
@@ -13,16 +16,72 @@
 
 export default {
   name: 'App',
+  data() {
+    return {
+      theme: 'dark'
+    }
+  },
+  computed: {
+	themeToggleVerb: function() {
+          return this.theme === 'light' ? "Save" : "Hurt"
+        }
+  },
+
+  methods: {
+    toggleTheme() {
+      const themes = ['light', 'dark']
+      this.theme = themes[(themes.indexOf(this.theme) + 1) % themes.length]
+    }
+  },
 }
 </script>
 
 <style>
+
+.light {
+  --primary-color: #ffffeb;
+  --text-color: #272736;
+}
+
+.dark {
+  --primary-color: #272736;
+  --text-color: #ffffeb;
+}
+
+.dark a {
+  color: #7e7e8f;
+}
+
+body {
+  background-color: var(--primary-color);
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  color: var(--text-color);
-  margin-top: 60px;
+  padding-top: 60px;
+  background-color: var(--primary-color);
+  min-height: 100vh;
 }
+
+#toggleThemeButton {
+  background: var(--primary-color);
+  border: 0px;
+  color: var(--text-color);
+  margin: 0 auto;
+
+  margin-right: 0px;
+}
+
+@media (min-width:420px) {
+  #toggleThemeButton {
+    float:right;
+    margin-right: 10px;
+  }
+}
+
 </style>
+