diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index cd56edf3bb..96eb6f5ba7 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -729,12 +729,7 @@
     .clear_search_button:disabled:hover,
     #user-groups .save-instructions,
     .close,
-    #user_presences li:hover .user-list-sidebar-menu-icon,
-    li.top_left_all_messages:hover .all-messages-sidebar-menu-icon,
-    li.top_left_starred_messages:hover .starred-messages-sidebar-menu-icon,
-    li.top_left_drafts:hover .drafts-sidebar-menu-icon,
-    #stream_filters li:hover .stream-sidebar-menu-icon,
-    li.topic-list-item:hover .topic-sidebar-menu-icon {
+    #user_presences li:hover .user-list-sidebar-menu-icon {
         color: hsl(236deg 33% 80%);
     }
 
@@ -755,12 +750,7 @@
         color: hsl(236deg 33% 90%);
     }
 
-    #user_presences li .user-list-sidebar-menu-icon:hover,
-    .all-messages-sidebar-menu-icon:hover,
-    .starred-messages-sidebar-menu-icon:hover,
-    .drafts-sidebar-menu-icon:hover,
-    .stream-sidebar-menu-icon:hover,
-    .topic-sidebar-menu-icon:hover {
+    #user_presences li .user-list-sidebar-menu-icon:hover {
         color: hsl(0deg 0% 100%) !important;
     }
 
diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index 3dfcdf1f72..593de2a550 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -626,14 +626,15 @@ li.top_left_scheduled_messages {
     All of our left sidebar handlers use absolute
     positioning.  We should fix that.
 */
-.all-messages-sidebar-menu-icon,
-.stream-sidebar-menu-icon,
-.starred-messages-sidebar-menu-icon,
-.drafts-sidebar-menu-icon,
-.topic-sidebar-menu-icon {
+.top_left_row .sidebar-menu-icon,
+.bottom_left_row .sidebar-menu-icon {
     position: absolute;
     display: none;
-    right: 10px;
+    top: 1px;
+    right: 0;
+    font-size: 1em;
+    text-align: center;
+    padding: 0 6px;
 
     & i {
         padding-right: 0.35em;
@@ -649,7 +650,7 @@ li.top_left_scheduled_messages {
     */
 
     &:hover {
-        color: hsl(0deg 0% 0%) !important;
+        color: var(--color-vdots-hover);
     }
 
     /*
@@ -661,22 +662,34 @@ li.top_left_scheduled_messages {
 
     @media (hover: none) {
         display: block;
+        /* Show dots on touchscreens in a less distracting,
+           lighter shade. */
+        color: var(--color-vdots-hint);
     }
 }
 
 /*
-    The All messages and stream ellipsis-v (vertical 3 dots) are
-    pretty similar.
+    When you hover over list items, we hover
+    the vdots in light gray.
+
+    The stream icon should always display when
+    any topic is hovered, which is why it gets
+    a more specific selector here.
 */
-.all-messages-sidebar-menu-icon,
-.starred-messages-sidebar-menu-icon,
-.drafts-sidebar-menu-icon,
-.stream-sidebar-menu-icon {
-    top: 1px;
-    right: 0;
-    font-size: 1em;
-    text-align: center;
-    padding: 0 6px;
+#stream_filters li:hover .stream-sidebar-menu-icon,
+.top_left_row:hover .sidebar-menu-icon,
+.bottom_left_row:hover .sidebar-menu-icon {
+    display: inline;
+    cursor: pointer;
+    color: var(--color-vdots-visible);
+
+    /*
+        If you hover directly over the vdots icon,
+        show it in black.
+    */
+    &:hover {
+        color: var(--color-vdots-hover);
+    }
 }
 
 /*
@@ -684,7 +697,7 @@ li.top_left_scheduled_messages {
     font to show they're "lower" in the hierarchy,
     which also affects it positioning.
 */
-.topic-sidebar-menu-icon {
+.bottom_left_row .topic-sidebar-menu-icon {
     top: 2px;
     right: 0;
     font-size: 0.9em;
@@ -692,20 +705,6 @@ li.top_left_scheduled_messages {
     padding: 1px 6px 0;
 }
 
-/*
-    When you hover over list items, we hover
-    the relevant ellipsis-v(vertical 3 dots) in light gray.
-*/
-li.top_left_all_messages:hover .all-messages-sidebar-menu-icon,
-li.top_left_starred_messages:hover .starred-messages-sidebar-menu-icon,
-li.top_left_drafts:hover .drafts-sidebar-menu-icon,
-#stream_filters li:hover .stream-sidebar-menu-icon,
-li.topic-list-item:hover .topic-sidebar-menu-icon {
-    display: inline;
-    cursor: pointer;
-    color: hsl(0deg 0% 53%);
-}
-
 ul.topic-list {
     list-style-type: none;
     font-weight: normal;
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index ec274fa764..ae6347c0e0 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -184,6 +184,9 @@ body {
     /* The gray on the filter icons is the same as
        what's set on ul.filters, but with 70% opacity. */
     --color-global-filter-icon: hsl(0deg 0% 20% / 70%);
+    --color-vdots-hint: hsl(0deg 0% 0% / 30%);
+    --color-vdots-visible: hsl(0deg 0% 0% / 53%);
+    --color-vdots-hover: hsl(0deg 0% 0%);
 
     /* Message feed loading indicator colors */
     --color-zulip-logo: hsl(0deg 0% 0% / 34%);
@@ -264,6 +267,9 @@ body {
     --color-message-action-visible: hsl(217deg 41% 90% / 50%);
     --color-message-action-interactive: hsl(217deg 41% 90% / 100%);
     --color-global-filter-icon: hsl(0deg 0% 100% / 56%);
+    --color-vdots-hint: hsl(0deg 0% 100% / 30%);
+    --color-vdots-visible: hsl(236deg 33% 80%);
+    --color-vdots-hover: hsl(0deg 0% 100%);
 
     /* Message feed loading indicator colors */
     --color-zulip-logo: hsl(0deg 0% 100% / 50%);