diff --git a/assets/less/classes/changelog-actions-tags.less b/assets/less/classes/changelog-actions-tags.less
index 4b0eb32c..e1829454 100644
--- a/assets/less/classes/changelog-actions-tags.less
+++ b/assets/less/classes/changelog-actions-tags.less
@@ -23,7 +23,7 @@
     }
 
     &__entry {
-        color: inherit;
+        color: var(--user-colour);
         text-decoration: none;
         width: 200px;
         border: 1px solid var(--accent-colour);
diff --git a/assets/less/classes/changelog.less b/assets/less/classes/changelog.less
index c2486204..c482a2d3 100644
--- a/assets/less/classes/changelog.less
+++ b/assets/less/classes/changelog.less
@@ -49,7 +49,10 @@
     &__datetime,
     &__user,
     &__action {
-        color: inherit;
+        --action-colour: inherit;
+
+        background-color: var(--action-colour);
+        color: var(--user-colour);
         flex: 0 0 auto;
         margin-right: 1px;
         text-decoration: none;
@@ -170,6 +173,7 @@
         &__action {
             display: block;
             padding: 6px 2px;
+            background-color: var(--accent-colour);
             border-right: 1px solid var(--accent-colour);
             writing-mode: sideways-lr;
             text-orientation: sideways;
@@ -234,6 +238,7 @@
             }
 
             &__name {
+                color: var(--user-colour);
                 font-size: 1.5em;
                 line-height: 1.2em;
             }
diff --git a/assets/less/classes/comment.less b/assets/less/classes/comment.less
index ba819dc4..530c4b0a 100644
--- a/assets/less/classes/comment.less
+++ b/assets/less/classes/comment.less
@@ -136,6 +136,7 @@
     }
 
     &__user {
+        color: var(--user-colour);
         font-weight: 700;
         text-decoration: none;
 
diff --git a/assets/less/classes/forum/listing.less b/assets/less/classes/forum/listing.less
index 8e4d56a3..9bfe868d 100644
--- a/assets/less/classes/forum/listing.less
+++ b/assets/less/classes/forum/listing.less
@@ -148,6 +148,7 @@
             }
 
             &__user {
+                color: var(--user-colour);
                 font-weight: 700;
                 text-decoration: none;
 
diff --git a/assets/less/classes/forum/post.less b/assets/less/classes/forum/post.less
index c361ffe6..a605dd2e 100644
--- a/assets/less/classes/forum/post.less
+++ b/assets/less/classes/forum/post.less
@@ -103,6 +103,7 @@
         }
 
         &__username {
+            color: var(--user-colour);
             font-size: 1.5em;
             line-height: 1.7em;
         }
diff --git a/assets/less/classes/forum/topics.less b/assets/less/classes/forum/topics.less
index 1798ff81..88093e1b 100644
--- a/assets/less/classes/forum/topics.less
+++ b/assets/less/classes/forum/topics.less
@@ -69,6 +69,7 @@
                 line-height: 1.2em;
 
                 &__name {
+                    color: var(--user-colour);
                     font-weight: 700;
                     text-decoration: none;
 
diff --git a/assets/less/classes/header.less b/assets/less/classes/header.less
index 005ab1c6..c9bc69ae 100644
--- a/assets/less/classes/header.less
+++ b/assets/less/classes/header.less
@@ -209,7 +209,8 @@
         }
 
         &__name {
-            color: inherit;
+            color: var(--user-colour);
+            text-shadow: 0 0 5px var(--user-colour);
             font-size: 1.4em;
             line-height: 1.4em;
             font-family: @mio-font-heading;
diff --git a/assets/less/classes/index.less b/assets/less/classes/index.less
index 969a653a..19d5243a 100644
--- a/assets/less/classes/index.less
+++ b/assets/less/classes/index.less
@@ -27,7 +27,7 @@
         }
 
         &__link {
-            color: inherit;
+            color: var(--user-colour);
             text-decoration: none;
 
             &:hover {
diff --git a/assets/less/classes/news/post.less b/assets/less/classes/news/post.less
index 622c47aa..6d07ced4 100644
--- a/assets/less/classes/news/post.less
+++ b/assets/less/classes/news/post.less
@@ -45,6 +45,7 @@
     }
 
     &__username {
+        color: var(--user-colour);
         flex-grow: 1;
         flex-shrink: 1;
         font-weight: 700;
diff --git a/assets/less/classes/news/preview.less b/assets/less/classes/news/preview.less
index 10000289..80ec3326 100644
--- a/assets/less/classes/news/preview.less
+++ b/assets/less/classes/news/preview.less
@@ -52,5 +52,10 @@
             width: 50px;
             margin-left: 4px;
         }
+
+        &__name {
+            color: var(--user-colour);
+            text-shadow: 0 0 5px var(--user-colour);
+        }
     }
 }
diff --git a/assets/less/classes/profile/header.less b/assets/less/classes/profile/header.less
index 34ae714d..638bbb49 100644
--- a/assets/less/classes/profile/header.less
+++ b/assets/less/classes/profile/header.less
@@ -88,6 +88,8 @@
     }
 
     &__username {
+        color: var(--user-colour);
+        text-shadow: 0 0 5px var(--user-colour);
         font-size: 2em;
         line-height: 1.5em;
     }
diff --git a/assets/less/classes/usercard.less b/assets/less/classes/usercard.less
index eae9e224..5987b3bd 100644
--- a/assets/less/classes/usercard.less
+++ b/assets/less/classes/usercard.less
@@ -92,6 +92,8 @@
     }
 
     &__name {
+        color: var(--user-colour);
+        text-shadow: 0 0 5px var(--user-colour);
         font-size: 1.4em;
         line-height: 1.4em;
         text-overflow: ellipsis;
diff --git a/assets/less/main.less b/assets/less/main.less
index d34ca79f..4dde0bfb 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -15,6 +15,7 @@
     --site-background-meta: no-repeat center / cover fixed;
     --site-background-image: initial;
 
+    --user-colour: inherit;
     --accent-colour: @default-accent-colour;
     --text-colour: @default-text-colour;
     --text-colour-inverted: color(#fff - @default-text-colour);
diff --git a/src/comments.php b/src/comments.php
index 58c43c66..418b59f1 100644
--- a/src/comments.php
+++ b/src/comments.php
@@ -58,10 +58,7 @@ function comments_parse_for_display(string $text): string
         return sprintf(
             '<a href="/profile.php?u=%d" class="comment__mention", style="%s">@%s</a>',
             $info['user_id'],
-            html_colour($info['user_colour'], [
-                'color' => '%s',
-                'text-shadow' => '0 0 5px %s',
-            ]),
+            html_colour($info['user_colour']),
             $info['username']
         );
     }, $text);
diff --git a/templates/_layout/header.twig b/templates/_layout/header.twig
index bfab47d5..ced82f8f 100644
--- a/templates/_layout/header.twig
+++ b/templates/_layout/header.twig
@@ -50,17 +50,12 @@
 
             <div class="header__user__info">
                 {% if current_user is defined %}
-                    <a  href="/profile.php?u={{ current_user.user_id }}"
-                        class="header__user__name"
-                        style="{{ current_user.user_colour|html_colour({
-                            'color': '%s',
-                            'text-shadow': '0 0 5px %s',
-                        }) }}" title="{{ current_user.username }}">
+                    <a  href="/profile.php?u={{ current_user.user_id }}" class="header__user__name"
+                        style="{{ current_user.user_colour|html_colour }}" title="{{ current_user.username }}">
                         {{ current_user.username }}
                     </a>
                 {% else %}
-                    <a  href="/auth.php?m=login"
-                        class="header__user__name">
+                    <a href="/auth.php?m=login" class="header__user__name">
                         Guest
                     </a>
                 {% endif %}
diff --git a/templates/changelog/change.twig b/templates/changelog/change.twig
index 37e3406b..482f8529 100644
--- a/templates/changelog/change.twig
+++ b/templates/changelog/change.twig
@@ -19,9 +19,9 @@
             {% if is_valid %}
                 <div class="changelog__change" id="#c{{ change.change_id }}">
                     <div class="changelog__change__line"
-                        style="{{ change.action_colour|html_colour({'border-color':'%s'}) }}">
+                        style="{{ change.action_colour|html_colour('--accent-colour'}) }}">
                         <div class="changelog__change__action {{ change.action_class is defined and change.action_class is not null ? ' changelog__change__action--' ~ change.action_class : '' }} changelog__change__action--{{ change.action_colour|colour_get_css_contrast }}"
-                            style="{{ change.action_colour|html_colour({'background-color':'%s','border-color':'%s'}) }}">
+                            style="{{ change.action_colour|html_colour('--accent-colour') }}">
                             {{ change.action_name }}
                         </div>
 
diff --git a/templates/changelog/macros.twig b/templates/changelog/macros.twig
index 5d006f1b..1c9b5c23 100644
--- a/templates/changelog/macros.twig
+++ b/templates/changelog/macros.twig
@@ -49,7 +49,7 @@
 
             <a class="changelog__action{{ change.action_class is defined and change.action_class is not null ? ' changelog__action--' ~ change.action_class : '' }} changelog__action--{{ change.action_colour|colour_get_css_contrast }}"
                 href="{{ change_url|format(change.change_id) }}"
-                {% if change.action_colour is defined %}style="{{ change.action_colour|html_colour({'background-color':'%s'}) }}"{% endif %}>
+                {% if change.action_colour is defined %}style="{{ change.action_colour|html_colour('--action-colour') }}"{% endif %}>
                 <div class="changelog__action__text">
                     {{ change.action_name|default('Unknown') }}
                 </div>
diff --git a/templates/forum/macros.twig b/templates/forum/macros.twig
index ac3a14e6..f2d6555f 100644
--- a/templates/forum/macros.twig
+++ b/templates/forum/macros.twig
@@ -98,8 +98,7 @@
                             </div>
                             <div class="forum__listing__entry__activity__info">
                                 {% if forum.recent_post_user_id is not null %}
-                                    by <a
-                                        href="/profile.php?u={{ forum.recent_post_user_id }}"
+                                    by <a href="/profile.php?u={{ forum.recent_post_user_id }}"
                                         style="{{ forum.recent_post_user_colour|html_colour }}"
                                         class="forum__listing__entry__activity__user">{{ forum.recent_post_username }}</a>,
                                 {% endif %}
diff --git a/templates/manage/changelog/action_edit.twig b/templates/manage/changelog/action_edit.twig
index 4e5c6e40..5c9b9b96 100644
--- a/templates/manage/changelog/action_edit.twig
+++ b/templates/manage/changelog/action_edit.twig
@@ -5,7 +5,7 @@
         <form action="?v=action{{ edit_action is defined ? '&a=' ~ edit_action.action_id : '' }}" method="post">
             <h1 class="container__title">
                 {% if edit_action is defined %}
-                    Editing <span style="{{ edit_action.action_colour|html_colour }}">{{ edit_action.action_name }}</span> ({{ edit_action.action_id }})
+                    Editing <span style="{{ edit_action.action_colour|html_colour }};color:var(--user-colour)">{{ edit_action.action_name }}</span> ({{ edit_action.action_id }})
                 {% else %}
                     Adding a new action
                 {% endif %}
diff --git a/templates/manage/changelog/actions_tags.twig b/templates/manage/changelog/actions_tags.twig
index 06a1c0b8..1bddc8e7 100644
--- a/templates/manage/changelog/actions_tags.twig
+++ b/templates/manage/changelog/actions_tags.twig
@@ -34,7 +34,7 @@
                 <div class="changelog-actions-tags__list">
                     {% for action in changelog_actions %}
                         <a href="?v=action&amp;a={{ action.action_id }}" class="changelog-actions-tags__entry"
-                            style="{{ action.action_colour|html_colour({'border-color':'%s'}) }}">
+                            style="{{ action.action_colour|html_colour('border-color') }}">
                             <div class="listing__entry__content changelog-tags__content">
                                 <div class="changelog-tags__text">
                                     {{ action.action_name }} ({{ action.action_count }})
diff --git a/templates/manage/users/roles.twig b/templates/manage/users/roles.twig
index 26054ed8..c7a15932 100644
--- a/templates/manage/users/roles.twig
+++ b/templates/manage/users/roles.twig
@@ -15,7 +15,7 @@
 
                     <div class="usercard__container">
                         <div class="avatar usercard__avatar"
-                            style="{{ role.role_colour|html_colour({'background-color':'%s'}) }}">
+                            style="{{ role.role_colour|html_colour('background-color') }}">
                         </div>
 
                         <div class="usercard__content">
diff --git a/templates/news/macros.twig b/templates/news/macros.twig
index d74d9f89..51f49b5f 100644
--- a/templates/news/macros.twig
+++ b/templates/news/macros.twig
@@ -13,10 +13,7 @@
                 {% if post.user_id is not null %}
                     <a class="news__preview__user" href="/profile.php?u={{ post.user_id }}">
                         <div class="avatar news__preview__user__avatar" style="background-image:url('/profile.php?u={{ post.user_id }}&amp;m=avatar')"></div>
-                        <div class="news__preview__user__name" style="{{ post.user_colour|html_colour({
-                            'color': '%s',
-                            'text-shadow': '0 0 5px %s',
-                        }) }}">
+                        <div class="news__preview__user__name" style="{{ post.user_colour|html_colour }}">
                             {{ post.username }}
                         </div>
                     </a>
diff --git a/templates/user/_layout/header.twig b/templates/user/_layout/header.twig
index 68aeda8f..943680d8 100644
--- a/templates/user/_layout/header.twig
+++ b/templates/user/_layout/header.twig
@@ -3,10 +3,7 @@
         <div class="avatar avatar--new profile__header__avatar" style="background-image:url('{{ image }}')"></div>
 
         <div class="profile__header__details__content">
-            <div class="profile__header__username" style="{{ profile.user_colour|html_colour({
-                'color': '%s',
-                'text-shadow': '0 0 5px %s',
-            }) }}">
+            <div class="profile__header__username" style="{{ profile.user_colour|html_colour }}">
                 {{ profile.username }}
             </div>
 
diff --git a/templates/user/macros.twig b/templates/user/macros.twig
index d41a8adc..55f81c89 100644
--- a/templates/user/macros.twig
+++ b/templates/user/macros.twig
@@ -11,10 +11,7 @@
 
                 <div class="usercard__details">
                     <div class="usercard__name"
-                        {% if user.user_colour is defined %}style="{{ user.user_colour|html_colour({
-                            'color': '%s',
-                            'text-shadow': '0 0 5px %s',
-                        }) }}"{% endif %}>
+                        {% if user.user_colour is defined %}style="{{ user.user_colour|html_colour }}"{% endif %}>
                         {{ user.username }}
                     </div>
 
diff --git a/utility.php b/utility.php
index d0c068bc..0a31cfa0 100644
--- a/utility.php
+++ b/utility.php
@@ -346,12 +346,21 @@ function html_link(string $url, ?string $content = null, $attributes = []): stri
     return $html;
 }
 
-function html_colour(?int $colour, array $attribs = []): string
+function html_colour(?int $colour, $attribs = '--user-colour'): string
 {
     $colour = $colour ?? colour_none();
 
+    if (is_string($attribs)) {
+        $attribs = [
+            $attribs => '%s',
+        ];
+    }
+
     if (!$attribs) {
-        $attribs['color'] = '%s';
+        $attribs = [
+            'color' => '%s',
+            '--user-colour' => '%s',
+        ];
     }
 
     $css = '';