Merge branch 'feat/themes' into beta

4 years ago · ffe62b6380
parent 43d28f7f6b dd4e2ca9fb
commit ffe62b6380
2 changed files with 76 additions and 9 deletions
--- a/client/public/index.html
+++ b/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>
--- a/client/src/App.vue
+++ b/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;
-  margin-top: 60px;
+  color: var(--text-color);
+  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>
+