diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2534199..702f98d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Added
+
+- Define CSS variables for color theme.
+
 ### Changed
 
 - Don't revoke auth token when handling timeline loading error.
diff --git a/src/App.vue b/src/App.vue
index d5bb16d..9531aba 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,21 +27,53 @@ watch($$(currentUser), () => {
 @import "styles/layout";
 @import "styles/theme";
 
+:root {
+  --background-color: #{$background-color};
+  --text-color: #{$text-color};
+  --text-colorizer: #{$text-colorizer};
+  --secondary-text-color: #{$secondary-text-color};
+  --secondary-text-colorizer: #{$secondary-text-colorizer};
+  --secondary-text-hover-color: #{$secondary-text-hover-color};
+  --secondary-text-hover-colorizer: #{$secondary-text-hover-colorizer};
+  --link-color: #{$link-color};
+  --link-colorizer: #{$link-colorizer};
+  --link-hover-color: #{$link-hover-color};
+  --link-hover-colorizer: #{$link-hover-colorizer};
+  --btn-background-color: #{$btn-background-color};
+  --btn-background-hover-color: #{$btn-background-hover-color};
+  --btn-text-color: #{$btn-text-color};
+  --btn-text-colorizer: #{$btn-text-colorizer};
+  --btn-text-hover-color: #{$btn-text-hover-color};
+  --btn-text-hover-colorizer: #{$btn-text-hover-colorizer};
+  --btn-secondary-background-color: #{$btn-secondary-background-color};
+  --btn-secondary-text-color: #{$btn-secondary-text-color};
+  --btn-disabled-background-color: #{$btn-disabled-background-color};
+  --btn-disabled-text-color: #{$btn-disabled-text-color};
+  --block-background-color: #{$block-background-color};
+  --block-link-color: #{$block-link-color};
+  --block-link-hover-color: #{$block-link-hover-color};
+  --separator-color: #{$separator-color};
+  --widget-background-color: #{$widget-background-color};
+  --highlight-color: #{$highlight-color};
+  --loader-color: #{$loader-color};
+  --shadow-color: #{$shadow-color};
+}
+
 html {
-  background: $background-color;
-  color: $text-color;
+  background: var(--background-color);
+  color: var(--text-color);
   font-family: $text-font;
   font-size: $text-font-size;
   min-height: 100%;
 }
 
 a {
-  color: $link-color;
+  color: var(--link-color);
   cursor: pointer;
   text-decoration: none;
 
   &:hover {
-    color: $link-hover-color;
+    color: var(--link-hover-color);
   }
 }
 
@@ -112,11 +144,11 @@ h6 {
 
 input,
 textarea {
-  background-color: $block-background-color;
-  border: 1px solid $block-background-color;
+  background-color: var(--block-background-color);
+  border: 1px solid var(--block-background-color);
   box-shadow: none;
   box-sizing: border-box;
-  color: $text-color;
+  color: var(--text-color);
   font-family: $text-font;
   font-size: $text-font-size;
   margin: 0;
@@ -128,7 +160,7 @@ textarea {
   }
 
   &::placeholder {
-    color: $secondary-text-color;
+    color: var(--secondary-text-color);
     opacity: 1;
   }
 }
@@ -146,14 +178,14 @@ textarea {
 button {
   background-color: transparent;
   border: none;
-  color: $link-color;
+  color: var(--link-color);
   cursor: pointer;
   font-family: $text-font;
   font-size: $text-font-size;
   padding: 0;
 
   &:hover {
-    color: $link-hover-color;
+    color: var(--link-hover-color);
   }
 
   &[disabled] {
@@ -162,11 +194,11 @@ button {
 }
 
 .btn {
-  background-color: $btn-background-color;
+  background-color: var(--btn-background-color);
   border: none;
   border-radius: $btn-border-radius;
-  box-shadow: $btn-shadow-size $shadow-color;
-  color: $btn-text-color;
+  box-shadow: $btn-shadow-size var(--shadow-color);
+  color: var(--btn-text-color);
   cursor: pointer;
   display: inline-block;
   font-size: $text-font-size;
@@ -175,24 +207,24 @@ button {
   white-space: nowrap;
 
   &:hover {
-    background-color: $btn-background-hover-color;
-    color: $btn-text-hover-color;
+    background-color: var(--btn-background-hover-color);
+    color: var(--btn-text-hover-color);
   }
 
   &[disabled] {
-    background-color: $btn-disabled-background-color !important;
+    background-color: var(--btn-disabled-background-color) !important;
     box-shadow: none;
-    color: $btn-disabled-text-color !important;
+    color: var(--btn-disabled-text-color) !important;
   }
 }
 
 .btn.secondary {
-  background-color: $btn-secondary-background-color;
-  color: $btn-secondary-text-color;
+  background-color: var(--btn-secondary-background-color);
+  color: var(--btn-secondary-text-color);
 
   &:hover {
-    background-color: $btn-background-hover-color;
-    color: $btn-text-hover-color;
+    background-color: var(--btn-background-hover-color);
+    color: var(--btn-text-hover-color);
   }
 }
 
diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
index c37abe6..7c8dfa4 100644
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@@ -30,10 +30,8 @@ const avatarUrl = computed<string>(() => {
 </script>
 
 <style scoped lang="scss">
-@import "../styles/theme";
-
 .avatar {
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: 50%;
   box-sizing: border-box;
 
diff --git a/src/components/CryptoAddress.vue b/src/components/CryptoAddress.vue
index 5613dc0..4a26b24 100644
--- a/src/components/CryptoAddress.vue
+++ b/src/components/CryptoAddress.vue
@@ -20,10 +20,9 @@ function copyAddress() {
 
 <style scoped lang="scss">
 @import "../styles/layout";
-@import "../styles/theme";
 
 .crypto-address {
-  background-color: $widget-background-color;
+  background-color: var(--widget-background-color);
   border-radius: 10px;
   display: flex;
 
@@ -31,7 +30,7 @@ function copyAddress() {
     background-color: inherit;
     border: none;
     border-radius: 10px 0 0 10px;
-    color: $text-color;
+    color: var(--text-color);
     font-family: monospace;
     font-size: 12px;
     line-height: 20px;
@@ -48,14 +47,14 @@ function copyAddress() {
     width: $icon-size;
 
     img {
-      filter: $link-colorizer;
+      filter: var(--link-colorizer);
       height: 100%;
       object-fit: contain;
       width: 100%;
     }
 
     &:hover img {
-      filter: $link-hover-colorizer;
+      filter: var(--link-hover-colorizer);
     }
   }
 }
diff --git a/src/components/InstanceInfo.vue b/src/components/InstanceInfo.vue
index 61d4698..ac0bd79 100644
--- a/src/components/InstanceInfo.vue
+++ b/src/components/InstanceInfo.vue
@@ -17,12 +17,11 @@ const { instance } = $(useInstanceInfo())
 <style scoped lang="scss">
 @import "../styles/layout";
 @import "../styles/mixins";
-@import "../styles/theme";
 
 .instance-info {
   @include block-btn;
 
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: $block-border-radius;
   box-sizing: border-box;
   display: flex;
diff --git a/src/components/Loader.vue b/src/components/Loader.vue
index 6eed0e0..976a4f3 100644
--- a/src/components/Loader.vue
+++ b/src/components/Loader.vue
@@ -6,8 +6,6 @@
 </template>
 
 <style scoped lang="scss">
-@import "../styles/theme";
-
 /* https://github.com/loadingio/css-spinner/blob/master/dist/ripple.html */
 
 $loader-size: 80px;
@@ -21,7 +19,7 @@ $loader-width: 4px;
 
 .loader div {
   animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-  border: $loader-width solid $loader-color;
+  border: $loader-width solid var(--loader-color);
   border-radius: 50%;
   opacity: 1;
   position: absolute;
diff --git a/src/components/Post.vue b/src/components/Post.vue
index 1b8d3a0..1df672b 100644
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -579,12 +579,12 @@ async function onMintToken() {
 @import "../styles/mixins";
 
 .post {
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: $block-border-radius;
   text-align: left;
 
   &.highlighted {
-    outline: 1px solid $highlight-color;
+    outline: 1px solid var(--highlight-color);
   }
 }
 
@@ -592,7 +592,7 @@ async function onMintToken() {
   @include post-icon;
 
   align-items: center;
-  color: $secondary-text-color;
+  color: var(--secondary-text-color);
   display: flex;
   flex-direction: row;
   gap: calc($block-inner-padding / 2);
@@ -612,7 +612,7 @@ async function onMintToken() {
     white-space: nowrap;
 
     .display-name {
-      color: $text-color;
+      color: var(--text-color);
       font-weight: bold;
     }
   }
@@ -626,18 +626,18 @@ async function onMintToken() {
   }
 
   .timestamp {
-    color: $secondary-text-color;
+    color: var(--secondary-text-color);
     text-align: right;
     white-space: nowrap;
 
     &:hover {
-      color: $secondary-text-hover-color;
+      color: var(--secondary-text-hover-color);
     }
   }
 }
 
 .post-subheader {
-  color: $secondary-text-color;
+  color: var(--secondary-text-color);
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -658,7 +658,7 @@ async function onMintToken() {
 }
 
 .post-quote {
-  border: 1px solid $separator-color;
+  border: 1px solid var(--separator-color);
   border-radius: $block-border-radius;
   color: inherit;
   display: block;
@@ -671,7 +671,7 @@ async function onMintToken() {
 
 .quote-header {
   align-items: center;
-  color: $secondary-text-color;
+  color: var(--secondary-text-color);
   display: flex;
   flex-direction: row;
   gap: calc($block-inner-padding / 2);
@@ -683,7 +683,7 @@ async function onMintToken() {
   }
 
   .display-name {
-    color: $text-color;
+    color: var(--text-color);
     font-weight: bold;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -744,7 +744,7 @@ async function onMintToken() {
 }
 
 .post-form {
-  border-top: 1px solid $separator-color;
+  border-top: 1px solid var(--separator-color);
 }
 
 @media screen and (max-width: $screen-breakpoint-small) {
diff --git a/src/components/PostAttachment.vue b/src/components/PostAttachment.vue
index 4380dce..fe93871 100644
--- a/src/components/PostAttachment.vue
+++ b/src/components/PostAttachment.vue
@@ -18,7 +18,6 @@ defineProps<{
 
 <style scoped lang="scss">
 @import "../styles/mixins";
-@import "../styles/theme";
 
 a {
   @include block-link;
diff --git a/src/components/PostContent.vue b/src/components/PostContent.vue
index 3df6c4a..a7805c7 100644
--- a/src/components/PostContent.vue
+++ b/src/components/PostContent.vue
@@ -84,7 +84,7 @@ function getContent(): string {
 @import "../styles/mixins";
 
 .post-content {
-  color: $text-color;
+  color: var(--text-color);
   line-height: 1.5;
   padding: $block-inner-padding;
   word-wrap: break-word;
diff --git a/src/components/PostEditor.vue b/src/components/PostEditor.vue
index d36ec89..8deeac1 100644
--- a/src/components/PostEditor.vue
+++ b/src/components/PostEditor.vue
@@ -387,7 +387,7 @@ $line-height: 1.5;
 }
 
 .textarea-group {
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: $block-border-radius;
 }
 
@@ -408,14 +408,14 @@ $line-height: 1.5;
   position: relative;
 
   .remove-attachment {
-    background-color: $btn-background-color;
+    background-color: var(--btn-background-color);
     display: flex;
     position: absolute;
     right: 0;
     top: 0;
 
     img {
-      filter: $btn-text-colorizer;
+      filter: var(--btn-text-colorizer);
       height: $icon-size;
       width: $icon-size;
     }
@@ -426,7 +426,7 @@ $line-height: 1.5;
   }
 
   .placeholder {
-    background-color: $background-color;
+    background-color: var(--background-color);
     box-sizing: border-box;
     padding: $block-inner-padding;
     text-align: center;
@@ -440,8 +440,8 @@ $line-height: 1.5;
 
   align-items: center;
   border-radius: 0 0 $block-border-radius $block-border-radius;
-  border-top: 1px solid $separator-color;
-  color: $secondary-text-color;
+  border-top: 1px solid var(--separator-color);
+  color: var(--secondary-text-color);
   display: flex;
   flex-direction: row;
   gap: calc($block-inner-padding / 2);
@@ -460,7 +460,7 @@ $line-height: 1.5;
     margin-left: $block-inner-padding;
 
     &[disabled] {
-      color: $btn-disabled-text-color;
+      color: var(--btn-disabled-text-color);
       cursor: initial;
     }
   }
diff --git a/src/components/ProfileCard.vue b/src/components/ProfileCard.vue
index bf92da0..0286713 100644
--- a/src/components/ProfileCard.vue
+++ b/src/components/ProfileCard.vue
@@ -49,11 +49,11 @@ $avatar-size: 90px;
 $profile-padding: calc($block-inner-padding / 2);
 
 .profile {
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: $block-border-radius;
 
   .profile-header {
-    background-color: $btn-background-color;
+    background-color: var(--btn-background-color);
     border-radius: $block-border-radius $block-border-radius 0 0;
     height: 100px;
 
@@ -94,7 +94,7 @@ $profile-padding: calc($block-inner-padding / 2);
     }
 
     .actor-address {
-      color: $secondary-text-color;
+      color: var(--secondary-text-color);
       overflow-x: hidden;
       text-overflow: ellipsis;
     }
@@ -127,7 +127,7 @@ $profile-padding: calc($block-inner-padding / 2);
     }
 
     .name {
-      color: $secondary-text-color;
+      color: var(--secondary-text-color);
       margin-left: 0.3em;
     }
   }
diff --git a/src/components/ProfileListItem.vue b/src/components/ProfileListItem.vue
index 0100c71..4620667 100644
--- a/src/components/ProfileListItem.vue
+++ b/src/components/ProfileListItem.vue
@@ -32,7 +32,7 @@ const profile = $computed(() => new ProfileWrapper(props.profile))
 
 .profile {
   align-items: center;
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: $block-border-radius;
   display: flex;
   flex-direction: row;
@@ -51,13 +51,13 @@ const profile = $computed(() => new ProfileWrapper(props.profile))
   }
 
   .display-name {
-    color: $text-color;
+    color: var(--text-color);
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   .actor-address {
-    color: $secondary-text-color;
+    color: var(--secondary-text-color);
     overflow: hidden;
     text-overflow: ellipsis;
   }
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 37ae185..d3bc92e 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -60,7 +60,7 @@ button {
   height: 100%;
 
   img {
-    filter: $text-colorizer;
+    filter: var(--text-colorizer);
     height: 1.2em;
     min-width: 1.2em;
     object-fit: contain;
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 95c2268..972bc12 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -95,7 +95,7 @@ async function logout() {
 $sidebar-icon-size: 20px;
 
 .sidebar {
-  background-color: $background-color;
+  background-color: var(--background-color);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -123,13 +123,13 @@ $sidebar-icon-size: 20px;
     width: $sidebar-icon-size + 5px;
 
     img {
-      filter: $link-colorizer;
+      filter: var(--link-colorizer);
       height: $sidebar-icon-size;
       width: $sidebar-icon-size;
     }
 
     .icon-badge {
-      background-color: $block-background-color;
+      background-color: var(--block-background-color);
       border-radius: 50%;
       font-size: 0.8rem;
       height: 1em;
@@ -144,15 +144,15 @@ $sidebar-icon-size: 20px;
 
   &:hover {
     img {
-      filter: $link-hover-colorizer;
+      filter: var(--link-hover-colorizer);
     }
   }
 
   &.router-link-exact-active {
-    color: $link-hover-color;
+    color: var(--link-hover-color);
 
     img {
-      filter: $link-hover-colorizer;
+      filter: var(--link-hover-colorizer);
     }
   }
 }
diff --git a/src/components/SidebarLayout.vue b/src/components/SidebarLayout.vue
index a6b62cc..f446ba9 100644
--- a/src/components/SidebarLayout.vue
+++ b/src/components/SidebarLayout.vue
@@ -65,10 +65,9 @@ function showHomeTimeline() {
 
 <style scoped lang="scss">
 @import "../styles/layout";
-@import "../styles/theme";
 
 header {
-  background-color: $background-color;
+  background-color: var(--background-color);
   box-sizing: border-box;
   height: $header-height;
   margin-bottom: $block-outer-padding;
@@ -97,11 +96,11 @@ header {
 
   .home-btn {
     align-items: center;
-    background-color: $block-background-color;
+    background-color: var(--block-background-color);
     border-radius: $btn-border-radius;
-    box-shadow: $menu-shadow-size $shadow-color;
+    box-shadow: $menu-shadow-size var(--shadow-color);
     box-sizing: border-box;
-    color: $text-color;
+    color: var(--text-color);
     display: flex;
     flex-direction: row;
     flex-shrink: 0;
@@ -109,7 +108,7 @@ header {
     padding: 7px $body-padding;
 
     img {
-      filter: $text-colorizer;
+      filter: var(--text-colorizer);
       height: 1.2em;
       margin-right: 5px;
       width: 1.2em;
@@ -120,18 +119,18 @@ header {
     }
 
     &:hover {
-      background-color: $btn-background-color;
-      color: $btn-text-color;
+      background-color: var(--btn-background-color);
+      color: var(--btn-text-color);
 
       img {
-        filter: $btn-text-colorizer;
+        filter: var(--btn-text-colorizer);
       }
     }
   }
 
   .search {
-    background-color: $block-background-color;
-    box-shadow: $menu-shadow-size $shadow-color;
+    background-color: var(--block-background-color);
+    box-shadow: $menu-shadow-size var(--shadow-color);
     height: 100%;
     margin: 0 0 0 auto;
     width: 250px;
@@ -162,7 +161,7 @@ header {
 }
 
 #header-public {
-  background-color: $background-color;
+  background-color: var(--background-color);
   margin: 0 auto;
   position: sticky;
   top: 0;
diff --git a/src/components/StaticPage.vue b/src/components/StaticPage.vue
index 0a847c1..caa8978 100644
--- a/src/components/StaticPage.vue
+++ b/src/components/StaticPage.vue
@@ -12,7 +12,6 @@
 
 <style scoped lang="scss">
 @import "../styles/layout";
-@import "../styles/theme";
 
 .page {
   align-items: flex-start;
@@ -34,7 +33,7 @@
   top: $body-padding;
 
   img {
-    filter: $text-colorizer;
+    filter: var(--text-colorizer);
     height: 40px;
     width: 40px;
   }
diff --git a/src/components/SubscriptionEthereum.vue b/src/components/SubscriptionEthereum.vue
index 5c54a88..07dd03a 100644
--- a/src/components/SubscriptionEthereum.vue
+++ b/src/components/SubscriptionEthereum.vue
@@ -379,7 +379,7 @@ async function onCancelSubscription() {
   gap: $block-inner-padding;
 
   .profile-card {
-    background-color: $block-background-color;
+    background-color: var(--block-background-color);
     border-radius: $block-border-radius;
     display: flex;
     flex-basis: 50%;
@@ -390,7 +390,7 @@ async function onCancelSubscription() {
   }
 
   .separator img {
-    filter: $text-colorizer;
+    filter: var(--text-colorizer);
     height: $icon-size;
     min-width: $icon-size;
     object-fit: contain;
@@ -420,7 +420,7 @@ async function onCancelSubscription() {
 }
 
 .info {
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: $block-border-radius;
   display: flex;
   flex-direction: column;
@@ -437,7 +437,7 @@ async function onCancelSubscription() {
   }
 
   .status {
-    color: $secondary-text-color;
+    color: var(--secondary-text-color);
   }
 }
 
@@ -475,20 +475,20 @@ async function onCancelSubscription() {
   }
 
   .token-balance {
-    color: $secondary-text-color;
+    color: var(--secondary-text-color);
 
     output.loading {
       opacity: 0.5;
     }
 
     img {
-      filter: $secondary-text-colorizer;
+      filter: var(--secondary-text-colorizer);
       height: 1em;
       min-width: 1em;
     }
 
     &.error {
-      color: $text-color;
+      color: var(--text-color);
     }
   }
 
diff --git a/src/components/SubscriptionMonero.vue b/src/components/SubscriptionMonero.vue
index d836093..4fb8018 100644
--- a/src/components/SubscriptionMonero.vue
+++ b/src/components/SubscriptionMonero.vue
@@ -320,7 +320,7 @@ function getPaymentMinutesLeft(invoice: Invoice): number {
   gap: $block-inner-padding;
 
   .profile-card {
-    background-color: $block-background-color;
+    background-color: var(--block-background-color);
     border-radius: $block-border-radius;
     display: flex;
     flex-basis: 50%;
@@ -331,7 +331,7 @@ function getPaymentMinutesLeft(invoice: Invoice): number {
   }
 
   .separator img {
-    filter: $text-colorizer;
+    filter: var(--text-colorizer);
     height: $icon-size;
     min-width: $icon-size;
     object-fit: contain;
@@ -364,7 +364,7 @@ function getPaymentMinutesLeft(invoice: Invoice): number {
 }
 
 .info {
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: $block-border-radius;
   display: flex;
   flex-direction: column;
@@ -381,7 +381,7 @@ function getPaymentMinutesLeft(invoice: Invoice): number {
   }
 
   .status {
-    color: $secondary-text-color;
+    color: var(--secondary-text-color);
   }
 }
 
diff --git a/src/components/SubscriptionSettingsEthereum.vue b/src/components/SubscriptionSettingsEthereum.vue
index bbaac2c..2b5a842 100644
--- a/src/components/SubscriptionSettingsEthereum.vue
+++ b/src/components/SubscriptionSettingsEthereum.vue
@@ -330,7 +330,7 @@ async function onWithdrawReceived() {
 }
 
 .info {
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: $block-border-radius;
   display: flex;
   flex-direction: column;
diff --git a/src/components/SubscriptionSettingsMonero.vue b/src/components/SubscriptionSettingsMonero.vue
index c938d1e..4743505 100644
--- a/src/components/SubscriptionSettingsMonero.vue
+++ b/src/components/SubscriptionSettingsMonero.vue
@@ -150,10 +150,9 @@ async function saveSubscriptionSettings() {
 
 <style scoped lang="scss">
 @import "../styles/layout";
-@import "../styles/theme";
 
 .info {
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: $block-border-radius;
   display: flex;
   flex-direction: column;
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 1efbaad..764dbe1 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -24,10 +24,10 @@
 }
 
 @mixin block-link {
-  color: $block-link-color;
+  color: var(--block-link-color);
 
   &:hover {
-    color: $block-link-hover-color;
+    color: var(--block-link-hover-color);
   }
 }
 
@@ -38,7 +38,7 @@
   margin: 0 $block-outer-padding calc($block-outer-padding / 2);
 
   img {
-    filter: $text-colorizer;
+    filter: var(--text-colorizer);
     height: $icon-size;
     margin-right: calc($icon-size / 2);
     min-width: $icon-size;
@@ -55,12 +55,12 @@
 @mixin post-icon {
   .icon {
     align-items: center;
-    color: $secondary-text-color;
+    color: var(--secondary-text-color);
     display: flex;
     gap: $whitespace;
 
     img {
-      filter: $secondary-text-colorizer;
+      filter: var(--secondary-text-colorizer);
       height: $icon-size;
       min-width: $icon-size;
       object-fit: contain;
@@ -72,16 +72,16 @@
   a.icon:hover,
   button.icon:hover,
   .icon.highlighted {
-    color: $secondary-text-hover-color;
+    color: var(--secondary-text-hover-color);
 
     img {
-      filter: $secondary-text-hover-colorizer;
+      filter: var(--secondary-text-hover-colorizer);
     }
   }
 
   button.icon[disabled] {
     img {
-      filter: $secondary-text-colorizer;
+      filter: var(--secondary-text-colorizer);
     }
   }
 
@@ -98,10 +98,10 @@
   position: relative;
 
   menu.dropdown-menu {
-    background-color: $block-background-color;
-    border: 1px solid $separator-color;
+    background-color: var(--block-background-color);
+    border: 1px solid var(--separator-color);
     border-radius: $btn-border-radius;
-    box-shadow: $menu-shadow-size $shadow-color;
+    box-shadow: $menu-shadow-size var(--shadow-color);
     display: flex;
     flex-direction: column;
     gap: calc($block-inner-padding / 2);
@@ -114,13 +114,13 @@
 
 @mixin block-btn {
   .btn {
-    background-color: $btn-background-color;
+    background-color: var(--btn-background-color);
     border: 1px solid transparent;
     box-shadow: none;
 
     &:hover {
       background-color: transparent;
-      border: 1px solid $btn-background-color;
+      border: 1px solid var(--btn-background-color);
     }
   }
 }
@@ -141,7 +141,7 @@
     }
 
     .sub-label {
-      color: $secondary-text-color;
+      color: var(--secondary-text-color);
       font-size: 12px;
       font-weight: normal;
       margin-top: 3px;
diff --git a/src/views/LandingPage.vue b/src/views/LandingPage.vue
index 67dcad1..1961aba 100644
--- a/src/views/LandingPage.vue
+++ b/src/views/LandingPage.vue
@@ -454,7 +454,7 @@ $landing-text-color: #fff;
     justify-content: center;
 
     img {
-      filter: $btn-text-colorizer;
+      filter: var(--btn-text-colorizer);
       height: 1em;
       width: 1em;
     }
diff --git a/src/views/NotificationList.vue b/src/views/NotificationList.vue
index 9c0ad52..d8829c5 100644
--- a/src/views/NotificationList.vue
+++ b/src/views/NotificationList.vue
@@ -137,10 +137,10 @@ async function loadNextPage() {
 
 .profile {
   align-items: center;
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: $block-border-radius;
   box-sizing: border-box;
-  color: $secondary-text-color;
+  color: var(--secondary-text-color);
   display: flex;
   gap: calc($block-inner-padding / 2);
   padding: $block-inner-padding;
@@ -154,7 +154,7 @@ async function loadNextPage() {
   }
 
   .display-name {
-    color: $text-color;
+    color: var(--text-color);
     font-weight: bold;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/views/PostOverlay.vue b/src/views/PostOverlay.vue
index b84b6c8..790a44d 100644
--- a/src/views/PostOverlay.vue
+++ b/src/views/PostOverlay.vue
@@ -130,7 +130,7 @@ const imageUrl = $computed<string | null>(() => {
 $page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
 
 .post-overlay {
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -153,7 +153,7 @@ $page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
     width: $page-width;
 
     img {
-      filter: $text-colorizer;
+      filter: var(--text-colorizer);
       height: 40px;
       width: 40px;
     }
@@ -207,7 +207,7 @@ $page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
   max-width: 150px;
 
   img {
-    filter: $text-colorizer;
+    filter: var(--text-colorizer);
     height: 20px;
     width: 20px;
   }
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index d2290e3..790fbf5 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -642,12 +642,12 @@ $avatar-size: 170px;
 .profile-block {
   @include block-btn;
 
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: $block-border-radius;
   margin-bottom: $block-outer-padding;
 
   .profile-header {
-    background-color: $btn-background-color;
+    background-color: var(--btn-background-color);
     border-radius: $block-border-radius $block-border-radius 0 0;
     height: 200px;
 
@@ -697,7 +697,7 @@ $avatar-size: 170px;
   }
 
   .badge {
-    border: 1px solid $btn-background-color;
+    border: 1px solid var(--btn-background-color);
     border-radius: $btn-border-radius;
     font-size: 14px;
     line-height: 30px;
@@ -710,7 +710,7 @@ $avatar-size: 170px;
 
     /* stylelint-disable-next-line selector-max-compound-selectors */
     button img {
-      filter: $link-colorizer;
+      filter: var(--link-colorizer);
       height: 32px;
       min-width: 20px;
       object-fit: none;
@@ -718,7 +718,7 @@ $avatar-size: 170px;
 
       /* stylelint-disable-next-line selector-max-compound-selectors */
       &:hover {
-        filter: $link-hover-colorizer;
+        filter: var(--link-hover-colorizer);
       }
     }
 
@@ -745,7 +745,7 @@ $avatar-size: 170px;
     }
 
     .actor-address {
-      color: $secondary-text-color;
+      color: var(--secondary-text-color);
       overflow-x: hidden;
       text-overflow: ellipsis;
       user-select: all;
@@ -766,7 +766,7 @@ $avatar-size: 170px;
   img {
     $icon-size: 1em;
 
-    filter: $btn-text-colorizer;
+    filter: var(--btn-text-colorizer);
     height: $icon-size;
     min-width: $icon-size;
     width: $icon-size;
@@ -774,7 +774,7 @@ $avatar-size: 170px;
 
   &:hover {
     img {
-      filter: $text-colorizer;
+      filter: var(--text-colorizer);
     }
   }
 }
@@ -789,10 +789,10 @@ $avatar-size: 170px;
 }
 
 .extra-fields {
-  border-bottom: 1px solid $separator-color;
+  border-bottom: 1px solid var(--separator-color);
 
   .field {
-    border-top: 1px solid $separator-color;
+    border-top: 1px solid var(--separator-color);
     display: flex;
     gap: calc($block-inner-padding / 2);
     padding: calc($block-inner-padding / 2) 0;
@@ -817,7 +817,7 @@ $avatar-size: 170px;
 
     /* stylelint-disable-next-line selector-max-compound-selectors */
     .verified-icon img {
-      filter: $text-colorizer;
+      filter: var(--text-colorizer);
       height: 1em;
       min-width: 1em;
       width: 1em;
@@ -847,7 +847,7 @@ $avatar-size: 170px;
 
     .label {
       align-self: flex-end;
-      color: $secondary-text-color;
+      color: var(--secondary-text-color);
     }
   }
 }
@@ -865,7 +865,7 @@ $avatar-size: 170px;
     width: 100%;
 
     &.active {
-      background-color: $block-background-color;
+      background-color: var(--block-background-color);
       font-weight: bold;
     }
   }
diff --git a/src/views/ProfileDirectory.vue b/src/views/ProfileDirectory.vue
index 793ad73..09ae7e8 100644
--- a/src/views/ProfileDirectory.vue
+++ b/src/views/ProfileDirectory.vue
@@ -69,7 +69,7 @@ async function loadNextPage() {
 }
 
 .profile-list-item {
-  color: $text-color;
+  color: var(--text-color);
 }
 
 .next-btn {
diff --git a/src/views/ProfileForm.vue b/src/views/ProfileForm.vue
index 3608794..b6b1a76 100644
--- a/src/views/ProfileForm.vue
+++ b/src/views/ProfileForm.vue
@@ -268,14 +268,14 @@ async function save() {
     width: $icon-size * 2;
 
     .remove-icon {
-      background-color: $block-background-color;
+      background-color: var(--block-background-color);
       border-radius: 50%;
       height: $icon-size;
       width: $icon-size;
 
       /* stylelint-disable-next-line selector-max-compound-selectors */
       img {
-        filter: $link-hover-colorizer;
+        filter: var(--link-hover-colorizer);
       }
     }
   }
@@ -294,7 +294,7 @@ async function save() {
   display: flex;
 
   img {
-    filter: $link-colorizer;
+    filter: var(--link-colorizer);
     height: $icon-size;
     margin-right: 5px;
     vertical-align: middle;
@@ -302,7 +302,7 @@ async function save() {
   }
 
   &:hover img {
-    filter: $link-hover-colorizer;
+    filter: var(--link-hover-colorizer);
   }
 }
 </style>
diff --git a/src/views/SearchResultList.vue b/src/views/SearchResultList.vue
index ba7573d..42338fd 100644
--- a/src/views/SearchResultList.vue
+++ b/src/views/SearchResultList.vue
@@ -86,11 +86,10 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 @import "../styles/layout";
-@import "../styles/theme";
 
 .search-message,
 .search-result-list {
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: $block-border-radius;
   box-sizing: border-box;
 }
@@ -108,7 +107,7 @@ onMounted(async () => {
 }
 
 .search-result {
-  border-bottom: 1px solid $separator-color;
+  border-bottom: 1px solid var(--separator-color);
   display: block;
 
   &:last-child {
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index c2b01a8..35a29de 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -135,7 +135,7 @@ form {
   }
 
   a {
-    color: $block-link-color;
+    color: var(--block-link-color);
   }
 }
 
diff --git a/src/views/TagTimeline.vue b/src/views/TagTimeline.vue
index 9f8aa67..0c71b25 100644
--- a/src/views/TagTimeline.vue
+++ b/src/views/TagTimeline.vue
@@ -48,7 +48,7 @@ async function loadNextPage(maxId: string) {
 @import "../styles/theme";
 
 .tag-name {
-  background-color: $block-background-color;
+  background-color: var(--block-background-color);
   border-radius: $block-border-radius;
   margin-bottom: $block-outer-padding;
   padding: $block-inner-padding;