Update use theme to create a font color

css/app.css

@@ -275,14 +275,14 @@
         width: 100%;
         border: 2px solid rgba(240, 240, 240, 0.9);
         margin: 25px;
-        -webkit-border-radius: 5px;
+        -webkit-border-radius: 10px;
-        border-radius: 5px;
+        border-radius: 10px;
         background-clip: padding-box;
         /* stops bg color from leaking outside the border: */ }
         #app-content #app-content-wrapper .grid-view .credential .credential_content {
           display: flex;
+          padding: 2px;
           flex-direction: column;
-          background-color: #fff;
           width: 100%;
           cursor: pointer;
           font-size: 1.75em;
@@ -291,11 +291,11 @@
             padding-top: 0.5em;
             padding-left: 1em;
             padding-right: 1em;
-            line-height: 1.3em;
+            line-height: 1.3em; }
-            color: #ddd; }
           #app-content #app-content-wrapper .grid-view .credential .credential_content .tags {
             margin-bottom: 0.5em; }
             #app-content #app-content-wrapper .grid-view .credential .credential_content .tags .tag {
+              color: #000 !important;
               margin-top: 5px;
               display: inline-block; }
       @media all and (min-width: 40em) {

js/app/directives/use-theme.js

@@ -8,18 +8,35 @@
  */
 angular.module('passmanApp')
 	.directive('useTheme', ['$window', function ($window) {
+
+		function invertColor(hexTripletColor) {
+			var color = hexTripletColor;
+			color = color.substring(1);           // remove #
+			color = parseInt(color, 16);          // convert to integer
+			color = 0xFFFFFF ^ color;             // invert three bytes
+			color = color.toString(16);           // convert to hex
+			color = ("000000" + color).slice(-6); // pad with leading zeros
+			color = "#" + color;                  // prepend #
+			return color;
+		}
 		return {
 			restrict: 'A',
 			scope:{
-				type: '=type'
+				type: '=type',
+				color: '='
 			},
 			link: function (scope, el, attr, ctrl) {
 				var _color = $('#header').css('background-color');
+
 				if(!scope.type) {
 					$(el).css('background-color', _color);
 				} else {
 					$(el).css(scope.type, _color);
 				}
+				if(scope.color){
+
+					$(el).css('color', invertColor(_color));
+				}
 			}
 		};
 	}]);

sass/credentials.scss

@@ -158,11 +158,11 @@
         width: 100%;
         border: 2px solid rgba(240,240,240,.9);
         margin: 25px;
-        @include border-radius(5px);
+        @include border-radius(10px);
         .credential_content{
           display: flex;
+          padding: 2px;
           flex-direction: column;
-          background-color: #fff;
           width: 100%;
           cursor: pointer;
           font-size: 1.75em;
@@ -172,12 +172,11 @@
             padding-left: 1em;
             padding-right: 1em;
             line-height: 1.3em;
-            color: #ddd;
           }
           .tags{
             margin-bottom: 0.5em;
             .tag{
-
+              color: #000 !important;
               margin-top: 5px;
               display: inline-block;
             }

templates/views/edit_credential.html

@@ -19,7 +19,8 @@
 <ul class="tab_header">
 	<li ng-repeat="tab in tabs track by $index" class="tab"
 		ng-class="{active:isActiveTab(tab)}"
-		ng-click="onClickTab(tab)">{{tab.title}}
+		ng-click="onClickTab(tab)"
+		use-theme color="'true'">{{tab.title}}
 	</li>
 </ul>
 

templates/views/show_vault.html

@@ -79,8 +79,8 @@
 				<li class="credential" ng-repeat="credential in credentials | credentialSearch:filterOptions | tagFilter:selectedtags | orderBy:'label'| as:this:'filtered_credentials'"
 					ng-if="credential.hidden == 0 && showCredentialRow(credential)"
 					ng-click="selectCredential(credential)"
-				color-from-string="credential.label">
+					use-theme color="'true'">
-					<div class="credential_content" use-theme>
+					<div class="credential_content" >
 						<div class="label">{{credential.label}}</div>
 						<div class="tags">
 							<div class="tag" ng-repeat="tag in credential.tags_raw">{{tag.text}}</div>