diff --git a/webapp/src/main/webapp/css/individual/individual-2column-view.css b/webapp/src/main/webapp/css/individual/individual-2column-view.css
index e1c35dcb33..9a62e007fc 100644
--- a/webapp/src/main/webapp/css/individual/individual-2column-view.css
+++ b/webapp/src/main/webapp/css/individual/individual-2column-view.css
@@ -269,7 +269,7 @@ span#quickViewLink img {
     padding-top:18px;
 }
 #individual-info div#contactContainer h3{
-    color:#8aa149;
+    color: var(--secondary-color, #8aa149);
 }
 ul#individual-personInPosition li {
     padding-bottom:12px;
diff --git a/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css b/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css
index 51cb46c9b1..236d9339b9 100755
--- a/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css
+++ b/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css
@@ -23,7 +23,7 @@ body {
     -webkit-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
     -moz-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
     -o-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
-    background-color: #8BAB2E;
+    background-color: var(--accent-color, #8BAB2E);
 //    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#446791), to(#164682));
 //    background-image: -moz-linear-gradient(top, #446791, #164682);
     width: auto;
diff --git a/webapp/src/main/webapp/themes/nemo/css/homepage.css b/webapp/src/main/webapp/themes/nemo/css/homepage.css
index 9dddebadf9..119d5b2b1b 100644
--- a/webapp/src/main/webapp/themes/nemo/css/homepage.css
+++ b/webapp/src/main/webapp/themes/nemo/css/homepage.css
@@ -182,7 +182,7 @@ Customise the meet faculty/expert section
 Customise the about our research section
 ----------------------------------------------*/
 .research-count {
-  background-color: #064d68;
+  background-color: var(--primary-color, #064d68);
   padding: 60px;
   color: #fff;
   border: 1px solid #023447;
diff --git a/webapp/src/main/webapp/themes/nemo/css/individual.css b/webapp/src/main/webapp/themes/nemo/css/individual.css
index af5bc50b77..515c968dfc 100644
--- a/webapp/src/main/webapp/themes/nemo/css/individual.css
+++ b/webapp/src/main/webapp/themes/nemo/css/individual.css
@@ -13,7 +13,7 @@ Homepage colours
 }
 .person-content .user-nav {
   margin: 20px 0 17px 0;
-  color: #337ab7;
+  color: var(--primary-color-lighter, #337ab7);
   /* Hide the contact button for demo purposes */
 }
 .person-content .user-nav > li + li {
@@ -69,7 +69,7 @@ Styling for the left hand side contact info column on the individual person page
 }
 .share-contact a.email {
   word-break: break-word;
-  color: #222222;
+  color: var(--text-color, #222222);
   font-size: 15px;
 }
 .share-contact .individual-urls .list-group-item {
@@ -92,7 +92,7 @@ Styling for the left hand side contact info column on the individual person page
 .share-contact #coinvestigator_link_container .collaboratorship-link a {
   min-width: 165px;
   background-image: none;
-  background-color: #064d68;
+  background-color: var(--primary-color, #064d68);
   color: white;
   text-shadow: none;
 }
@@ -109,13 +109,13 @@ Styling for the left hand side contact info column on the individual person page
 #individual-info #individual-hasResearchArea a.label {
   font-size: 13px;
   background: transparent;
-  border: 1px solid #337ab7;
-  color: #337ab7;
+  border: 1px solid var(--primary-color-lighter, #337ab7);
+  color: var(--primary-color-lighter, #337ab7);
   font-weight: 400;
   transition: all 0.5s;
 }
 #individual-info #individual-hasResearchArea a.label:hover {
-  background: #337ab7;
+  background: var(--primary-color-lighter, #337ab7);
   color: #fff;
 }
 /* Remove borders from all items in nav tab content panes */
diff --git a/webapp/src/main/webapp/themes/nemo/css/reset.css b/webapp/src/main/webapp/themes/nemo/css/reset.css
index 0aef5cacba..dce1659507 100644
--- a/webapp/src/main/webapp/themes/nemo/css/reset.css
+++ b/webapp/src/main/webapp/themes/nemo/css/reset.css
@@ -56,7 +56,7 @@ td {
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
-    color: #595b5b;
+    color: var(--text-color, #595b5b);
     font-weight: normal;
 }
 body {    
diff --git a/webapp/src/main/webapp/themes/nemo/css/theme.css b/webapp/src/main/webapp/themes/nemo/css/theme.css
index f839279f1d..9000077bec 100644
--- a/webapp/src/main/webapp/themes/nemo/css/theme.css
+++ b/webapp/src/main/webapp/themes/nemo/css/theme.css
@@ -19,13 +19,14 @@ body {
   height: 100%;
   font-size: 14px;
   -webkit-font-smoothing: antialiased;
+  color: var(--text-color, #333);
 }
 a,
 a:hover,
 a:focus {
   text-decoration: none;
   /* color: #1E6B53; */
-  color: #064d68;
+  color: var(--link-color, #064d68);
   ;
 }
 /*---------------------------------------------
@@ -33,7 +34,7 @@ Styling identity.ftl header
 ----------------------------------------------*/
 .header {
   /* background: #1e6b52; */
-  background: #064d68;
+  background: var(--banner-color, #064d68);
   padding: 20px 0;
   /* border-bottom: 1px solid #16503d; */
   border-bottom: 1px solid #023447;
@@ -45,8 +46,9 @@ Styling identity.ftl header
 }
 ----------------------------------------------*/
 .header img {
-  width: 263px;
+  /* width: 263px; */
   max-width: 500px;
+  object-fit: contain;
 }
 .header h1 {
   margin: 0;
@@ -78,11 +80,11 @@ Styling identity.ftl header
   }
 }
 button.btn.sympl-search {
-  background: #064d68;
+  background: var(--primary-color, #064d68);
   text-shadow: 0 0 0 transparent;
   color: #fff;
   /* border: 2px solid #c9c9c9; */
-  border: 2px solid #023447;
+  border: 2px solid var(--primary-color-darker, #023447);
 }
 .theme-dropdown .dropdown-menu {
   position: static;
@@ -268,3 +270,28 @@ These are helper classes to add margin gaps where needed
 .input-group-header-search {
 	
 }
+
+/* ADMIN PANEL */
+
+.advancedThemeColor {
+  display: none;
+}
+
+.themeColorReset > span {
+  color: #888;
+}
+
+.themeColorResetButton {
+  background: #ff3737;
+  color: white;
+  border-radius: 4px;
+  padding: 3px 8px;
+  border: 1px solid red;
+  cursor: pointer;
+}
+
+.themeColorPickerWrapper{
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
diff --git a/webapp/src/main/webapp/themes/nemo/templates/head.ftl b/webapp/src/main/webapp/themes/nemo/templates/head.ftl
index de486fc0f9..c48534d6e8 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/head.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/head.ftl
@@ -33,4 +33,19 @@
 an individual profile page. -->
 ${headContent!}
 
+<style>
+    :root {
+        <#if themePrimaryColorLighter?? && themePrimaryColorLighter != "null">--primary-color-lighter: ${themePrimaryColorLighter};</#if>
+        <#if themePrimaryColor?? && themePrimaryColor != "null">--primary-color: ${themePrimaryColor};</#if>
+        <#if themePrimaryColorDarker?? && themePrimaryColorDarker != "null">--primary-color-darker: ${themePrimaryColorDarker};</#if>
+        <#if themeBannerColor?? && themeBannerColor != "null">--banner-color: ${themeBannerColor};</#if>
+        <#if themeSecondaryColor?? && themeSecondaryColor != "null">--secondary-color: ${themeSecondaryColor};</#if>
+        <#if themeAccentColor?? && themeAccentColor != "null">--accent-color: ${themeAccentColor};</#if>
+        <#if themeLinkColor?? && themeLinkColor != "null">--link-color: ${themeLinkColor};</#if>   
+        <#if themeTextColor?? && themeTextColor != "null">--text-color: ${themeTextColor};</#if>
+        <#if logoUrl?? && logoUrl != "null">--logo-url: url('${logoUrl}');</#if>
+        <#if logoSmallUrl?? && logoSmallUrl != "null">--logo-small-url: url('${logoSmallUrl}');</#if>
+    }
+</style>
+
 <link rel="shortcut icon" type="image/x-icon" href="${urls.base}/favicon.ico">
diff --git a/webapp/src/main/webapp/themes/nemo/templates/identity.ftl b/webapp/src/main/webapp/themes/nemo/templates/identity.ftl
index ac03eea57d..840c180bed 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/identity.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/identity.ftl
@@ -7,10 +7,22 @@
 			<div class="container">
 				<div class="row">
 					<div class="col-md-12 col-sm-12 hidden-xs logo-sm">
-						<a href="${urls.home}"><img height="66" src="${urls.theme}/images/vivo_logo.png" alt="VIVO Logo" /></a>
+						<#if logoUrl?? && logoUrl != "null">
+							<a href="${urls.home}"><img height="66" src="${logoUrl}" alt="VIVO Logo" /></a>
+						<#elseif logoSmallUrl?? && logoSmallUrl != "null">
+							<a href="${urls.home}"><img height="66" src="${logoSmallUrl}" alt="VIVO Logo" /></a>
+						<#else>
+							<a href="${urls.home}"><img height="66" src="${urls.theme}/images/vivo_logo.png" alt="VIVO Logo" /></a>
+						</#if>
 					</div>
 					<div class="col-xs-12 visible-xs-block">
-						<a href="${urls.home}"><img height="66" src="${urls.theme}/images/vivo_logo.png" alt="VIVO Logo" /></a>
+						<#if logoSmallUrl?? && logoSmallUrl != "null">
+							<a href="${urls.home}"><img height="66" src="${logoSmallUrl}" alt="VIVO Logo" /></a>
+						<#elseif logoUrl?? && logoUrl != "null">
+							<a href="${urls.home}"><img height="66" src="${logoUrl}" alt="VIVO Logo" /></a>
+						<#else>
+							<a href="${urls.home}"><img height="66" src="${urls.theme}/images/vivo_logo.png" alt="VIVO Logo" /></a>
+						</#if>
 					</div>
 				</div>
 			</div>
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/edit.css b/webapp/src/main/webapp/themes/tenderfoot/css/edit.css
index 578766caa9..8d6671819d 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/edit.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/edit.css
@@ -51,7 +51,7 @@ input.form-button:visited {
     border: 0;
     margin: 0;
     /* background-color: #749a02; */
-    background-color: #3446A0;
+    background-color: var(--accent-color, #3446A0);
     color: #fff;
     font-size: 14px;
     font-weight: normal;
@@ -65,7 +65,7 @@ input.form-button:visited {
     color: #fff;
 }
 #verbose-mode b {
-    color: #595B5B;
+    color: var(--text-color, #595B5B);
 }
 #verbose-mode .verbose-off{
     background: #706a66;
@@ -87,7 +87,7 @@ input#delete:visited {
     border: 0;
     margin: 0;
     /* background-color: #398aac; */
-    background-color: #0c0cb5;
+    background-color: var(--secondary-color, #0c0cb5);
     color: #fff;
     font-size: 14px;
     font-weight: normal;
@@ -100,12 +100,12 @@ input.submit:hover,
 input#submit:hover,
 input.form-button:hover {
     color: #fff;
-    background-color: #3E8BAA;
+    background-color: var(--primary-color, #3E8BAA);
 }
 input.delete:hover,
 input#delete:hover {
     color: #fff;
-    background-color: #93c3d4;
+    background-color: var(--secondary-color, #93c3d4);
 }
 .verbose-toggle,
 .verbose-toggle:active,
@@ -177,7 +177,7 @@ p.submit {
     border-color: #e0dfdf;
     font-size: .8em;
     border-width: 1px;
-    color: #595B5B;
+    color: var(--text-color, #595B5B);
     padding: .3em;
 }
 a.return:hover,
@@ -187,27 +187,27 @@ a.return:active {
     background: none;
 }
 .database_header {
-    background-color: #f1f2ee;
+    background-color: var(--primary-color, #f1f2ee);
     color: #2485ae;
     font-size: 1em;
 }
 .database_upperleftcorner {
-    color: #5F6464;
+    color: var(--text-color, #5f6464);
     font-size: 1em;
 }
 .database_upperleftcenter {
     background-color: #B0C4DE;
-    color: #5F6464;
+    color: var(--text-color, #5f6464);
     font-size: 1em;
 }
 .rownumheader,
 .rownum {
     background-color: #F1F2EE;
-    color: #5F6464;
+    color: var(--text-color, #5f6464);
     font-size: 1em;
 }
 .headercenter {
-    color:  #5F6464;
+    color:  var(--text-color, #5f6464);
     font-size: 10pt;
     font-style: normal;
     text-align: center;
@@ -226,14 +226,14 @@ a.return:active {
     font-size: 1em;
 }
 .verticalfieldlabel {
-    color: #5E6363; /*#5F6464;*/
+    color: var(--text-color, #5E6363); /*#5F6464;*/
     font-style: normal !important;
     font-size: 10pt !important;
     line-height: 2em !important;
 }
 td.row, .rowvert {
     background-color: #f7f9f9;
-    color: #5F6464;
+    color: var(--text-color, #5f6464);
 }
 .row, .rowvert {
     font-size: 10pt;
@@ -243,7 +243,7 @@ td.row, .rowvert {
 }
 td.rowalternate {
     background-color: #fff;
-    color: #5F6464;
+    color: var(--text-color, #5f6464);
 }
 .rowalternate {
     font-size: 1em;
@@ -251,7 +251,7 @@ td.rowalternate {
 }
 .rowbold {
     background-color: #FFFAFA;
-    color: #5F6464;
+    color: var(--text-color, #5f6464);
     font-size: 10pt; /*1em;*/
     line-height: 2em;
 }
@@ -321,7 +321,7 @@ ul#browse-classes a,
 ul#find-filters a,
 ul#vgraph-classes a {
     text-decoration: none;
-    color: #5E6363;
+    color: var(--text-color, #5E6363);
 }
 ul.ingestMenu {
     margin-bottom: 1.5em;
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/page-browse.css b/webapp/src/main/webapp/themes/tenderfoot/css/page-browse.css
index 737b6331f3..fcce66f45e 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/page-browse.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/page-browse.css
@@ -12,7 +12,7 @@ ul#vgraph-classes li {
 ul#browse-classes a:hover,
 ul#browse-classes a.selected {
     background: url(../images/arrow.gif) 4px 5px no-repeat;
-    color: #2ea0cf;
+    color: var(--primary-color, #2ea0cf);
 }
 ul#browse-classes .count-classes {
     font-size: 12px;
@@ -27,7 +27,7 @@ ul#alpha-browse-individuals {
 ul#alpha-browse-individuals a:hover,
 ul#alpha-browse-individuals a.selected {
     background: url(../images/arrowSmall.gif) -3px 7px no-repeat;
-    color: #2ea0cf;
+    color: var(--primary-color, #2ea0cf);
 }
 ul#alpha-browse-individuals .count-classes,
 ul#vgraph-classes .count-classes {
@@ -60,11 +60,11 @@ nav#alpha-browse-container {
 #individuals-in-class li h1,
 #property-group-menu ul,
 article.property ul.property-list {
-    color: #5e6363;
+    color: var(--text-color, #5e6363);
     font-size: 1em;
 }
 .pagination.menupage li a:hover {
-    background: #5e6363;
+    background: var(--text-color, #5e6363);
 }
 .pagination>li {
     display: inline-block;
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/page-home.css b/webapp/src/main/webapp/themes/tenderfoot/css/page-home.css
index 1135e4f74c..1bcd90cb1a 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/page-home.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/page-home.css
@@ -30,8 +30,8 @@
     border-top: 1px solid rgba(220,228,227,.42); /* stroke */
     border-bottom: 1px solid rgba(220,228,227,.42); /* stroke */
     /* background-color: #395d7f; /* layer fill content */
-    background-color: #338caf;
-    border-bottom: 2px solid #62b6d7;
+    background-color: var(--primary-color-darker, #395d7f);;
+    border-bottom: 2px solid var(--primary-color, #62b6d7);
     color: #fff;
 }
 #home-stats {
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/page-individual.css b/webapp/src/main/webapp/themes/tenderfoot/css/page-individual.css
index 001ebb6f79..aa5edf7c5d 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/page-individual.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/page-individual.css
@@ -63,7 +63,7 @@ article.property li h3 {
 
 #individual-intro h1 {
     font-size: 1.375em;
-    color: #2485ae;
+    color: var(--primary-color, #2485ae);
     float: left;
 }
 
@@ -131,7 +131,7 @@ a.edit-mainImage img.edit-individual {
     margin-top: 15px;
 }
 #admin h3 {
-    background-color: #398AAC;
+    background-color: var(--primary-color, #398AAC);
     color: #fff;
 }
 
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/page-login.css b/webapp/src/main/webapp/themes/tenderfoot/css/page-login.css
index 9cf12731e3..dee98d9a93 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/page-login.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/page-login.css
@@ -14,7 +14,7 @@ body.login #login {
 }
 #login h2 {
     font-size: 22px;
-    color: #2485ae;
+    color: var(--primary-color, #2485ae);
     padding-left: 15px;
     padding-top: 18px;
     border-bottom: none;
@@ -137,7 +137,7 @@ p.external-auth {
 }
 p.external-auth a.blue,
 p.external-auth a.blue:visited {
-    background-color: #398AAC;
+    background-color: var(--secondary-color, #398AAC);
     width: 180px;
     margin-bottom: 17px;
     line-height: 1.3em;
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/reset.css b/webapp/src/main/webapp/themes/tenderfoot/css/reset.css
index 9476039ce9..144880fd11 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/reset.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/reset.css
@@ -56,7 +56,7 @@ td {
     font-size: 100%;
     font-family: "Noto Sans", "Lucida Sans Unicode","Lucida Grande", Geneva, helvetica, sans-serif;
     vertical-align: baseline;
-    color: #595b5b;
+    color: var(--text-color, #595B5B);
     font-weight: normal;
 }
 body {
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
index 68da484afe..0af5a1bf79 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
@@ -68,6 +68,16 @@ body {
     background: #f3f3f0 url(../images/header-background.png) center 0 no-repeat;
 }
 
+body > .banner {
+    z-index: -1;
+    background: #f3f3f0 url(../images/header-background.png) center 0 no-repeat;
+    width: 100%;
+    position: absolute;
+    height: 125px;
+    background-blend-mode: luminosity;
+    background-color: var(--banner-color);
+}
+
 #wrapper-content {
     background: none repeat scroll 0 0 #fff;
     padding-top: 20px;
@@ -86,7 +96,7 @@ body {
 }
 
 .row.title {
-    background: #398AAC;
+    background: var(--primary-color, #398AAC);
     padding-top: 7px;
     padding-bottom: 3px;
 }
@@ -176,9 +186,12 @@ ul#header-nav a.log-out {
     padding-top: 5px;
 }
 #search-field {
-    width: 396px;
-    height: 38px;
-    background: url(../images/search-interior-pages.png) 0 0 no-repeat;
+    width: 390px;
+    height: 33px;
+    border-radius: 4px;
+    background: url(../images/search-interior-pages.png) -2px -2px no-repeat;
+    background-color: var(--accent-color);
+    background-blend-mode: luminosity;
 }
 #search-field input.search {
     text-decoration: none;
@@ -273,8 +286,19 @@ h1.vivo-logo {
     top: 30px;
     left: 0;
     background: url(../images/VIVO-logo.png) 0 0 no-repeat;
-    background-size: 100% auto;
+
+    background-size: contain;
+    background-image: var(--logo-small-url, var(--logo-url, url(../images/VIVO-logo.png)));
+    max-width: 200px;
+}
+
+@media (min-width: 768px) {
+    h1.vivo-logo {
+        background-image: var(--logo-url, var(--logo-small-url, url(../images/VIVO-logo.png)));
+        max-width: none;
+    }
 }
+
 h1.vivo-logo a {
     display: block;
     width: 100%;
@@ -288,11 +312,14 @@ h2 {
     padding: 5px 0 3px 0;
     margin: 0;
     font-size: 1.375em;
-    color: #064d68;
+    color: var(--primary-color-darker, #064d68);
     line-height: 1.5em;
 }
 h2 a {
-    color: #2485ae;
+    color: var(--link-color, #2485ae);
+}
+a:focus, a:hover {
+    color: var(--link-color, #23527c);
 }
 h2 a:link,
 h2 a:visited {
@@ -302,19 +329,19 @@ h3 {
     padding: 5px 0 6px 0;
     margin: 0;
     font-size: 1.125em;
-    color: #064d68;
+    color: var(--primary-color-darker, #064d68);
 }
 h4 {
     padding: 5px 0 6px 0;
     margin: 0;
     font-size: 1em;
-    color: #064d68;
+    color: var(--primary-color-darker, #064d68);
 }
 h5 {
     padding: 5px 0 6px 0;
     margin: 0;
     font-size: .875em;
-    color: #064d68;
+    color: var(--primary-color-darker, #064d68);
 }
 label {
     display: block;
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/page/page-home.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/page/page-home.ftl
index 1ca9a09ebd..63a131ed21 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/page/page-home.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/page/page-home.ftl
@@ -27,6 +27,7 @@
     <body class="${bodyClasses!}" onload="${bodyOnload!}">
         <#-- supplies the faculty count to the js function that generates a random row number for the search query -->
         <@lh.facultyMemberCount  vClassGroups! />
+        <div class="banner"></div>
 		<header id="branding" role="banner">
 			<#include "identity.ftl">
 		</header>
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/page/page.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/page/page.ftl
index 9289749208..8f296adf99 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/page/page.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/page/page.ftl
@@ -9,6 +9,7 @@
     </head>
 
     <body class="${bodyClasses!}" onload="${bodyOnload!}">
+		<div class="banner"></div>
 		<header id="branding" role="banner" -->
 			<#include "identity.ftl">
 		</header>
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/head.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/head.ftl
index 430da5b435..d6f072b6b4 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/head.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/head.ftl
@@ -31,4 +31,19 @@
 an individual profile page. -->
 ${headContent!}
 
+<style>
+    :root {
+        <#if themePrimaryColorLighter?? && themePrimaryColorLighter != "null">--primary-color-lighter: ${themePrimaryColorLighter};</#if>
+        <#if themePrimaryColor?? && themePrimaryColor != "null">--primary-color: ${themePrimaryColor};</#if>
+        <#if themePrimaryColorDarker?? && themePrimaryColorDarker != "null">--primary-color-darker: ${themePrimaryColorDarker};</#if>
+        <#if themeBannerColor?? && themeBannerColor != "null">--banner-color: ${themeBannerColor};</#if>
+        <#if themeSecondaryColor?? && themeSecondaryColor != "null">--secondary-color: ${themeSecondaryColor};</#if>
+        <#if themeAccentColor?? && themeAccentColor != "null">--accent-color: ${themeAccentColor};</#if>
+        <#if themeLinkColor?? && themeLinkColor != "null">--link-color: ${themeLinkColor};</#if>   
+        <#if themeTextColor?? && themeTextColor != "null">--text-color: ${themeTextColor};</#if>
+        <#if logoUrl?? && logoUrl != "null">--logo-url: url('${logoUrl}');</#if>
+        <#if logoSmallUrl?? && logoSmallUrl != "null">--logo-small-url: url('${logoSmallUrl}');</#if>
+    }
+</style>
+
 <link rel="shortcut icon" type="image/x-icon" href="${urls.base}/favicon.ico">
diff --git a/webapp/src/main/webapp/themes/wilma/css/reset.css b/webapp/src/main/webapp/themes/wilma/css/reset.css
index 08780ef510..644f8b2710 100644
--- a/webapp/src/main/webapp/themes/wilma/css/reset.css
+++ b/webapp/src/main/webapp/themes/wilma/css/reset.css
@@ -56,7 +56,7 @@ td {
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
-    color: #595b5b;
+    color: var(--text-color, #595b5b);
     font-weight: normal;
 }
 body {
diff --git a/webapp/src/main/webapp/themes/wilma/css/wilma.css b/webapp/src/main/webapp/themes/wilma/css/wilma.css
index 0a7c4fdb26..394d23e0c6 100644
--- a/webapp/src/main/webapp/themes/wilma/css/wilma.css
+++ b/webapp/src/main/webapp/themes/wilma/css/wilma.css
@@ -27,10 +27,21 @@ body {
     margin: 0 auto;
 }
 body {
-   background: #f3f3f0 url(../images/header-background.png) center 0 no-repeat;
+    background: #f3f3f0;
 }
+ 
+body > .banner {
+    z-index: -1;
+    background: url(../images/header-background.png) center 0 no-repeat;
+    width: 100%;
+    position: absolute;
+    height: 125px;
+    background-blend-mode: luminosity;
+    background-color: var(--banner-color);
+}
+
 a {
-    color: #2485AE;
+    color: var(--link-color, #2485AE);
 }
 a:hover,
 h2 a:hover,
@@ -48,11 +59,11 @@ h2 {
     padding: 10px 0 12px 0;
     margin: 0;
     font-size: 1.375em;
-    color: #064d68;
+    color: var(--primary-color-darker, #064d68);
     line-height: 1.5em;
 }
 h2 a {
-    color: #2485ae;
+    color: var(--link-color, #2485ae);
 }
 h2 a:link,
 h2 a:visited {
@@ -62,19 +73,19 @@ h3 {
     padding: 10px 0 12px 0;
     margin: 0;
     font-size: 1.125em;
-    color: #064d68;
+    color: var(--primary-color-darker, #064d68);
 }
 h4 {
     padding: 10px 0 12px 0;
     margin: 0;
     font-size: 1em;
-    color: #064d68;
+    color: var(--primary-color-darker, #064d68);
 }
 h5 {
     padding: 10px 0 12px 0;
     margin: 0;
     font-size: .875em;
-    color: #064d68;
+    color: var(--primary-color-darker, #064d68);
 }
 /* ------------------------------------------------->  */
 /* EDITING STYLES ---------------------------------->  */
@@ -128,7 +139,7 @@ input.form-button:visited {
     position: relative;
     border: 0;
     margin: 0;
-    background-color: #749a02;
+    background-color: var(--accent-color, #749a02);
     color: #fff;
     font-size: 14px;
     font-weight: normal;
@@ -142,7 +153,7 @@ input.form-button:visited {
     color: #fff;
 }
 #verbose-mode b {
-    color: #595B5B;
+    color: var(--text-color, #595B5B);
 }
 #verbose-mode .verbose-off{
     background: #706a66;
@@ -163,7 +174,7 @@ input#delete:visited {
     cursor: pointer;
     border: 0;
     margin: 0;
-    background-color: #398aac;
+    background-color: var(--secondary-color, #398aac);
     color: #fff;
     font-size: 14px;
     font-weight: normal;
@@ -176,12 +187,12 @@ input.submit:hover,
 input#submit:hover,
 input.form-button:hover {
     color: #fff;
-    background-color: #b2d15a;
+    background-color: var(--accent-color, #b2d15a);
 }
 input.delete:hover,
 input#delete:hover {
     color: #fff;
-    background-color: #93c3d4;
+    background-color: var(--secondary-color, #93c3d4);
 }
 .verbose-toggle,
 .verbose-toggle:active,
@@ -253,7 +264,7 @@ p.submit {
     border-color: #e0dfdf;
     font-size: .8em;
     border-width: 1px;
-    color: #595B5B;
+    color: var(--text-color, #595B5B);
     padding: .3em;
 }
 a.return:hover,
@@ -264,26 +275,26 @@ a.return:active {
 }
 .database_header {
     background-color: #f1f2ee;
-    color: #2485ae;
+    color: var(--primary-color, #2485ae);
     font-size: 1em;
 }
 .database_upperleftcorner {
-    color: #5F6464;
+    color: var(--text-color, #5f6464);
     font-size: 1em;
 }
 .database_upperleftcenter {
     background-color: #B0C4DE;
-    color: #5F6464;
+    color: var(--text-color, #5f6464);
     font-size: 1em;
 }
 .rownumheader,
 .rownum {
     background-color: #F1F2EE;
-    color: #5F6464;
+    color: var(--text-color, #5f6464);
     font-size: 1em;
 }
 .headercenter {
-    color:  #5F6464;
+    color:  var(--text-color, #5f6464);
     font-size: 10pt;
     font-style: normal;
     text-align: center;
@@ -302,14 +313,14 @@ a.return:active {
     font-size: 1em;
 }
 .verticalfieldlabel {
-    color: #5E6363; /*#5F6464;*/
+    color: var(--text-color, #5f6464); /*#5F6464;*/
     font-style: normal !important;
     font-size: 10pt !important;
     line-height: 2em !important;
 }
 .row, .rowvert {
     background-color: #f7f9f9;
-    color: #5F6464;
+    color: var(--text-color, #5f6464);
     font-size: 10pt;
     font-style: normal;
     text-align: left;
@@ -317,13 +328,13 @@ a.return:active {
 }
 .rowalternate {
     background-color: #fff;
-    color: #5F6464;
+    color: var(--text-color, #5f6464);
     font-size: 1em;
     line-height: 2em;
 }
 .rowbold {
     background-color: #FFFAFA;
-    color: #5F6464;
+    color: var(--text-color, #5f6464);
     font-size: 10pt; /*1em;*/
     line-height: 2em;
 }
@@ -382,7 +393,7 @@ a.ingestMenu:visited,
 a.account-menu:link,
 a.account-menu:visited {
     text-decoration: none;
-    color: #2485AE;
+    color: var(--primary-color, #2485ae);
 }
 a.ingestMenu:hover,
 a.ingestMenu:active,
@@ -401,10 +412,15 @@ ul.ingestMenu {
 .toBeDeleted {
     margin-bottom: 0;
 }
+
 /* BACK-END FORMS -------------->  */
 .display-inline {
     display: inline-block;
 }
+.display-flex {
+    display: flex;
+}
+
 .theme-dir,
 #noContentMsg {
     clear: both;
@@ -453,12 +469,23 @@ hr.formDivider {
 /* BRANDING ------>  */
 h1.vivo-logo {
     position: absolute;
-    width: 442px;
     height: 59px;
     top: 28px;
     left: 0;
     background: url(../images/VIVO-logo.png) 0 0 no-repeat;
+    background-size: contain;
+    background-image: var(--logo-small-url, var(--logo-url, url(../images/VIVO-logo.png)));
+    max-width: 200px;
+}
+
+@media (min-width: 768px) {
+    h1.vivo-logo {
+        background-image: var(--logo-url, var(--logo-small-url, url(../images/VIVO-logo.png)));
+        width: 442px;
+        max-width: none;
+    }
 }
+
 h1.vivo-logo a {
     display: block;
     width: 386px;
@@ -504,9 +531,11 @@ ul#header-nav a.log-out {
     padding-top: 5px;
 }
 #search-field {
-    width: 396px;
-    height: 38px;
+    width: 393px;
+    height: 37px;
     background: url(../images/search-interior-pages.png) 0 0 no-repeat;
+    background-color: var(--accent-color);
+    background-blend-mode: luminosity;
 }
 #search-field input.search {
     text-decoration: none;
@@ -585,11 +614,11 @@ body.loggedIn #intro {
 #intro h2 {
     padding: 35px 0 12px 24px;
     border-bottom: none;
-    color: #2485AE;
+    color: var(--primary-color, #2485AE);
 }
 #intro p {
     font-size: 16px;
-    color: #5f6464;
+    color: var(--text-color, #5f6464);
     line-height: 1.3em;
     padding: 0 24px 0 24px;
 }
@@ -603,7 +632,7 @@ p.forgot-password a,
 ul#individual-personInPosition li a,
 ul.individual-urls li a,
 ul.individual-urls-people li a {
-    color: #2485ae
+    color: var(--primary-color, #2485ae);
 }
 /* LOG IN------>  */
 #login {
@@ -621,7 +650,7 @@ body.login #login {
 }
 #login h2 {
     font-size: 22px;
-    color: #2485ae;
+    color: var(--primary-color, #2485ae);
     padding-left: 15px;
     padding-top: 18px;
     border-bottom: none;
@@ -749,7 +778,7 @@ p.external-auth {
 }
 p.external-auth a.blue,
 p.external-auth a.blue:visited {
-     background-color: #398AAC;
+     background-color: var(--secondary-color, #398AAC);
      width: 180px;
      margin-bottom: 17px;
      line-height: 1.3em;
@@ -769,7 +798,7 @@ p.external-auth a.blue:hover {
     padding: 0;
     font-size: 22px;
     margin-bottom: 15px;
-    color: #2485AE;
+    color: var(--primary-color, #2485AE);
 		padding-left: 24px;
 }
 #search-home-field {
@@ -887,8 +916,8 @@ a.view-all-style {
 .home-sections h4 {
 		border-top: 1px solid rgba(220,228,227,.42); /* stroke */
 		border-bottom: 1px solid rgba(220,228,227,.42); /* stroke */
-		background-color: #395d7f; /* layer fill content */
-		border-bottom: 2px solid #62b6d7;
+		background-color: var(--primary-color-darker, #395d7f); /* layer fill content */
+		border-bottom: 2px solid var(--primary-color, #62b6d7);
 		color: #fff;
 }
 #home-stats {
@@ -1070,17 +1099,18 @@ ul#individual-facultyMemberships li:last-child {
     border-right: none;
 }
 #footer-nav a {
-    color: #4e5051
+    color: var(--link-color, #4e5051)
 }
 #footer-nav a:hover,
 a.terms,
 a.powered-by-vivo {
-    color: #09C;
+    color: var(--link-color, #09C);
     text-decoration: none;
 }
 a.terms:hover,
 a.powered-by-vivo:hover {
-    color: #4e5051;
+    /* TODO Darker */
+    color: var(--link-color, #09C);
     text-decoration: none;
 }
 p {
@@ -1159,7 +1189,7 @@ ul#individual-tools-people li a {
  }
 .individualList li a {
     font-weight: normal;
-    color: #2485AE;
+    color: var(--link-color, #2485ae);
 }
 
 /* ------------------------------------------------->  */
@@ -1174,7 +1204,7 @@ ul#individual-tools-people li a {
 }
 #menupage-intro h2 {
     font-size: 1.375em;
-    color: #064d68;
+    color: var(--primary-color-darker, #064d68);
     font-weight: normal;
 }
 #menupage-intro.people h2 {
@@ -1198,7 +1228,7 @@ ul#individual-tools-people li a {
 }
 #find-by h3 {
     font-size: 1.125em;
-    color: #2485ae;
+    color: var(--primary-color, #2485ae);
     font-weight: normal;
 }
 ul#find-filters a:hover,
@@ -1214,7 +1244,7 @@ ul#find-filters a.selected {
 }
 #researchers h3 {
     font-size: 1.25em;
-    color: #2485ae;
+    color: var(--primary-color, #2485ae);
     font-weight: normal;
     background: url(../images/arrow.gif) 140px 27px no-repeat;
 }
@@ -1230,7 +1260,7 @@ ul#find-filters a.selected {
     font-size: 4.375em;
     text-align: center;
     float: left;
-    color: #2485ae;
+    color: var(--primary-color, #2485ae);
     border-right: 1px dotted #dde4e3;
     font-weight: bold;
 }
@@ -1242,7 +1272,7 @@ ul#find-filters a.selected {
 }
 #nav-display p {
     font-size: 26px;
-    color: #2485ae;
+    color: var(--primary-color, #2485ae);
 }
 #nav-display img {
     border-left: 1px solid #e8e8e8;
@@ -1360,7 +1390,7 @@ article.property ul.property-list {
     background-color: #f2f9fb;
 }
 #admin h3 {
-    background: #2485AE;
+    background: var(--primary-color, #2485ae);
     color: #fff;
 }
 #admin .uri-link,
@@ -1368,15 +1398,16 @@ article.property ul.property-list {
     color: #888c8c;
 }
 #admin a {
-    color: #2a98bc;
+    color: var(--link-color, #2a98bc);
 }
+
 /* INDIVIDUAL INTRO FOR ANY CLASS ------>  */
 .preferred {
     padding-top: .2em;
 }
 #individual-intro h1 {
     font-size: 1.375em;
-    color: #2485ae;
+    color: var(--primary-color, #2485ae);
 }
 #individual-intro span.display-title,
 h1.fn .display-title {
@@ -1406,7 +1437,7 @@ ul#individual-tools {
 .editingForm .entryFormHead h2,
 .header,
 .navlinkblock {
-    color: #5f6464;
+    color: var(--text-color, #5f6464);
 }
 ul.individual-urls {
     list-style: url(../../../images/individual/arrow-green.gif);
@@ -1430,7 +1461,7 @@ h3.internal-auth {
 }
 #individual-info h1.fn {
     font-size: 1.375em;
-    color: #595B5B;
+    color: var(--text-color, #595B5B);
     line-height: 1.3em;
 }
 #individual-info h2 {
@@ -1473,7 +1504,7 @@ a.all-vivo-publications {
 /* <------ TEMPORAL GRAPH and MAP O' SCIENCE  */
 #temporal-graph h3 a,
 #map-of-science h3 a {
-    color: #2485AE;
+    color: var(--primary-color, #2485ae);
     font-size: .8em !important;
     text-decoration: underline;
     vertical-align:text-top;
@@ -1485,7 +1516,7 @@ img.co-author {
 #co-authors h3,
 #right-hand-column h3 {
     font-size: 1.25em;
-    color: #2485ae;
+    color: var(--primary-color, #2485ae);
 }
 /* PROPERTY GROUP MENU ------>  */
 #property-group-menu {
@@ -1505,7 +1536,7 @@ img.co-author {
 section.property-group h2,
 #menupage-content h4 {
     font-size: 1.25em;
-    color: #2485ae;
+    color: var(--primary-color, #2485ae);
     font-weight: normal;
 }
 article.property {
@@ -1514,11 +1545,11 @@ article.property {
 article.property h3 {
     background: #fafaf9;
     font-size: 1.063em;
-    color: #8aa149;
+    color: var(--accent-color, #8aa149);
 }
 article.property ul.property-list li.subclass h3 {
     font-size: 1.063em;
-    color: #5E6363;
+    color: var(--primary-color, #5E6363);
 }
 article.property .data-property-statement {
     background: #fff;
@@ -1526,7 +1557,7 @@ article.property .data-property-statement {
     color: #5e6363;
 }
 article.property ul.property-list li a {
-    /*color: #2485ae;*/   /* cappadona: seems unnecessarily specific and is overriding .more-less from individual.css so I'm commenting out for now */
+    /*color: var(--primary-color, #2485ae);*/   /* cappadona: seems unnecessarily specific and is overriding .more-less from individual.css so I'm commenting out for now */
     line-height: 1.6em;
 }
 /* MISCELLANEOUS ------>  */
@@ -1567,7 +1598,7 @@ p.address-line {
   border-bottom: 1px dotted #AFB2B2;
   font-weight: bold;
   padding: .625em;
-  color: #064D68;
+  color: var(--primary-color-darker, #064d68);
   margin-bottom: .625em;
 }
 #adminDashboard .pageBodyGroup ul {
@@ -1598,7 +1629,7 @@ p.address-line {
 }
 #revision-levels caption {
     font-size: 18px;
-    color: #2485ae;
+    color: var(--primary-color, #2485ae);
 }
 #revision-levels th {
     font-weight: bold;
@@ -1651,7 +1682,7 @@ form.customForm p {
 section.accounts input.delete,
 section.accounts input.delete:visited {
     background-color: #FFF;
-    color: #2485AE;
+    color: var(--primary-color, #2485ae);
     border: 1px solid #96c5da;
 }
 section.accounts input.delete:hover {
diff --git a/webapp/src/main/webapp/themes/wilma/templates/head.ftl b/webapp/src/main/webapp/themes/wilma/templates/head.ftl
index 06af8d7a2f..7dd870054d 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/head.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/head.ftl
@@ -35,4 +35,19 @@
 an individual profile page. -->
 ${headContent!}
 
+<style>
+    :root {
+        <#if themePrimaryColorLighter?? && themePrimaryColorLighter != "null">--primary-color-lighter: ${themePrimaryColorLighter};</#if>
+        <#if themePrimaryColor?? && themePrimaryColor != "null">--primary-color: ${themePrimaryColor};</#if>
+        <#if themePrimaryColorDarker?? && themePrimaryColorDarker != "null">--primary-color-darker: ${themePrimaryColorDarker};</#if>
+        <#if themeBannerColor?? && themeBannerColor != "null">--banner-color: ${themeBannerColor};</#if>
+        <#if themeSecondaryColor?? && themeSecondaryColor != "null">--secondary-color: ${themeSecondaryColor};</#if>
+        <#if themeAccentColor?? && themeAccentColor != "null">--accent-color: ${themeAccentColor};</#if>
+        <#if themeLinkColor?? && themeLinkColor != "null">--link-color: ${themeLinkColor};</#if>   
+        <#if themeTextColor?? && themeTextColor != "null">--text-color: ${themeTextColor};</#if>
+        <#if logoUrl?? && logoUrl != "null">--logo-url: url('${logoUrl}');</#if>
+        <#if logoSmallUrl?? && logoSmallUrl != "null">--logo-small-url: url('${logoSmallUrl}');</#if>
+    }
+</style>
+
 <link rel="shortcut icon" type="image/x-icon" href="${urls.base}/favicon.ico">
diff --git a/webapp/src/main/webapp/themes/wilma/templates/page-home.ftl b/webapp/src/main/webapp/themes/wilma/templates/page-home.ftl
index 78ce860db9..b67a249df3 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/page-home.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/page-home.ftl
@@ -27,6 +27,8 @@
     <body class="${bodyClasses!}" onload="${bodyOnload!}">
     <#-- supplies the faculty count to the js function that generates a random row number for the search query -->
         <@lh.facultyMemberCount  vClassGroups! />
+        <div class="banner"></div>
+        
         <#include "identity.ftl">
 
         <#include "menu.ftl">
diff --git a/webapp/src/main/webapp/themes/wilma/templates/page.ftl b/webapp/src/main/webapp/themes/wilma/templates/page.ftl
index 9b4785605f..7536a2e74e 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/page.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/page.ftl
@@ -9,6 +9,7 @@
     </head>
 
     <body class="${bodyClasses!}" onload="${bodyOnload!}">
+        <div class="banner"></div>
         <#include "identity.ftl">
         <#include "search.ftl">
         <#include "menu.ftl">