Experimental: Try adding a darker color in the timeline for unread

app/assets/javascripts/discourse/widgets/topic-timeline.js.es6

@@ -206,6 +206,7 @@ createWidget('timeline-scrollarea', {
         lastRead: position.lastRead,
         showButton
       }));
+      result.push(this.attach('timeline-unread-area', { top: lastReadTop}));
     }
 
     return result;
@@ -241,6 +242,21 @@ createWidget('timeline-scrollarea', {
   }
 });
 
+createWidget('timeline-unread-area', {
+  tagName: 'div.timeline-unread',
+
+  buildAttributes(attrs) {
+
+    const top = attrs.top + (LAST_READ_HEIGHT / 2);
+    if (top) {
+      return {
+        style: `top: ${top}px; height: ${SCROLLAREA_HEIGHT - top}px`
+      };
+    }
+  }
+
+});
+
 createWidget('topic-timeline-container', {
   tagName: 'div.timeline-container',
   buildClasses(attrs) {

app/assets/stylesheets/common/topic-timeline.scss

@@ -17,6 +17,15 @@
   position: fixed;
   -webkit-transform: translate3d(0,0,0);
 
+  .timeline-unread {
+    left: -1px;
+    position: absolute;
+    border-left: 3px solid;
+    border-color: $tertiary;
+    width: 10px;
+    z-index: 500;
+  }
+
   &.timeline-docked {
     position: absolute;
   }
@@ -52,6 +61,9 @@
     box-shadow: 0px -2px 4px -1px rgba(0,0,0,.25);
     padding-top: 20px;
     z-index: 100000;
+    .timeline-unread {
+      display: none;
+    }
     .back-button {
       display: none;
     }
@@ -244,6 +256,7 @@
       background-color: dark-light-choose(scale-color($tertiary, $lightness: 80%), scale-color($tertiary, $lightness: 20%));
       height: 100%;
       float: left;
+      z-index: 501;
     }
 
     .timeline-scroller-content {
@@ -279,6 +292,7 @@
         color: $tertiary;
         margin-right: 1em;
       }
+      z-index: 502;
     }
 
     .back-button {