Add support for vuetify theming

app-starter/WguAppTemplate.vue

@@ -3,7 +3,7 @@
 
     <slot name="wgu-app-begin" />
 
-    <wgu-app-header :color="baseColor">
+    <wgu-app-header>
       <!-- forward the slots of AppHeader -->
       <slot name="wgu-tb-start" slot="wgu-tb-start" />
       <slot name="wgu-tb-after-title" slot="wgu-tb-after-title" />
@@ -17,7 +17,7 @@
     <wgu-app-sidebar v-if="sidebarWins.length" v-bind="sidebarConfig">
         <template v-for="(moduleWin, index) in sidebarWins">
           <component
-            :is="moduleWin.type" :key="index" :color="baseColor"
+            :is="moduleWin.type" :key="index"
             v-bind="moduleWin"
           />
       </template>
@@ -26,29 +26,28 @@
     <slot name="wgu-before-content" />
     <v-content app>
       <v-container id="ol-map-container" fluid fill-height class="pa-0">
-        <wgu-map :color="baseColor" />
+        <wgu-map />
         <!-- layer loading indicator -->
-        <wgu-maploading-status :color="baseColor" />
+        <wgu-maploading-status />
         <slot name="wgu-after-map"> 
         </slot>
         <!-- Portal to overlay the map content from an application module -->
         <portal-target name="map-overlay" />
         <wgu-app-logo />
-        <wgu-bglayerswitcher :color="baseColor"/>
+        <wgu-bglayerswitcher />
       </v-container>
     </v-content>
 
     <template v-for="(moduleWin, index) in floatingWins">
       <component
-        :is="moduleWin.type" :key="index" :color="baseColor"
+        :is="moduleWin.type" :key="index"
         v-bind="moduleWin"
       />
     </template>
 
     <slot name="wgu-before-footer" />
 
     <wgu-app-footer
-      :color="baseColor"
       :footerTextLeft="$t('app.footerTextLeft')"
       :footerTextRight="$t('app.footerTextRight')"
       :showCopyrightYear="showCopyrightYear"
@@ -101,8 +100,7 @@
         sidebarConfig: this.getSidebarConfig(),
         floatingWins: this.getModuleWinData('floating'),
         sidebarWins: this.getModuleWinData('sidebar'),
-        showCopyrightYear: Vue.prototype.$appConfig.showCopyrightYear,
-        baseColor: Vue.prototype.$appConfig.baseColor
+        showCopyrightYear: Vue.prototype.$appConfig.showCopyrightYear
       }
     },
     created () {

app-starter/components/AppFooter.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <v-footer :color="color" class="white--text" app>
+  <v-footer color="primary" class="onprimary--text" app>
     <span class="wgu-footer-left" v-html="footerTextLeft"></span>
     <v-spacer></v-spacer>
     <div class="wgu-footer-right">
@@ -16,7 +16,6 @@
 export default {
   name: 'wgu-app-footer',
   props: {
-    color: { type: String, required: false, default: 'red darken-3' },
     footerTextLeft: { type: String, required: true },
     footerTextRight: { type: String, required: true },
     showCopyrightYear: { type: Boolean, required: false, default: true }
@@ -34,8 +33,8 @@ export default {
     }
   }
   /* avoid special color for links in footer */
-  .v-application a {
-    color: inherit;
+  .v-footer a {
+    color: inherit !important;
   }
 
 </style>

app-starter/components/AppHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app-bar
-    class="wgu-app-toolbar white--text"
-    :color="color"
+    class="wgu-app-toolbar onprimary--text"
+    color="primary"
     fixed
     app
     clipped-left
@@ -34,12 +34,13 @@
     <v-menu v-if="menuButtons.length" offset-y nudge-bottom="15">
       <template v-slot:activator="{on}">
 
-      <v-btn icon dark v-on="on"
+      <v-btn icon v-on="on"
+        color="onprimary"
         :title="$t('wgu-toolbar-menu.title')">
         <v-icon medium>menu</v-icon>
       </v-btn>
       </template>
-      <v-list :color="color">
+      <v-list color="primary">
           <template v-for="(tbButton, index) in menuButtons">
             <v-list-item :key="index">
               <component 
@@ -65,6 +66,7 @@ import ZoomToMaxExtentButton from '../../src/components/maxextentbutton/ZoomToMa
 import Geocoder from '../../src/components/geocoder/Geocoder'
 import Geolocator from '../../src/components/geolocator/Geolocator'
 import LocaleSwitcher from '../../src/components/localeswitcher/LocaleSwitcher'
+import ThemeSwitcher from '../../src/components/themeswitcher/ThemeSwitcher'
 
 export default {
   name: 'wgu-app-header',
@@ -73,11 +75,10 @@ export default {
     'wgu-geocoder-btn': Geocoder,
     'wgu-zoomtomaxextent-btn': ZoomToMaxExtentButton,
     'wgu-geolocator-btn': Geolocator,
-    'wgu-localeswitcher-btn': LocaleSwitcher
-  },
-  props: {
-    color: { type: String, required: false, default: 'red darken-3' }
+    'wgu-localeswitcher-btn': LocaleSwitcher,
+    'wgu-themeswitcher-btn': ThemeSwitcher
   },
+  props: {},
   data () {
     return {
       menuButtons: this.getModuleButtons('menu'),
@@ -108,8 +109,6 @@ export default {
           buttons.push({
             type: moduleOpts.win ? 'wgu-toggle-btn' : key + '-btn',
             moduleName: key,
-            // TODO For further simplifications we should revise the config property 'darkLayout'.
-            dark: moduleOpts.darkLayout,
             ...moduleOpts
           });
         }

app-starter/components/AppSidebar.vue

@@ -4,7 +4,6 @@
       app
       clipped
       :width=width
-      :color=color
       v-model="sidebarOpen"
       >
       <!-- Forward the default slot for sidebar content. -->
@@ -15,10 +14,10 @@
           class="wgu-app-sidebar-toggle-btn px0"
           absolute
           top
-          :color=color
+          color="secondary"
           @click="sidebarOpen = !sidebarOpen"> 
-          <v-icon v-if="sidebarOpen">chevron_left</v-icon> 
-          <v-icon v-else>chevron_right</v-icon> 
+          <v-icon color="onsecondary" v-if="sidebarOpen">chevron_left</v-icon> 
+          <v-icon color="onsecondary" v-else>chevron_right</v-icon> 
         </v-btn>
       </template>
   </v-navigation-drawer>
@@ -31,7 +30,6 @@ import { WguEventBus } from '../../src/WguEventBus'
 export default {
   name: 'wgu-app-sidebar',
   props: {
-    color: { type: String, required: false, default: 'white' },
     width: { type: Number, required: false, default: 400 },
     visible: { type: Boolean, required: false, default: true },
     autoScroll: { type: Boolean, required: false, default: true },

app-starter/static/app-conf-minimal.json

@@ -1,6 +1,17 @@
 {
 
-  "baseColor": "green darken-3",
+  "colorTheme": {
+    "dark": false,
+    "themes": {
+      "light": {
+        "primary": "#2E7D32"
+      },
+      "dark": {
+        "secondary": "#A5D6A7"
+      }
+    }
+  },
+
   "showCopyrightYear": true,
 
   "lang": {
@@ -35,8 +46,7 @@
     "wgu-helpwin": {
       "target": "toolbar",
       "win": "floating",
-      "icon": "help",
-      "darkLayout": true
+      "icon": "help"
     }
   }
 

app-starter/static/app-conf-projected.json

@@ -1,6 +1,18 @@
 {
 
-  "baseColor": "orange darken-3",
+  "colorTheme": {
+    "dark": false,
+    "themes": {
+      "light": {
+        "primary": "#EF6C00",
+        "onprimary": "#FFFFFF",
+        "onsecondary": "#FFFFFF"
+      },
+      "dark": {
+        "secondary": "#FFCC80"
+      }
+    }
+  },
 
   "logo": "https://dummyimage.com/100x100/aaa/fff&text=Wegue",
   "logoSize": "100",
@@ -130,14 +142,12 @@
       "target": "menu",
       "win": "floating",
       "icon": "layers",
-      "darkLayout": true,
       "draggable": false
     },
     "wgu-measuretool": {
       "target": "menu",
       "win": "floating",
       "icon": "photo_size_select_small",
-      "darkLayout": true,
       "draggable": false,
       "strokeColor": "#c62828",
       "fillColor": "rgba(198,40,40,0.2)",
@@ -150,7 +160,6 @@
       "target": "menu",
       "win":"floating",
       "icon": "info",
-      "darkLayout": true,
       "draggable": false,
       "initPos": {
         "left": 8,
@@ -159,7 +168,6 @@
     },
     "wgu-geocoder": {
       "target": "toolbar",
-      "darkLayout": true,
       "minChars": 4,
       "queryDelay": 200,
       "debug": false,
@@ -172,14 +180,12 @@
       }
     },
     "wgu-zoomtomaxextent": {
-      "target": "toolbar",
-      "darkLayout": true
+      "target": "toolbar"
     },
     "wgu-maprecorder": {
       "target": "toolbar",
       "win": "floating",
       "icon": "mdi-video",
-      "darkLayout": true,
       "draggable": false,
       "initPos": {
         "left": 8,
@@ -189,12 +195,10 @@
     "wgu-helpwin": {
       "target": "toolbar",
       "win": "floating",
-      "icon": "help",
-      "darkLayout": true
+      "icon": "help"
     },
     "wgu-localeswitcher": {
-      "target": "toolbar",
-      "darkLayout": true
+      "target": "toolbar"
     }
   }
 

app-starter/static/app-conf-sidebar.json

@@ -1,6 +1,8 @@
 {
 
-  "baseColor": "red darken-3",
+  "colorTheme": {
+    "dark": false
+  },
 
   "logo": "https://dummyimage.com/100x100/aaa/fff&text=Wegue",
   "logoWidth": "100",
@@ -46,7 +48,6 @@
   "sidebar": {
     "visible": true,
     "width": 400,
-    "color": "white",
     "autoScroll": true,
     "scrollDuration": 500
   },
@@ -198,15 +199,13 @@
       "target": "menu",
       "win": "sidebar",
       "icon": "layers",
-      "darkLayout": true,
       "visible": true,
       "minimizable": true
     },
     "wgu-measuretool": {
       "target": "menu",
       "win": "sidebar",
       "icon": "photo_size_select_small",
-      "darkLayout": true,
       "minimizable": true,
       "strokeColor": "#c62828",
       "fillColor": "rgba(198,40,40,0.2)",
@@ -219,12 +218,10 @@
       "target": "menu",
       "win": "sidebar",
       "icon": "info",
-      "darkLayout": true,
       "minimizable": true
     },
     "wgu-geocoder": {
       "target": "toolbar",
-      "darkLayout": true,
       "minChars": 2,
       "queryDelay": 200,
       "debug": false,
@@ -236,37 +233,35 @@
       }
     },
     "wgu-zoomtomaxextent": {
-      "target": "toolbar",
-      "darkLayout": true
+      "target": "toolbar"
     },
     "wgu-maprecorder": {
       "target": "toolbar",
       "win": "sidebar",
       "icon": "mdi-video",
-      "darkLayout": true,
       "minimizable": true
     },
     "wgu-helpwin": {
       "target": "toolbar",
       "win": "floating",
-      "icon": "help",
-      "darkLayout": true
+      "icon": "help"
     },
     "wgu-geolocator": {
+      "target": "toolbar"
+    },
+    "wgu-themeswitcher": {
       "target": "toolbar",
-      "darkLayout": true
+      "icon": "dark_mode"
     },
     "wgu-attributetable": {
       "target": "menu",
       "win": "sidebar",
       "icon": "table_chart",
-      "darkLayout": true,
       "minimizable": true,
       "syncTableMapSelection": true
     },
     "wgu-localeswitcher": {
-      "target": "toolbar",
-      "darkLayout": true
+      "target": "toolbar"
     }
   }
 }