Implemented new theme structure and began home page design.

MultiShop/client/src/App.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="content light">
+    <div id="content" class="theme-light">
         <nav class="navbar" id="nav">
             <div class="container-fluid">
-                <router-link class="navbar-brand" to="/">MultiShop</router-link>
+                <router-link class="navbar-brand" to="/">SHAID</router-link>
                 <button
                     class="navbar-toggler"
                     type="button"

MultiShop/client/src/assets/scss/_app-layout.scss

@@ -0,0 +1,9 @@
+html, body, #app, #content {
+    min-height: 100%;
+    height: 100%;
+}
+
+#content {
+    display: flex;
+    flex-direction: column;
+}

MultiShop/client/src/assets/scss/_light.scss

@@ -1,10 +0,0 @@
-@use "../../../node_modules/bootstrap/scss/bootstrap";
-
-#app .content.light {
-    // Add light theme specific scss here. 
-    nav.navbar {
-        @extend .navbar-expand-lg;
-        @extend .navbar-light;
-        @extend .bg-light;
-    }
-}

MultiShop/client/src/assets/scss/_themer.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+@use "variables";
+
+// Applied Dmitry Borody's method for theming with modifications. - https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1
+@mixin themed($themes: variables.$themes) {
+    @each $theme, $vars in $themes {
+        .theme-#{$theme} &, &.theme-#{$theme} {
+            $theme-values: $vars !global;
+            @content;
+            $theme-values: null !global;
+        }
+    }
+}
+
+@function color-of($type) {
+    @return map.get($theme-values, $type);
+}

MultiShop/client/src/assets/scss/_variables.scss

@@ -0,0 +1,3 @@
+$themes: (
+    "light": ("background": #F4F4F2, "navbar": #E8E8E8, "sub": #88B7B5, "alt": #847996, "text": #1a1a1a),
+);

MultiShop/client/src/assets/scss/main.scss

@@ -1,12 +1,26 @@
-@use "light";
+@use "app-layout";
+@use "themer";
+@use "../../../node_modules/bootstrap/scss/bootstrap";
 @import "../../../node_modules/bootstrap-icons/font/bootstrap-icons.css";
 
-html, body, #app, #app > .content {
+nav.navbar {
-    min-height: 100%;
+    @extend .navbar-expand-lg;
-    height: 100%;
+    @include themer.themed {
+        @extend .navbar-light;
+        background-color: themer.color-of("navbar");
+    }
 }
 
-.content {
+.jumbotron {
-    display: flex;
+    @extend .container-fluid;
-    flex-direction: column;
+    @extend .p-4;
+    @include themer.themed {
+    }
+}
+
+#content {
+    @include themer.themed {
+        background-color: themer.color-of("background");
+        color: themer.color-of("text");
+    }
 }

MultiShop/client/src/views/Home.vue

@@ -1,13 +1,33 @@
 <template>
-  <div class="home">
+    <div id="main" class="jumbotron d-flex flex-column align-items-center">
-    <img alt="Vue logo" src="../assets/images/logo.png">
+        <div>
-  </div>
+            <img
+                alt="SHAID logo"
+                src="../assets/images/logo.svg"
+                class="img-fluid"
+            />
+        </div>
+        <div id="description" class="text-center px-3 my-2">
+            <h1 class="my-2">C-SHAID</h1>
+            <p>
+                Also known as Component Shopping Aid, is a site designed to
+                help with the online electronic searching experience. Create
+                project component lists and search across multiple commonly used
+                sites to find the ideal purchase.
+            </p>
+        </div>
+    </div>
 </template>
 
 <script>
 export default {
     name: "Home",
-    components: {
+    components: {}
-    }
 };
 </script>
+
+<style lang="scss" scoped>
+#description {
+    max-width: 540px;
+}
+</style>