diff --git a/assets/less/mio/classes/avatar.less b/assets/less/mio/classes/avatar.less
index 56786dca..fd4c958a 100644
--- a/assets/less/mio/classes/avatar.less
+++ b/assets/less/mio/classes/avatar.less
@@ -1,11 +1,11 @@
 .avatar {
     flex-shrink: 0;
-    background-color: #fbeeff;
+    background-color: var(--background-colour);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     display: block;
-    border: 1px solid #9475b2;
+    border: 1px solid var(--accent-colour);
     max-height: 200px;
     max-width: 200px;
     box-sizing: content-box;
diff --git a/assets/less/mio/classes/changelog-actions-tags.less b/assets/less/mio/classes/changelog-actions-tags.less
index f37b4274..4b0eb32c 100644
--- a/assets/less/mio/classes/changelog-actions-tags.less
+++ b/assets/less/mio/classes/changelog-actions-tags.less
@@ -26,7 +26,7 @@
         color: inherit;
         text-decoration: none;
         width: 200px;
-        border: 1px solid #9475b2;
+        border: 1px solid var(--accent-colour);
         border-radius: 2px;
         margin: 2px;
         padding: 0 2px;
diff --git a/assets/less/mio/classes/changelog.less b/assets/less/mio/classes/changelog.less
index 6b707c04..b7351516 100644
--- a/assets/less/mio/classes/changelog.less
+++ b/assets/less/mio/classes/changelog.less
@@ -9,7 +9,7 @@
         margin-bottom: 1px;
 
         @media (max-width: @site-mobile-width) {
-            border-bottom: 1px solid #9475b2;
+            border-bottom: 1px solid var(--accent-colour);
             padding-bottom: 1px;
         }
     }
@@ -29,8 +29,8 @@
     // date header in public changelog
     &__date {
         display: block;
-        background: #9475b2;
-        color: #306;
+        background: var(--accent-colour);
+        color: var(--text-colour-header);
         font-weight: 700;
         margin-bottom: 1px;
         text-decoration: none;
@@ -92,7 +92,7 @@
         }
 
         &--light {
-            color: #fff;
+            color: var(--text-colour-inverted);
         }
     }
 
@@ -124,7 +124,7 @@
     }
 
     &__tag {
-        border: 1px solid #9475b2;
+        border: 1px solid var(--accent-colour);
         margin-right: 1px;
         border-radius: 2px;
         display: block;
@@ -140,7 +140,7 @@
     &__change {
 
         &__line {
-            border: 1px solid #9475b2;
+            border: 1px solid var(--accent-colour);
             display: flex;
             align-items: stretch;
             flex: 1 0 auto;
@@ -168,7 +168,7 @@
         &__action {
             display: block;
             padding: 6px 2px;
-            border-right: 1px solid #9475b2;
+            border-right: 1px solid var(--accent-colour);
             writing-mode: sideways-lr;
             text-orientation: sideways;
             letter-spacing: 1px;
@@ -176,7 +176,7 @@
             flex: 0 0 auto;
 
             &--light {
-                color: #fff;
+                color: var(--text-colour-inverted);
             }
         }
 
@@ -193,7 +193,7 @@
         }
 
         &__date {
-            border: 1px solid #9475b2;
+            border: 1px solid var(--accent-colour);
             color: inherit;
             text-decoration: none;
             margin-right: 1px;
@@ -206,7 +206,7 @@
         }
 
         &__user {
-            border: 1px solid #9475b2;
+            border: 1px solid var(--accent-colour);
             padding: 2px;
             display: flex;
             align-items: center;
@@ -240,7 +240,7 @@
         &__text {
             margin: 1px 0;
             padding: 1px 3px;
-            border-top: 1px solid #9475b2;
+            border-top: 1px solid var(--accent-colour);
             font-size: 1.2em;
             line-height: 1.5em;
             flex: 1 1 auto;
@@ -254,7 +254,7 @@
         }
 
         &__tag {
-            border: 1px solid #9475b2;
+            border: 1px solid var(--accent-colour);
             margin-right: 1px;
             border-radius: 2px;
 
diff --git a/assets/less/mio/classes/comments.less b/assets/less/mio/classes/comments.less
index e082ff9f..bc17018c 100644
--- a/assets/less/mio/classes/comments.less
+++ b/assets/less/mio/classes/comments.less
@@ -11,7 +11,7 @@
     &__input,
     &__javascript,
     &__notice--staff {
-        border-bottom: 1px solid #9475b2;
+        border-bottom: 1px solid var(--accent-colour);
         padding-bottom: 1px;
         margin-bottom: 1px;
     }
diff --git a/assets/less/mio/classes/container.less b/assets/less/mio/classes/container.less
index 0ba79d51..84a2a233 100644
--- a/assets/less/mio/classes/container.less
+++ b/assets/less/mio/classes/container.less
@@ -1,8 +1,8 @@
 .container {
-    border: 1px solid #9475b2;
-    background-color: #fbeeff;
+    border: 1px solid var(--accent-colour);
+    background-color: var(--background-colour);
     margin: 2px 0;
-    box-shadow: 0 1px 2px #9475b2;
+    box-shadow: 0 1px 2px var(--accent-colour);
 
     &--hidden { // __title should always be the first element of a container
         :not(:first-child) {
@@ -13,8 +13,8 @@
     &__title {
         display: block;
         text-decoration: none;
-        background-color: #9475b2;
-        color: #306;
+        background-color: var(--accent-colour);
+        color: var(--text-colour-header);
         font-size: 1.17em;
         font-weight: 700;
         padding: 3px;
diff --git a/assets/less/mio/classes/footer.less b/assets/less/mio/classes/footer.less
index 5257ac9e..a0fbf3bc 100644
--- a/assets/less/mio/classes/footer.less
+++ b/assets/less/mio/classes/footer.less
@@ -1,5 +1,5 @@
 .footer {
-    background: linear-gradient(0deg, #c2affe, transparent) repeat-x;
+    background: linear-gradient(0deg, var(--gradient-start), transparent) repeat-x;
     flex: 0 0 auto;
     text-align: center;
     font-size: .9em;
diff --git a/assets/less/mio/classes/forum/listing.less b/assets/less/mio/classes/forum/listing.less
index 982f814d..8e4d56a3 100644
--- a/assets/less/mio/classes/forum/listing.less
+++ b/assets/less/mio/classes/forum/listing.less
@@ -13,7 +13,7 @@
         min-height: 50px;
 
         &:not(:last-child) {
-            border-bottom: 1px solid #9475b2;
+            border-bottom: 1px solid var(--accent-colour);
             margin-bottom: 2px;
             padding-bottom: 2px;
         }
@@ -36,7 +36,7 @@
         &__title {
             font-size: 1.2em;
             line-height: 1.5em;
-            color: #306;
+            color: var(--text-colour-header);
 
             &__link {
                 color: inherit;
@@ -72,7 +72,7 @@
             display: flex;
             flex-shrink: 0;
             flex-grow: 0;
-            border-left: 1px solid #9475b2;
+            border-left: 1px solid var(--accent-colour);
         }
 
         &__stats {
diff --git a/assets/less/mio/classes/forum/pagination.less b/assets/less/mio/classes/forum/pagination.less
index 35f467a2..e949f69f 100644
--- a/assets/less/mio/classes/forum/pagination.less
+++ b/assets/less/mio/classes/forum/pagination.less
@@ -1,4 +1,4 @@
 .forum__pagination {
-    box-shadow: 0 1px 2px #9475b2;
-    background-color: #fbeeff;
+    box-shadow: 0 1px 2px var(--accent-colour);
+    background-color: var(--background-colour);
 }
diff --git a/assets/less/mio/classes/forum/post.less b/assets/less/mio/classes/forum/post.less
index 4fe7fe2e..c361ffe6 100644
--- a/assets/less/mio/classes/forum/post.less
+++ b/assets/less/mio/classes/forum/post.less
@@ -1,8 +1,8 @@
 .forum__post {
     display: flex;
-    border: 1px solid #9475b2;
-    box-shadow: 0 1px 2px #9475b2;
-    background-color: #fbeeff;
+    border: 1px solid var(--accent-colour);
+    box-shadow: 0 1px 2px var(--accent-colour);
+    background-color: var(--background-colour);
     margin: 2px 0;
 
     @media (max-width: @site-mobile-width) {
@@ -32,7 +32,7 @@
             font-size: .9em;
             line-height: 1.7em;
             padding: 0 2px;
-            border-bottom: 1px solid #9475b2;
+            border-bottom: 1px solid var(--accent-colour);
             display: flex;
             justify-content: space-between;
 
@@ -48,7 +48,7 @@
     }
 
     &__author {
-        border-right: 1px solid #9475b2;
+        border-right: 1px solid var(--accent-colour);
         text-align: center;
         flex-grow: 0;
         flex-shrink: 0;
@@ -59,7 +59,7 @@
 
         @media (max-width: @site-mobile-width) {
             border-right-width: 0;
-            border: 1px solid #9475b2;
+            border: 1px solid var(--accent-colour);
             flex-direction: row;
             border-bottom-width: 2px;
         }
@@ -93,7 +93,7 @@
         &__avatar {
             width: 120px;
             height: 120px;
-            box-shadow: 0 1px 2px #9475b2;
+            box-shadow: 0 1px 2px var(--accent-colour);
 
             @media (max-width: @site-mobile-width) {
                 width: 40px;
diff --git a/assets/less/mio/classes/forum/posting.less b/assets/less/mio/classes/forum/posting.less
index 98b04494..2d803805 100644
--- a/assets/less/mio/classes/forum/posting.less
+++ b/assets/less/mio/classes/forum/posting.less
@@ -11,7 +11,7 @@
         color: #a00;
         padding: 0 2px 1px;
         margin-bottom: 2px;
-        border-bottom: 1px solid #9475b2;
+        border-bottom: 1px solid var(--accent-colour);
     }
 
     &__title {
diff --git a/assets/less/mio/classes/forum/topic.less b/assets/less/mio/classes/forum/topic.less
index 07c47c5b..76f869be 100644
--- a/assets/less/mio/classes/forum/topic.less
+++ b/assets/less/mio/classes/forum/topic.less
@@ -1,11 +1,11 @@
 .forum__topic {
     &__locked {
-        border: 1px solid #9475b2;
+        border: 1px solid var(--accent-colour);
         display: flex;
         align-items: center;
         min-height: 40px;
         margin-bottom: 2px;
-        box-shadow: 0 1px 2px #9475b2;
+        box-shadow: 0 1px 2px var(--accent-colour);
 
         &__icon {
             height: 40px;
@@ -14,7 +14,7 @@
             background-image: url('https://static.flash.moe/images/topic-icons/topic-locked-read.png');
             background-position: center;
             background-repeat: no-repeat;
-            background-color: #9475b2;
+            background-color: var(--accent-colour);
             flex-grow: 0;
             flex-shrink: 0;
         }
diff --git a/assets/less/mio/classes/forum/topics.less b/assets/less/mio/classes/forum/topics.less
index 82aec8af..1798ff81 100644
--- a/assets/less/mio/classes/forum/topics.less
+++ b/assets/less/mio/classes/forum/topics.less
@@ -15,7 +15,7 @@
         &:not(:first-child) {
             margin-top: 1px;
             padding-top: 1px;
-            border-top: 1px solid #9475b2;
+            border-top: 1px solid var(--accent-colour);
         }
 
         &__icon {
@@ -40,7 +40,7 @@
             display: flex;
             flex-shrink: 0;
             flex-grow: 0;
-            border-left: 1px solid #9475b2;
+            border-left: 1px solid var(--accent-colour);
         }
 
         &__info,
diff --git a/assets/less/mio/classes/header.less b/assets/less/mio/classes/header.less
index 31a9a237..005ab1c6 100644
--- a/assets/less/mio/classes/header.less
+++ b/assets/less/mio/classes/header.less
@@ -1,6 +1,6 @@
 .header {
     flex: 0 0 auto;
-    background: linear-gradient(0deg, transparent, #c2affe) repeat-x;
+    background: linear-gradient(0deg, transparent, var(--gradient-start)) repeat-x;
 
     &__wrapper {
         margin: 0 auto;
@@ -82,10 +82,10 @@
 
         @media (max-width: @site-mobile-width) {
             width: 100%;
-            background: #c2affe;
+            background: var(--gradient-start);
 
             &__item:not(:last-child) {
-                border-bottom: 1px solid #9475b2;
+                border-bottom: 1px solid var(--accent-colour);
             }
 
             &__link {
@@ -103,7 +103,7 @@
                 transition: background-color .2s;
 
                 &:hover {
-                    background-color: #c2affe;
+                    background-color: var(--gradient-start);
 
                     .header__submenu {
                         transform: scaleY(1);
@@ -141,11 +141,11 @@
             position: absolute; // floating
             transform: scaleY(0);
             transform-origin: center top 0;
-            background: #c2affe;
+            background: var(--gradient-start);
             overflow: hidden;
             z-index: 100;
             text-align: left;
-            box-shadow: 0 1px 2px #9475b2;
+            box-shadow: 0 1px 2px var(--accent-colour);
             transition: transform .2s;
 
             &:hover {
@@ -175,7 +175,7 @@
         @media (max-width: @site-mobile-width) {
             display: none;
             width: 100%;
-            background: #c2affe;
+            background: var(--gradient-start);
             font-size: 1.1em;
 
             &-toggle:checked ~ .header__user {
@@ -231,7 +231,7 @@
                 max-width: 100%;
                 font-size: 1.6em;
                 line-height: 1.5em;
-                border-bottom: 1px solid #9475b2;
+                border-bottom: 1px solid var(--accent-colour);
                 padding: 4px 8px;
                 text-align: left;
             }
@@ -262,7 +262,7 @@
                 padding: 0;
 
                 &:not(:last-child) {
-                    border-bottom: 1px solid #9475b2;
+                    border-bottom: 1px solid var(--accent-colour);
                 }
             }
         }
diff --git a/assets/less/mio/classes/input/button.less b/assets/less/mio/classes/input/button.less
index 3c147a4d..cced271b 100644
--- a/assets/less/mio/classes/input/button.less
+++ b/assets/less/mio/classes/input/button.less
@@ -1,6 +1,6 @@
 .input__button {
-    background-image: linear-gradient(0deg, transparent, #c2affe);
-    background-color: #9475b2;
+    background-image: linear-gradient(0deg, transparent, var(--gradient-start));
+    background-color: var(--accent-colour);
     font-family: @mio-font-regular;
     font-size: 1.1em;
     line-height: 1.4em;
@@ -9,8 +9,8 @@
     text-align: center;
     cursor: pointer;
     transition: background-color .2s, box-shadow .2s;
-    color: #306;
-    border: 1px solid #306;
+    color: var(--text-colour-header);
+    border: 1px solid var(--text-colour-header);
     border-radius: 2px;
     display: inline-block;
     text-decoration: none;
@@ -23,7 +23,7 @@
 
     &:not(&--disabled) {
         &:focus {
-            box-shadow: inset 0 0 2px 0 #306;
+            box-shadow: inset 0 0 2px 0 var(--text-colour-header);
         }
 
         &:hover {
@@ -31,7 +31,7 @@
         }
 
         &:active {
-            background-color: #c2affe;
+            background-color: var(--gradient-start);
         }
     }
 }
diff --git a/assets/less/mio/classes/input/select.less b/assets/less/mio/classes/input/select.less
index 5d5b4bdf..fed66e24 100644
--- a/assets/less/mio/classes/input/select.less
+++ b/assets/less/mio/classes/input/select.less
@@ -7,6 +7,6 @@
     min-width: 150px;
 
     &:focus {
-        border-color: #9475b2;
+        border-color: var(--accent-colour);
     }
 }
diff --git a/assets/less/mio/classes/input/text.less b/assets/less/mio/classes/input/text.less
index c2b5e75e..4f1232d2 100644
--- a/assets/less/mio/classes/input/text.less
+++ b/assets/less/mio/classes/input/text.less
@@ -5,7 +5,7 @@
     color: #111;
 
     &:focus {
-        border-color: #9475b2;
+        border-color: var(--accent-colour);
     }
 
     &--readonly {
diff --git a/assets/less/mio/classes/input/textarea.less b/assets/less/mio/classes/input/textarea.less
index dc20f7df..d68951b6 100644
--- a/assets/less/mio/classes/input/textarea.less
+++ b/assets/less/mio/classes/input/textarea.less
@@ -6,6 +6,6 @@
     color: #111;
 
     &:focus {
-        border-color: #9475b2;
+        border-color: var(--accent-colour);
     }
 }
diff --git a/assets/less/mio/classes/navigation.less b/assets/less/mio/classes/navigation.less
index 39045dc1..7683f96c 100644
--- a/assets/less/mio/classes/navigation.less
+++ b/assets/less/mio/classes/navigation.less
@@ -5,7 +5,7 @@
     width: 100%;
     display: flex;
     border-width: 0;
-    border-color: #000;
+    border-color: var(--text-colour);
     border-style: solid;
     border-top-width: 1px;
     align-items: flex-start;
@@ -49,12 +49,12 @@
     &__option {
         list-style: none;
         background-color: #c9bbcc;
-        border: 1px solid #000;
+        border: 1px solid var(--text-colour);
         border-top-width: 0;
         flex-grow: 0;
 
         @media (max-width: @mio-navigation-mobile) {
-            background-color: #9475b2;
+            background-color: var(--accent-colour);
             width: 100%;
             border: none;
             flex-grow: 1;
@@ -66,11 +66,11 @@
         }
 
         &--selected {
-            background-color: #fbeeff;
+            background-color: var(--background-colour);
             top: -1px;
 
             @media (max-width: @mio-navigation-mobile) {
-                background-color: #A586c3;
+                background-color: #a586c3;
                 top: 0;
             }
 
@@ -90,12 +90,12 @@
     &__link {
         display: block;
         padding: 2px 1em;
-        color: #000;
+        color: var(--text-colour);
         text-decoration: none;
 
         @media (max-width: @mio-navigation-mobile) {
             padding: 10px 15px;
-            color: #306;
+            color: var(--text-colour-header);
             font-size: 1.5em;
         }
 
diff --git a/assets/less/mio/classes/news/post.less b/assets/less/mio/classes/news/post.less
index 9d531273..622c47aa 100644
--- a/assets/less/mio/classes/news/post.less
+++ b/assets/less/mio/classes/news/post.less
@@ -23,7 +23,7 @@
     }
 
     &__detail {
-        border: 1px solid #9475b2;
+        border: 1px solid var(--accent-colour);
         padding: 1px;
 
         &:not(:last-child) {
diff --git a/assets/less/mio/classes/news/preview.less b/assets/less/mio/classes/news/preview.less
index 861facea..10000289 100644
--- a/assets/less/mio/classes/news/preview.less
+++ b/assets/less/mio/classes/news/preview.less
@@ -24,7 +24,7 @@
     &__info {
         display: flex;
         justify-content: space-between;
-        border-top: 1px solid #9475b2;
+        border-top: 1px solid var(--accent-colour);
         font-size: .9em;
         padding: 0 2px;
         margin-top: 1px;
diff --git a/assets/less/mio/classes/pagination.less b/assets/less/mio/classes/pagination.less
index a60135d5..08b62d75 100644
--- a/assets/less/mio/classes/pagination.less
+++ b/assets/less/mio/classes/pagination.less
@@ -2,12 +2,12 @@
     list-style: none;
     display: flex;
     padding: 1px;
-    border: 1px solid #9475b2;
+    border: 1px solid var(--accent-colour);
 
     &__wrapper {
-        background-color: #fbeeff;
+        background-color: var(--background-colour);
         margin: 2px 0;
-        box-shadow: 0 1px 2px #9475b2;
+        box-shadow: 0 1px 2px var(--accent-colour);
     }
 
     &__separator {
@@ -16,8 +16,8 @@
     }
 
     &__option {
-        background: #9475b2;
-        color: #306;
+        background: var(--accent-colour);
+        color: var(--text-colour-header);
         height: 20px;
         min-width: 20px;
 
diff --git a/assets/less/mio/classes/permissions.less b/assets/less/mio/classes/permissions.less
index b165544b..3cf653dc 100644
--- a/assets/less/mio/classes/permissions.less
+++ b/assets/less/mio/classes/permissions.less
@@ -11,7 +11,7 @@
         &--header {
             font-size: 1.2em;
             line-height: 1.4em;
-            border-bottom: 1px solid #9475b2;
+            border-bottom: 1px solid var(--accent-colour);
             padding-bottom: 1px;
             font-family: @mio-font-heading;
 
@@ -57,7 +57,7 @@
 
         &--radio {
             cursor: pointer;
-            border-left: 1px solid #9475b2;
+            border-left: 1px solid var(--accent-colour);
         }
 
         &--yes {
diff --git a/assets/less/mio/classes/profile.less b/assets/less/mio/classes/profile.less
index 3cefaca3..beaabe03 100644
--- a/assets/less/mio/classes/profile.less
+++ b/assets/less/mio/classes/profile.less
@@ -25,7 +25,7 @@
 
     &__header {
         height: 300px;
-        background-color: #fbeeff;
+        background-color: var(--background-colour);
         background-size: cover;
         background-repeat: no-repeat;
         background-position: 50%;
@@ -55,7 +55,7 @@
 
         @media (max-width: @site-mobile-width) {
             flex-direction: column;
-            background-color: #9475b2;
+            background-color: var(--accent-colour);
             width: 100%;
             padding-top: 2px;
         }
@@ -69,13 +69,13 @@
         }
 
         &__block {
-            border: 1px solid #9475b2;
+            border: 1px solid var(--accent-colour);
             padding: 2px 4px;
             margin-bottom: 2px;
             background-color: rgba(251, 238, 255, .9);
 
             @media (max-width: @site-mobile-width) {
-                background-color: #fbeeff;
+                background-color: var(--background-colour);
             }
 
             &--links:empty {
diff --git a/assets/less/mio/classes/settings/account.less b/assets/less/mio/classes/settings/account.less
index e1868a4d..40d1247a 100644
--- a/assets/less/mio/classes/settings/account.less
+++ b/assets/less/mio/classes/settings/account.less
@@ -32,7 +32,7 @@
 
         &:not(.settings__account__column--no-margin) {
             margin: 1px;
-            border: 1px solid #9475b2;
+            border: 1px solid var(--accent-colour);
             border-top-width: 0;
         }
 
@@ -44,8 +44,8 @@
     }
 
     &__title {
-        background-color: #9475b2;
-        color: #306;
+        background-color: var(--accent-colour);
+        color: var(--text-colour-header);
         font-size: 1.1em;
         font-weight: 700;
         padding: 3px;
diff --git a/assets/less/mio/classes/settings/avatar.less b/assets/less/mio/classes/settings/avatar.less
index 7b79ffce..3070d8c3 100644
--- a/assets/less/mio/classes/settings/avatar.less
+++ b/assets/less/mio/classes/settings/avatar.less
@@ -24,12 +24,12 @@
     }
 
     &__name {
-        background-color: #9475b2;
-        color: #306;
+        background-color: var(--accent-colour);
+        color: var(--text-colour-header);
         text-overflow: ellipsis;
         overflow: hidden;
         padding: 0 4px;
-        border-bottom: 1px solid #306;
+        border-bottom: 1px solid var(--text-colour-header);
     }
 
     &__buttons {
@@ -42,8 +42,8 @@
         padding: 5px;
         cursor: pointer;
         font-family: inherit;
-        background-color: #9475b2;
-        color: #306;
+        background-color: var(--accent-colour);
+        color: var(--text-colour-header);
         font-weight: 700;
         border-radius: 0;
 
diff --git a/assets/less/mio/classes/settings/description.less b/assets/less/mio/classes/settings/description.less
index ff73619a..ede32bfe 100644
--- a/assets/less/mio/classes/settings/description.less
+++ b/assets/less/mio/classes/settings/description.less
@@ -1,6 +1,6 @@
 .settings__description {
     font-size: .9em;
     padding: 1px 4px;
-    border-bottom: 1px solid #9475b2;
+    border-bottom: 1px solid var(--accent-colour);
     margin-bottom: 1px;
 }
diff --git a/assets/less/mio/classes/settings/images.less b/assets/less/mio/classes/settings/images.less
index cfad9807..f91cba10 100644
--- a/assets/less/mio/classes/settings/images.less
+++ b/assets/less/mio/classes/settings/images.less
@@ -16,7 +16,7 @@
     &__requirements {
         text-align: left;
         display: inline-block;
-        border: 3px double #9475b2;
+        border: 3px double var(--accent-colour);
         padding: .5em 2em;
 
         &__list {
diff --git a/assets/less/mio/classes/settings/log.less b/assets/less/mio/classes/settings/log.less
index e635d601..2b8794a3 100644
--- a/assets/less/mio/classes/settings/log.less
+++ b/assets/less/mio/classes/settings/log.less
@@ -7,7 +7,7 @@
 
     &__entry {
         display: flex;
-        border: 1px solid #9475b2;
+        border: 1px solid var(--accent-colour);
         justify-content: space-between;
         padding: 1px;
         flex-wrap: wrap;
diff --git a/assets/less/mio/classes/settings/login-history.less b/assets/less/mio/classes/settings/login-history.less
index 94480d94..dea4e43e 100644
--- a/assets/less/mio/classes/settings/login-history.less
+++ b/assets/less/mio/classes/settings/login-history.less
@@ -7,7 +7,7 @@
 
     &__entry {
         display: flex;
-        border: 1px solid #9475b2;
+        border: 1px solid var(--accent-colour);
         justify-content: space-between;
         padding: 1px;
         flex-wrap: wrap;
diff --git a/assets/less/mio/classes/settings/sessions.less b/assets/less/mio/classes/settings/sessions.less
index 51116a19..4e5db819 100644
--- a/assets/less/mio/classes/settings/sessions.less
+++ b/assets/less/mio/classes/settings/sessions.less
@@ -18,13 +18,13 @@
         display: flex;
         justify-content: center;
         padding: 6px;
-        border-bottom: 1px solid #9475b2;
+        border-bottom: 1px solid var(--accent-colour);
         margin-bottom: 1px;
     }
 
     &__entry {
         display: flex;
-        border: 1px solid #9475b2;
+        border: 1px solid var(--accent-colour);
         justify-content: space-between;
         padding: 1px;
         flex-wrap: wrap;
diff --git a/assets/less/mio/classes/side-navigation.less b/assets/less/mio/classes/side-navigation.less
index 74cbd3e2..aef5591b 100644
--- a/assets/less/mio/classes/side-navigation.less
+++ b/assets/less/mio/classes/side-navigation.less
@@ -21,7 +21,7 @@
     }
 
     &__title {
-        color: #306;
+        color: var(--text-colour-header);
         font-family: @mio-font-heading;
         display: block;
         font-weight: 700;
diff --git a/assets/less/mio/classes/usercard.less b/assets/less/mio/classes/usercard.less
index 15d5f388..0c2d39e9 100644
--- a/assets/less/mio/classes/usercard.less
+++ b/assets/less/mio/classes/usercard.less
@@ -1,5 +1,5 @@
 .usercard {
-    box-shadow: 0 1px 2px #9475b2;
+    box-shadow: 0 1px 2px var(--accent-colour);
     width: 300px;
     height: 70px;
     transition: box-shadow .5s;
@@ -7,7 +7,7 @@
     color: #fff;
 
     &:hover {
-        box-shadow: 0 1px 1em #9475b2;
+        box-shadow: 0 1px 1em var(--accent-colour);
         z-index: 2;
     }
 
@@ -17,7 +17,7 @@
         top: 0;
         height: 100%;
         width: 100%;
-        background-color: #9475b2;
+        background-color: var(--accent-colour);
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;
@@ -27,7 +27,7 @@
         padding: 4px;
         height: 100%;
         width: 100%;
-        //border: 1px solid #9475b2;
+        //border: 1px solid var(--accent-colour);
         pointer-events: none;
         display: flex;
         background-color: rgba(0, 0, 0, .7);
diff --git a/assets/less/mio/main.less b/assets/less/mio/main.less
index 2d57a0aa..480159ed 100644
--- a/assets/less/mio/main.less
+++ b/assets/less/mio/main.less
@@ -3,8 +3,23 @@
 @site-max-width: 1200px;
 @site-mobile-width: 800px;
 
+@default-accent-colour: #9475b2;
+@default-background-colour: #fbeeff;
+@default-text-colour: #000;
+@default-header-text-colour: #306;
+@default-gradient-start: #c2affe;
+
 :root {
     --site-max-width: @site-max-width;
+    --site-background-meta: initial;
+    --site-background-image: initial;
+
+    --accent-colour: @default-accent-colour;
+    --text-colour: @default-text-colour;
+    --text-colour-inverted: color(#fff - @default-text-colour);
+    --text-colour-header: @default-header-text-colour;
+    --background-colour: @default-background-colour;
+    --gradient-start: @default-gradient-start;
 }
 
 * {
@@ -24,9 +39,11 @@ body {
 .main {
     display: flex;
     flex-direction: column;
-    background-color: #fbeeff;
+    background: var(--site-background-meta);
+    background-image: var(--site-background-image);
+    background-color: var(--background-colour);
     font: 12px/20px @mio-font-regular;
-    color: #000;
+    color: var(--text-colour);
 
     &__wrapper {
         max-width: var(--site-max-width);