diff --git a/doc/THEMING.md b/doc/THEMING.md
index 599434bd..c00ab155 100644
--- a/doc/THEMING.md
+++ b/doc/THEMING.md
@@ -80,6 +80,7 @@ Currently supported operations are:
 | -------- | -------- | -------- |
 | darker     | percentage | color |
 | lighter     | percentage | color |
+| alpha     | alpha percentage | color |
 
 ## Aliases
 It is possible give aliases to variables in the `theme.css` file:
diff --git a/src/platform/web/theming/shared/color.mjs b/src/platform/web/theming/shared/color.mjs
index 8af76b6b..31d40185 100644
--- a/src/platform/web/theming/shared/color.mjs
+++ b/src/platform/web/theming/shared/color.mjs
@@ -36,5 +36,8 @@ export function derive(value, operation, argument, isDark) {
             const newColorString = offColor(value).lighten(argumentAsNumber / 100).hex();
             return newColorString;
         }
+        case "alpha": {
+            return offColor(value).rgba(argumentAsNumber / 100);
+        }
     }
 }
diff --git a/src/platform/web/ui/css/themes/element/timeline.css b/src/platform/web/ui/css/themes/element/timeline.css
index 8645bc3f..7ff35eb1 100644
--- a/src/platform/web/ui/css/themes/element/timeline.css
+++ b/src/platform/web/ui/css/themes/element/timeline.css
@@ -364,7 +364,7 @@ only loads when the top comes into view*/
 }
 
 .Timeline_messageReactions button.active {
-    background-color: var(--background-color-secondary);
+    background-color: var(--accent-color--alpha-11);
     border-color: var(--accent-color);
 }
 
@@ -440,4 +440,4 @@ only loads when the top comes into view*/
     background-color: var(--background-color-primary);
     border-radius: 8px;
     text-align: center;
-  }
\ No newline at end of file
+  }