diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index cd50feaca9..7de512ad7a 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -413,7 +413,7 @@ input.settings_text_input {
    space around its viewbox in SVG. */
 .clear_search_button {
     &:hover {
-        color: hsl(0deg 0% 0%);
+        color: var(--color-text-clear-search-button-hover);
     }
 
     &:disabled {
@@ -431,7 +431,7 @@ input.settings_text_input {
         text-align: center;
         padding-top: 8px;
         padding-left: 4px;
-        color: hsl(0deg 0% 80%);
+        color: var(--color-text-clear-search-button);
         text-shadow: none;
         outline: none !important;
         box-shadow: none;
@@ -552,8 +552,8 @@ input.settings_text_input {
 .invite-stream-notice {
     position: relative;
     display: block;
-    background-color: hsl(46deg 63% 95%);
-    border: 1px solid hsl(49deg 20% 84%);
+    background-color: var(--color-background-tip);
+    border: 1px solid var(--color-border-tip);
     border-radius: 4px;
     padding: 10px;
     font-size: 1rem;
@@ -702,7 +702,8 @@ input.settings_text_input {
 
     &:focus {
         background-color: hsl(240deg 41% 50%);
-        box-shadow: 0 1px 4px 0 hsl(235deg 18% 7%);
+        box-shadow: 0 1px 4px 0
+            var(--color-box-shadow-animated-purple-button-focus);
         outline: none;
     }
 
@@ -715,17 +716,17 @@ input.settings_text_input {
 .color_animated_button {
     display: flex;
     justify-content: center;
-    background-color: hsl(0deg 0% 90%);
+    background-color: var(--color-background-animated-button);
     color: hsl(0deg 0% 0%);
     border-radius: 4px;
 
     .color-animated-button-text {
-        color: hsl(0deg 0% 0%);
+        color: var(--color-animated-button-text);
     }
 
     &:hover {
         cursor: pointer;
-        background-color: hsl(240deg 96% 68%);
+        background-color: var(--color-background-animated-button-hover);
         color: hsl(0deg 0% 100%);
 
         .color-animated-button-text {
@@ -1144,9 +1145,9 @@ input.settings_text_input {
 }
 
 .dropdown-widget-button {
-    background-color: hsl(0deg 0% 100%);
+    background-color: var(--color-background-dropdown-widget-button);
     padding: 4px 6px;
-    border: 1px solid hsl(0deg 0% 80%);
+    border: 1px solid var(--color-border-dropdown-widget-button);
     border-radius: 4px;
     display: flex;
     align-items: center;
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index c2710614b1..e89dbcfa1e 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -624,6 +624,12 @@
     --color-text-sidebar-base: hsl(0deg 0% 0%);
     --color-border-sidebar-subheader: hsl(0deg 0% 0% / 15%);
     --color-request-progress-status-alert-text: hsl(0deg 0% 20%);
+    --color-background-tip: hsl(46deg 63% 95%);
+    --color-border-tip: hsl(49deg 20% 84%);
+    --color-box-shadow-animated-purple-button-focus: hsl(235deg 18% 7%);
+    --color-background-animated-button: hsl(0deg 0% 90%);
+    --color-animated-button-text: hsl(0deg 0% 0%);
+    --color-background-animated-button-hover: hsl(240deg 96% 68%);
 
     /* Recent view */
     --color-border-recent-view-row: hsl(0deg 0% 87%);
@@ -722,6 +728,8 @@
     --color-text-url: hsl(200deg 100% 40%);
     --color-text-url-hover: hsl(200deg 100% 25%);
     --color-text-settings-field-hint: hsl(0deg 0% 57%);
+    --color-text-clear-search-button: hsl(0deg 0% 80%);
+    --color-text-clear-search-button-hover: hsl(0deg 0% 0%);
 
     /* Demo Organization colors */
     --color-text-settings-demo-organization-warning: hsl(4deg 58% 33%);
@@ -731,6 +739,10 @@
         200deg 100% 25%
     );
 
+    /* Widgets colors */
+    --color-border-dropdown-widget-button: hsl(0deg 0% 80%);
+    --color-background-dropdown-widget-button: hsl(0deg 0% 100%);
+
     /* Markdown colors */
     --color-background-rendered-markdown-thead: hsl(0deg 0% 93%);
     --color-border-rendered-markdown-table: hsl(0deg 0% 80%);
@@ -1109,6 +1121,12 @@
     --color-text-sidebar-base: hsl(0deg 0% 100%);
     --color-border-sidebar-subheader: hsl(0deg 0% 100% / 15%);
     --color-request-progress-status-alert-text: hsl(236deg 33% 90%);
+    --color-background-tip: hsl(46deg 28% 38% / 27%);
+    --color-border-tip: hsl(49deg 38% 46%);
+    --color-box-shadow-animated-purple-button-focus: hsl(0deg 0% 100% / 66.6%);
+    --color-background-animated-button: hsl(211deg 29% 14%);
+    --color-animated-button-text: hsl(0deg 0% 100%);
+    --color-background-animated-button-hover: hsl(240deg 96% 68%);
 
     /* Recent view */
     --color-border-recent-view-row: hsl(0deg 0% 0% / 20%);
@@ -1211,6 +1229,8 @@
     --color-text-sidebar-action-heading-hover: hsl(240deg 100% 90%);
     --color-text-url-hover: hsl(200deg 79% 66%);
     --color-text-settings-field-hint: hsl(0deg 0% 52%);
+    --color-text-clear-search-button: hsl(236deg 33% 80%);
+    --color-text-clear-search-button-hover: hsl(0deg 0% 100%);
 
     /* Demo Organization colors */
     --color-text-settings-demo-organization-warning: hsl(3deg 73% 80%);
@@ -1221,6 +1241,10 @@
         200deg 79% 66%
     );
 
+    /* Widgets colors */
+    --color-border-dropdown-widget-button: hsl(0deg 0% 0% / 60%);
+    --color-background-dropdown-widget-button: hsl(0deg 0% 0% / 20%);
+
     /* Markdown colors */
     --color-background-rendered-markdown-thead: hsl(0deg 0% 0% / 50%);
     --color-border-rendered-markdown-table: hsl(0deg 0% 33%);
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 40f96d1666..d457c5d9a7 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -384,11 +384,6 @@
         box-shadow: 0 0 5px hsl(0deg 0% 100% / 40%);
     }
 
-    .dropdown-widget-button {
-        border-color: hsl(0deg 0% 0% / 60%);
-        background-color: hsl(0deg 0% 0% / 20%);
-    }
-
     & select option {
         background-color: var(--color-background);
         color: hsl(236deg 33% 90%);
@@ -511,18 +506,10 @@
     }
 
     .narrow_to_compose_recipients,
-    .clear_search_button,
-    .clear_search_button:focus,
-    .clear_search_button:active,
-    .clear_search_button:disabled:hover,
     .close {
         color: hsl(236deg 33% 80%);
     }
 
-    .clear_search_button:hover {
-        color: hsl(0deg 0% 100%);
-    }
-
     .zoom-in {
         #topics_header {
             background-color: var(--color-background);
@@ -668,8 +655,6 @@
     .tip,
     .invite-stream-notice {
         color: inherit;
-        background-color: hsl(46deg 28% 38% / 27%);
-        border: 1px solid hsl(49deg 38% 46%);
     }
 
     #request-progress-status-banner {
@@ -863,21 +848,10 @@
         outline-color: hsl(0deg 0% 67%);
     }
 
-    .animated-purple-button:focus {
-        box-shadow: 0 1px 4px 0 hsl(0deg 0% 100% / 66.6%);
-    }
-
     .color_animated_button {
-        background-color: hsl(211deg 29% 14%);
-
-        .zulip-icon,
-        .color-animated-button-text {
+        .zulip-icon {
             color: hsl(0deg 0% 100%);
         }
-
-        &:hover {
-            background-color: hsl(240deg 96% 68%);
-        }
     }
 
     /* Widgets: Poll */