use breadcrumb for contact header

app/dashboard/templates/dashboard/contact_detail.html

@@ -10,10 +10,18 @@
 
   <div class="row">
     <div class="col">
-      <h1 class="h3">{{ alias.email }} / {{ contact.email }}
-        {% if contact.pgp_finger_print %}
-          <span class="cursor" data-toggle="tooltip" data-original-title="PGP Enabled">🗝</span>
-        {% endif %}
+      <h1 class="h3">
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a
+                href="{{ url_for('dashboard.alias_contact_manager', alias_id=alias.id) }}">{{ alias.email }}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{ contact.email }}
+              {% if contact.pgp_finger_print %}
+                <span class="cursor" data-toggle="tooltip" data-original-title="PGP Enabled">🗝</span>
+              {% endif %}
+            </li>
+          </ol>
+        </nav>
       </h1>
 
       <div class="card">

static/darkmode.css

@@ -10,6 +10,7 @@
     --heading-background: #FFF;
     --border: 1px solid rgba(0, 40, 100, 0.12);
     --input-bg-color: var(--white);
+    --light-bg-color: #e9ecef;
 }
 
 [data-theme="dark"] {
@@ -21,6 +22,7 @@
     --heading-background: #1a1a1a;
     --input-bg-color: #4c4c4c;
     --border: 1px solid rgba(228, 236, 238, 0.35);
+    --light-bg-color: #5c5c5c;
 }
 
 /** Override the bootstrap color configurations */
@@ -46,6 +48,11 @@ hr {
     background-color: var(--input-bg-color);
 }
 
+.breadcrumb {
+    color: var(--font-color);
+    background-color: var(--light-bg-color);
+}
+
 .form-control:focus, .dataTables_wrapper .dataTables_length select:focus, .dataTables_wrapper .dataTables_filter input:focus, .modal-content {
     border-color: #1991eb;
     outline: 0;