diff --git a/src/routes/_components/compose/ComposeLengthIndicator.html b/src/routes/_components/compose/ComposeLengthIndicator.html
index 4670e4b5..2fc00026 100644
--- a/src/routes/_components/compose/ComposeLengthIndicator.html
+++ b/src/routes/_components/compose/ComposeLengthIndicator.html
@@ -6,7 +6,7 @@
   .compose-box-length {
     grid-area: length;
     justify-self: right;
-    color: var(--main-theme-color);
+    color: var(--length-indicator-color);
     font-size: 1.3em;
     align-self: center;
   }
@@ -53,4 +53,4 @@
       observe
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index 398fa7fa..0af1260c 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -116,4 +116,6 @@
   --floating-button-bg: #{rgba($main-bg-color, 0.8)};
   --floating-button-bg-hover: #{darken(rgba($main-bg-color, 0.9), 5%)};
   --floating-button-bg-active: #{darken(rgba($main-bg-color, 0.9), 10%)};
+
+  --length-indicator-color: #{$main-theme-color};
 }
diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss
index cfee0c2c..61fc31cf 100644
--- a/src/scss/themes/_dark.scss
+++ b/src/scss/themes/_dark.scss
@@ -46,4 +46,6 @@
   --tab-bg-hover-non-selected: #{darken($main-bg-color, 1%)};
 
   --toast-anchor-color: #{$anchor-color};
+
+  --length-indicator-color: var(--action-button-fill-color);
 }
diff --git a/src/scss/themes/cobalt.scss b/src/scss/themes/cobalt.scss
index a6c82466..31348732 100644
--- a/src/scss/themes/cobalt.scss
+++ b/src/scss/themes/cobalt.scss
@@ -17,7 +17,11 @@ $compose-background: lighten($main-theme-color, 32%);
 :root {
   --settings-list-item-text: #{$main-text-color};
   --settings-list-item-text-hover: #{$main-text-color};
-  
+
+  --action-button-fill-color: #{lighten($main-theme-color, 30%)};
+  --action-button-fill-color-hover: #{lighten($main-theme-color, 35%)};
+  --action-button-fill-color-active: #{lighten($main-theme-color, 40%)};
+
   --action-button-fill-color-pressed: #{$anchor-color};
   --action-button-fill-color-pressed-hover: #{darken($anchor-color, 2%)};
   --action-button-fill-color-pressed-active: #{darken($anchor-color, 15%)};
@@ -30,4 +34,4 @@ $compose-background: lighten($main-theme-color, 32%);
   --nav-text-color-hover: #{$main-text-color};
   --nav-a-selected-border: #{$anchor-color};
   --nav-a-selected-border-hover: #{$anchor-color};
-} 
+}
diff --git a/src/scss/themes/pitchblack.scss b/src/scss/themes/pitchblack.scss
index cfc01238..581bcd1e 100644
--- a/src/scss/themes/pitchblack.scss
+++ b/src/scss/themes/pitchblack.scss
@@ -29,9 +29,9 @@ $compose-background: darken($main-theme-color, 12%);
   --form-border: #{darken($border-color, 10%)};
 
 
-  --action-button-fill-color: #{$main-theme-color};
-  --action-button-fill-color-hover: #{lighten($main-theme-color, 4%)};
-  --action-button-fill-color-active: #{darken($main-theme-color, 13%)};
+  --action-button-fill-color: #{lighten($main-theme-color, 5%)};
+  --action-button-fill-color-hover: #{lighten($main-theme-color, 12%)};
+  --action-button-fill-color-active: #{darken($main-theme-color, 15%)};
   --action-button-fill-color-pressed: #{lighten($main-theme-color, 20%)};
   --action-button-fill-color-pressed-hover: #{lighten($main-theme-color, 24%)};
   --action-button-fill-color-pressed-active: #{lighten($main-theme-color, 7%)};