diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss
index f76388296b..1c34a46e07 100644
--- a/res/css/structures/_RightPanel.pcss
+++ b/res/css/structures/_RightPanel.pcss
@@ -82,10 +82,6 @@ limitations under the License.
     mask-position: center;
 }
 
-$dot-size: 8px;
-$dot-offset: -3px;
-$pulse-color: $alert;
-
 .mx_RightPanel_pinnedMessagesButton {
     &::before {
         mask-image: url("$(res)/img/element-icons/room/pin.svg");
@@ -95,11 +91,11 @@ $pulse-color: $alert;
 
 .mx_RightPanel_headerButton_unreadIndicator_bg {
     position: absolute;
-    right: $dot-offset;
-    top: $dot-offset;
+    right: var(--RoomHeader-indicator-dot-offset);
+    top: var(--RoomHeader-indicator-dot-offset);
     margin: 4px;
-    width: $dot-size;
-    height: $dot-size;
+    width: var(--RoomHeader-indicator-dot-size);
+    height: var(--RoomHeader-indicator-dot-size);
     border-radius: 50%;
     transform: scale(1.6);
     transform-origin: center center;
@@ -108,8 +104,8 @@ $pulse-color: $alert;
 
 .mx_RightPanel_headerButton_unreadIndicator {
     position: absolute;
-    right: $dot-offset;
-    top: $dot-offset;
+    right: var(--RoomHeader-indicator-dot-offset);
+    top: var(--RoomHeader-indicator-dot-offset);
     margin: 4px;
 
     &.mx_Indicator_red {
diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss
index 97f2a505f9..5ddfed21ba 100644
--- a/res/css/structures/_RoomView.pcss
+++ b/res/css/structures/_RoomView.pcss
@@ -262,12 +262,12 @@ limitations under the License.
     position: absolute;
     right: -3px;
     top: -3px;
-    width: $dot-size;
-    height: $dot-size;
+    width: var(--RoomHeader-indicator-dot-size);
+    height: var(--RoomHeader-indicator-dot-size);
     border-radius: 50%;
     transform: scale(1);
-    background: rgba($pulse-color, 1);
-    box-shadow: 0 0 0 0 rgba($pulse-color, 1);
+    background: rgba(var(--RoomHeader-indicator-pulseColor), 1);
+    box-shadow: 0 0 0 0 rgba(var(--RoomHeader-indicator-pulseColor), 1);
     animation: mx_Indicator_pulse 2s infinite;
     animation-iteration-count: 1;
 
diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
index 4cf1d44e10..c351791fea 100644
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@@ -14,6 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+:root {
+    --RoomHeader-indicator-dot-size: 8px;
+    --RoomHeader-indicator-dot-offset: -3px;
+    --RoomHeader-indicator-pulseColor: $alert;
+}
+
 .mx_RoomHeader {
     flex: 0 0 50px;
     border-bottom: 1px solid $primary-hairline-color;