wip added ui components, dark mode

Author: briancaffey

quasar/src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="q-app">
-    <router-view />
+    <transition name="fade" mode="out-in">
+      <router-view />
+    </transition>
   </div>
 </template>
 
@@ -24,4 +26,16 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition-duration: 0.15s;
+  transition-property: opacity;
+  transition-timing-function: ease;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+</style>

quasar/src/boot/components.js

@@ -2,6 +2,10 @@ import BasePage from "components/ui/BasePage.vue";
 import DarkMode from "components/ui/DarkMode.vue";
 import LeftMenuLink from "components/LeftMenuLink.vue";
 import MainHeader from "layouts/primary/MainHeader.vue";
+import PageHeader from "components/ui/PageHeader.vue";
+import PageSubHeader from "components/ui/PageSubHeader.vue";
+import PageText from "components/ui/PageText.vue";
+import BaseBtn from "components/ui/BaseBtn.vue";
 import MainLeftDrawer from "layouts/primary/MainLeftDrawer.vue";
 import MainCarousel from "components/MainCarousel.vue";
 import { Emoji } from "emoji-mart-vue";
@@ -13,6 +17,10 @@ export default async ({ Vue }) => {
   Vue.component("DarkMode", DarkMode);
   Vue.component("LeftMenuLink", LeftMenuLink);
   Vue.component("MainHeader", MainHeader);
+  Vue.component("PageHeader", PageHeader);
+  Vue.component("PageSubHeader", PageSubHeader);
+  Vue.component("PageText", PageText);
+  Vue.component("BaseBtn", BaseBtn);
   Vue.component("MainLeftDrawer", MainLeftDrawer);
   Vue.component("MainCarousel", MainCarousel);
 };

quasar/src/components/MainCarousel.vue

@@ -11,7 +11,11 @@
       padding
       arrows
       height="300px"
-      class="bg-primary text-white shadow-1 rounded-borders"
+      :class="
+        `text-white shadow-1 rounded-borders ${
+          $store.getters.isDark ? 'carousel-dark' : 'carousel-light'
+        }`
+      "
     >
       <q-carousel-slide name="style" class="column no-wrap flex-center">
         <q-icon name="layers" size="56px" />
@@ -48,4 +52,11 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+.carousel-light {
+  background: linear-gradient(270deg, red, orange);
+}
+.carousel-dark {
+  background: linear-gradient(270deg, purple, teal);
+}
+</style>

quasar/src/components/ui/BaseBtn.vue

@@ -0,0 +1,20 @@
+<template>
+  <q-btn :color="color" text-color="black"><slot></slot></q-btn>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: "white"
+    }
+  },
+  textColor: {
+    type: String,
+    default: "black"
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

quasar/src/components/ui/BasePage.vue

@@ -1,7 +1,7 @@
 <template>
   <div :style-fn="getStyle">
-    <q-page-container>
-      <q-page padding>
+    <q-page-container :class="$store.getters.isDark ? 'bg-grey-10' : ''">
+      <q-page padding :class="$store.getters.isDark ? 'bg-grey-10' : ''">
         <slot></slot>
       </q-page>
     </q-page-container>
@@ -18,4 +18,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style></style>

quasar/src/components/ui/DarkMode.vue

@@ -1,18 +1,13 @@
 <template>
-  <q-toggle v-model="dark" color="black" />
+  <q-toggle v-model="dark" :color="$store.getters.isDark ? 'black' : 'white'" />
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      darkMode: true
-    };
-  },
   computed: {
     dark: {
       get() {
-        return this.$store.getters.isDarkMode;
+        return this.$store.getters.isDark;
       },
       set() {
         this.$store.commit("toggleDarkMode");

quasar/src/components/ui/PageHeader.vue

@@ -0,0 +1,9 @@
+<template>
+  <h3 :class="$store.getters.isDark ? 'dark-mode' : 'light-mode'">
+    <slot></slot>
+  </h3>
+</template>
+
+<script>
+export default {};
+</script>

quasar/src/components/ui/PageSubHeader.vue

@@ -0,0 +1,9 @@
+<template>
+  <h4 :class="$store.getters.isDark ? 'dark-mode' : 'light-mode'">
+    <slot></slot>
+  </h4>
+</template>
+
+<script>
+export default {};
+</script>

quasar/src/components/ui/PageText.vue

@@ -0,0 +1,19 @@
+<template>
+  <p
+    :style="`font-size:${size}rem`"
+    :class="$store.getters.isDark ? 'dark-mode' : 'light-mode'"
+  >
+    <slot></slot>
+  </p>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 1.25
+    }
+  }
+};
+</script>

quasar/src/css/app.styl

@@ -1 +1,17 @@
 // app global css
+
+.light-mode {
+    color: black;
+}
+
+.dark-mode {
+    color: white;
+}
+
+
+.dark-mode::selection {
+  background: teal; /* WebKit/Blink Browsers */
+}
+.dark-mode::-moz-selection {
+  background: teal; /* Gecko Browsers */
+}