diff --git a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
index e151b49..ac76c74 100644
--- a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
+++ b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
@@ -29,7 +29,6 @@
     --color-secondary-separator: #eddbe3;
 
     --color-content-bg: #ffffff;
-    --color-content-bg-translucent: rgba(255, 255, 255, 0.75);
     --color-content-fg: #444a5a;
     --color-content-fg-bold: #000000;
     --color-content-fg-muted: #8b92a7;
@@ -63,7 +62,6 @@
         --color-secondary-separator: #2e2328;
 
         --color-content-bg: var(--color-bg);
-        --color-content-bg-translucent: rgba(3, 3, 3, .65);
         --color-content-fg: var(--color-fg);
         --color-content-fg-bold: #ffffff;
         --color-content-fg-muted: #737373;
@@ -3158,7 +3156,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .column-header,
 .app-body .column-back-button {
-    background-color: rgba(255, 255, 255, .9);
+    background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%);
     color: var(--color-content-fg);
     border-right: 1px solid var(--color-lines);
     border-left: 1px solid var(--color-lines);
@@ -3172,12 +3170,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     -webkit-backdrop-filter: blur(20px);
     backdrop-filter: blur(20px);
 }
-@media (prefers-color-scheme: dark) {
-    .app-body .column-header,
-    .app-body .column-back-button {
-        background-color: rgba(3, 3, 3, .65);
-    }
-}
 .app-body .column-header__button,
 .app-body .column-header__back-button {
     background-color: transparent;
@@ -3375,7 +3367,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     .app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */
         -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px);
-        background-color: var(--color-content-bg-translucent);
+        background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%);
         border-bottom: 1px solid var(--color-lines-translucent);
         content: "";
         height: 55px;
@@ -3740,13 +3732,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .column-link span {
     vertical-align: middle;
 }
-.app-body .column-link .fa::before {
-    position: relative;
-    top: 1px;
-}
-.app-body .column-link .fa.fa-cog {
-    transform: scale(1) translate(1px, -1px);
-}
 .app-body .list-panel {
     padding: 5px 9px 50px 27px;
     margin: 0 0 5px;
@@ -3783,7 +3768,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         padding-bottom: env(safe-area-inset-bottom);
         flex-direction: row;
         overflow-x: auto;
-        background-color: rgba(255, 255, 255, 0.75);
+        background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%);
         border-top: 1px solid var(--color-lines-translucent);
         border-left: 0;
         -webkit-backdrop-filter: blur(20px);
@@ -3796,7 +3781,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         bottom: 0;
         width: 17vw;
         height: calc(4.2em + env(safe-area-inset-bottom) - 1px);
-        background-image: linear-gradient(to right, transparent, var(--color-bg) 75.63%);
+        background-image: linear-gradient(to right, transparent, var(--color-content-bg) 75.63%);
         background-color: transparent;
         z-index: 2;
     }
@@ -3894,13 +3879,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         margin-left: -55px;
     }
 }
-@media screen and (max-width:1174px) {
-    @media (prefers-color-scheme: dark) {
-        .app-body .columns-area__panels__pane--navigational .navigation-panel {
-            background-color: rgba(3, 3, 3, .65);
-        }
-    }
-}
 
 
 /* 👤 Account view
@@ -4804,7 +4782,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     }
 }
 .app-body .notification-bar {
-    background-color: var(--color-content-bg-translucent);
+    background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%);
     color: var(--color-content-fg);
     border: 1px solid var(--color-lines-translucent);
     box-shadow: var(--dropdown-shadow);
diff --git a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
index 613e753..90a8770 100644
--- a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
+++ b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
@@ -29,7 +29,6 @@
     --color-secondary-separator: #dfdbed;
 
     --color-content-bg: #ffffff;
-    --color-content-bg-translucent: rgba(255, 255, 255, 0.75);
     --color-content-fg: #444a5a;
     --color-content-fg-bold: #000000;
     --color-content-fg-muted: #8b92a7;
@@ -63,7 +62,6 @@
         --color-secondary-separator: #26232e;
 
         --color-content-bg: var(--color-bg);
-        --color-content-bg-translucent: rgba(3, 3, 3, .65);
         --color-content-fg: var(--color-fg);
         --color-content-fg-bold: #ffffff;
         --color-content-fg-muted: #737373;
@@ -3158,7 +3156,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .column-header,
 .app-body .column-back-button {
-    background-color: rgba(255, 255, 255, .9);
+    background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%);
     color: var(--color-content-fg);
     border-right: 1px solid var(--color-lines);
     border-left: 1px solid var(--color-lines);
@@ -3172,12 +3170,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     -webkit-backdrop-filter: blur(20px);
     backdrop-filter: blur(20px);
 }
-@media (prefers-color-scheme: dark) {
-    .app-body .column-header,
-    .app-body .column-back-button {
-        background-color: rgba(3, 3, 3, .65);
-    }
-}
 .app-body .column-header__button,
 .app-body .column-header__back-button {
     background-color: transparent;
@@ -3375,7 +3367,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     .app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */
         -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px);
-        background-color: var(--color-content-bg-translucent);
+        background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%);
         border-bottom: 1px solid var(--color-lines-translucent);
         content: "";
         height: 55px;
@@ -3740,13 +3732,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .column-link span {
     vertical-align: middle;
 }
-.app-body .column-link .fa::before {
-    position: relative;
-    top: 1px;
-}
-.app-body .column-link .fa.fa-cog {
-    transform: scale(1) translate(1px, -1px);
-}
 .app-body .list-panel {
     padding: 5px 9px 50px 27px;
     margin: 0 0 5px;
@@ -3783,7 +3768,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         padding-bottom: env(safe-area-inset-bottom);
         flex-direction: row;
         overflow-x: auto;
-        background-color: rgba(255, 255, 255, 0.75);
+        background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%);
         border-top: 1px solid var(--color-lines-translucent);
         border-left: 0;
         -webkit-backdrop-filter: blur(20px);
@@ -3796,7 +3781,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         bottom: 0;
         width: 17vw;
         height: calc(4.2em + env(safe-area-inset-bottom) - 1px);
-        background-image: linear-gradient(to right, transparent, var(--color-bg) 75.63%);
+        background-image: linear-gradient(to right, transparent, var(--color-content-bg) 75.63%);
         background-color: transparent;
         z-index: 2;
     }
@@ -3894,13 +3879,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         margin-left: -55px;
     }
 }
-@media screen and (max-width:1174px) {
-    @media (prefers-color-scheme: dark) {
-        .app-body .columns-area__panels__pane--navigational .navigation-panel {
-            background-color: rgba(3, 3, 3, .65);
-        }
-    }
-}
 
 
 /* 👤 Account view
@@ -4804,7 +4782,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     }
 }
 .app-body .notification-bar {
-    background-color: var(--color-content-bg-translucent);
+    background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%);
     color: var(--color-content-fg);
     border: 1px solid var(--color-lines-translucent);
     box-shadow: var(--dropdown-shadow);
diff --git a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss
index 806a433..737f0cc 100644
--- a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss
+++ b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss
@@ -29,7 +29,6 @@
     --color-secondary-separator: #ede3db;
 
     --color-content-bg: #ffffff;
-    --color-content-bg-translucent: rgba(255, 255, 255, 0.75);
     --color-content-fg: #444a5a;
     --color-content-fg-bold: #000000;
     --color-content-fg-muted: #8b92a7;
@@ -63,7 +62,6 @@
         --color-secondary-separator: #25201c;
 
         --color-content-bg: var(--color-bg);
-        --color-content-bg-translucent: rgba(3, 3, 3, .65);
         --color-content-fg: var(--color-fg);
         --color-content-fg-bold: #ffffff;
         --color-content-fg-muted: #737373;
@@ -3158,7 +3156,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .column-header,
 .app-body .column-back-button {
-    background-color: rgba(255, 255, 255, .9);
+    background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%);
     color: var(--color-content-fg);
     border-right: 1px solid var(--color-lines);
     border-left: 1px solid var(--color-lines);
@@ -3172,12 +3170,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     -webkit-backdrop-filter: blur(20px);
     backdrop-filter: blur(20px);
 }
-@media (prefers-color-scheme: dark) {
-    .app-body .column-header,
-    .app-body .column-back-button {
-        background-color: rgba(3, 3, 3, .65);
-    }
-}
 .app-body .column-header__button,
 .app-body .column-header__back-button {
     background-color: transparent;
@@ -3375,7 +3367,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     .app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */
         -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px);
-        background-color: var(--color-content-bg-translucent);
+        background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%);
         border-bottom: 1px solid var(--color-lines-translucent);
         content: "";
         height: 55px;
@@ -3740,13 +3732,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .column-link span {
     vertical-align: middle;
 }
-.app-body .column-link .fa::before {
-    position: relative;
-    top: 1px;
-}
-.app-body .column-link .fa.fa-cog {
-    transform: scale(1) translate(1px, -1px);
-}
 .app-body .list-panel {
     padding: 5px 9px 50px 27px;
     margin: 0 0 5px;
@@ -3783,7 +3768,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         padding-bottom: env(safe-area-inset-bottom);
         flex-direction: row;
         overflow-x: auto;
-        background-color: rgba(255, 255, 255, 0.75);
+        background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%);
         border-top: 1px solid var(--color-lines-translucent);
         border-left: 0;
         -webkit-backdrop-filter: blur(20px);
@@ -3796,7 +3781,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         bottom: 0;
         width: 17vw;
         height: calc(4.2em + env(safe-area-inset-bottom) - 1px);
-        background-image: linear-gradient(to right, transparent, var(--color-bg) 75.63%);
+        background-image: linear-gradient(to right, transparent, var(--color-content-bg) 75.63%);
         background-color: transparent;
         z-index: 2;
     }
@@ -3894,13 +3879,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         margin-left: -55px;
     }
 }
-@media screen and (max-width:1174px) {
-    @media (prefers-color-scheme: dark) {
-        .app-body .columns-area__panels__pane--navigational .navigation-panel {
-            background-color: rgba(3, 3, 3, .65);
-        }
-    }
-}
 
 
 /* 👤 Account view
@@ -4804,7 +4782,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     }
 }
 .app-body .notification-bar {
-    background-color: var(--color-content-bg-translucent);
+    background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%);
     color: var(--color-content-fg);
     border: 1px solid var(--color-lines-translucent);
     box-shadow: var(--dropdown-shadow);