diff --git a/app/javascript/mastodon/features/about/index.jsx b/app/javascript/mastodon/features/about/index.jsx
index 5197d338cd..65a36520d6 100644
--- a/app/javascript/mastodon/features/about/index.jsx
+++ b/app/javascript/mastodon/features/about/index.jsx
@@ -189,18 +189,20 @@ class About extends PureComponent {
               <>
                 <p><FormattedMessage id='about.domain_blocks.preamble' defaultMessage='Mastodon generally allows you to view content from and interact with users from any other server in the fediverse. These are the exceptions that have been made on this particular server.' /></p>
 
-                <div className='about__domain-blocks'>
-                  {domainBlocks.get('items').map(block => (
-                    <div className='about__domain-blocks__domain' key={block.get('domain')}>
-                      <div className='about__domain-blocks__domain__header'>
-                        <h6><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></h6>
-                        <span className='about__domain-blocks__domain__type' title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span>
-                      </div>
+                {domainBlocks.get('items').size > 0 && (
+                  <div className='about__domain-blocks'>
+                    {domainBlocks.get('items').map(block => (
+                      <div className='about__domain-blocks__domain' key={block.get('domain')}>
+                        <div className='about__domain-blocks__domain__header'>
+                          <h6><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></h6>
+                          <span className='about__domain-blocks__domain__type' title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span>
+                        </div>
 
-                      <p>{(block.get('comment') || '').length > 0 ? block.get('comment') : <FormattedMessage id='about.domain_blocks.no_reason_available' defaultMessage='Reason not available' />}</p>
-                    </div>
-                  ))}
-                </div>
+                        <p>{(block.get('comment') || '').length > 0 ? block.get('comment') : <FormattedMessage id='about.domain_blocks.no_reason_available' defaultMessage='Reason not available' />}</p>
+                      </div>
+                    ))}
+                  </div>
+                )}
               </>
             ) : (
               <p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index e3872283e1..675a01dd36 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -21,25 +21,6 @@ html {
 }
 
 // Change default background colors of columns
-.column > .scrollable,
-.getting-started,
-.column-inline-form,
-.regeneration-indicator {
-  background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
-  border-top: 0;
-}
-
-.error-column {
-  border: 1px solid lighten($ui-base-color, 8%);
-}
-
-.column > .scrollable.about {
-  border-top: 1px solid lighten($ui-base-color, 8%);
-}
-
-.about__meta,
-.about__section__title,
 .interaction-modal {
   background: $white;
   border: 1px solid lighten($ui-base-color, 8%);
@@ -53,37 +34,10 @@ html {
   background: lighten($ui-base-color, 12%);
 }
 
-.filter-form {
-  background: $white;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-}
-
-.column-back-button,
-.column-header {
-  background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border-top: 0;
-  }
-
-  &--slim-button {
-    top: -50px;
-    right: 0;
-  }
-}
-
-.column-header__back-button,
-.column-header__button,
-.column-header__button.active,
 .account__header {
   background: $white;
 }
 
-.column-header {
-  border-bottom: 0;
-}
-
 .column-header__button.active {
   color: $ui-highlight-color;
 
@@ -91,7 +45,6 @@ html {
   &:active,
   &:focus {
     color: $ui-highlight-color;
-    background: $white;
   }
 }
 
@@ -117,25 +70,6 @@ html {
   }
 }
 
-.column-subheading {
-  background: darken($ui-base-color, 4%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-}
-
-.getting-started,
-.scrollable {
-  .column-link {
-    background: $white;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
-
-    &:hover,
-    &:active,
-    &:focus {
-      background: $ui-base-color;
-    }
-  }
-}
-
 .getting-started .navigation-bar {
   border-top: 1px solid lighten($ui-base-color, 8%);
   border-bottom: 1px solid lighten($ui-base-color, 8%);
@@ -168,23 +102,6 @@ html {
   border-bottom: 0;
 }
 
-.notification__filter-bar {
-  border: 1px solid lighten($ui-base-color, 8%);
-  border-top: 0;
-}
-
-.drawer__header,
-.drawer__inner {
-  background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
-}
-
-.drawer__inner__mastodon {
-  background: $white
-    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
-    no-repeat bottom / 100% auto;
-}
-
 .upload-progress__backdrop {
   background: $ui-base-color;
 }
@@ -194,11 +111,6 @@ html {
   background: lighten($white, 4%);
 }
 
-.detailed-status,
-.detailed-status__action-bar {
-  background: $white;
-}
-
 // Change the background colors of status__content__spoiler-link
 .reply-indicator__content .status__content__spoiler-link,
 .status__content .status__content__spoiler-link {
diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index 3cf5561ca3..09a75a834b 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -59,4 +59,8 @@ $emojis-requiring-inversion: 'chains';
 .theme-mastodon-light {
   --dropdown-border-color: #d9e1e8;
   --dropdown-background-color: #fff;
+  --background-border-color: #d9e1e8;
+  --background-color: #fff;
+  --background-color-tint: rgba(255, 255, 255, 90%);
+  --background-filter: blur(10px);
 }
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index 9d23ef41ab..48fe9449f0 100644
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -26,7 +26,7 @@ $fluid-breakpoint: $maximum-width + 20px;
 
   li {
     position: relative;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--background-border-color);
     padding: 1em 1.75em;
     padding-inline-start: 3em;
     font-weight: 500;
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index ef9c2fd889..60e3cc19dd 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -1378,8 +1378,8 @@ a.sparkline {
 }
 
 .account-card {
-  background: $ui-base-color;
   border-radius: 4px;
+  border: 1px solid lighten($ui-base-color, 8%);
 
   &__permalink {
     color: inherit;
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 28dad81da5..2e7d5e5e9c 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -8,7 +8,7 @@
 
 body {
   font-family: $font-sans-serif, sans-serif;
-  background: darken($ui-base-color, 8%);
+  background: var(--background-color);
   font-size: 13px;
   line-height: 18px;
   font-weight: 400;
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index faa775ec4b..047d9d9739 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1311,7 +1311,7 @@ body > [data-popper-placement] {
   box-sizing: border-box;
   width: 100%;
   clear: both;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
 
   &__button {
     display: inline;
@@ -1332,19 +1332,14 @@ body > [data-popper-placement] {
 .focusable {
   &:focus {
     outline: 0;
-    background: lighten($ui-base-color, 4%);
-
-    .detailed-status,
-    .detailed-status__action-bar {
-      background: lighten($ui-base-color, 8%);
-    }
+    background: rgba($ui-highlight-color, 0.05);
   }
 }
 
 .status {
   padding: 16px;
   min-height: 54px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
   cursor: auto;
 
   @keyframes fade {
@@ -1588,10 +1583,10 @@ body > [data-popper-placement] {
 }
 
 .status__wrapper-direct {
-  background: mix($ui-base-color, $ui-highlight-color, 95%);
+  background: rgba($ui-highlight-color, 0.05);
 
   &:focus {
-    background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
+    background: rgba($ui-highlight-color, 0.05);
   }
 
   .status__prepend {
@@ -1616,9 +1611,8 @@ body > [data-popper-placement] {
 }
 
 .detailed-status {
-  background: lighten($ui-base-color, 4%);
   padding: 16px;
-  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid var(--background-border-color);
 
   &--flex {
     display: flex;
@@ -1678,9 +1672,8 @@ body > [data-popper-placement] {
 }
 
 .detailed-status__action-bar {
-  background: lighten($ui-base-color, 4%);
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--background-border-color);
   display: flex;
   flex-direction: row;
   padding: 10px 0;
@@ -1735,7 +1728,7 @@ body > [data-popper-placement] {
 
 .domain {
   padding: 10px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
 
   .domain__domain-name {
     flex: 1 1 auto;
@@ -1759,7 +1752,7 @@ body > [data-popper-placement] {
 
 .account {
   padding: 16px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
 
   .account__display-name {
     flex: 1 1 auto;
@@ -2017,7 +2010,7 @@ a.account__display-name {
 
 .notification__report {
   padding: 16px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
   display: flex;
   gap: 10px;
 
@@ -2276,6 +2269,7 @@ a.account__display-name {
 
 .dropdown-menu {
   background: var(--dropdown-background-color);
+  backdrop-filter: var(--background-filter);
   border: 1px solid var(--dropdown-border-color);
   padding: 4px;
   border-radius: 4px;
@@ -2466,6 +2460,7 @@ $ui-header-height: 55px;
   z-index: 3;
   justify-content: space-between;
   align-items: center;
+  backdrop-filter: var(--background-filter);
 
   &__logo {
     display: inline-flex;
@@ -2514,7 +2509,8 @@ $ui-header-height: 55px;
 }
 
 .tabs-bar__wrapper {
-  background: darken($ui-base-color, 8%);
+  background: var(--background-color-tint);
+  backdrop-filter: var(--background-filter);
   position: sticky;
   top: $ui-header-height;
   z-index: 2;
@@ -2550,8 +2546,15 @@ $ui-header-height: 55px;
   flex-direction: column;
 
   > .scrollable {
-    background: $ui-base-color;
+    border: 1px solid var(--background-border-color);
+    border-top: 0;
     border-radius: 0 0 4px 4px;
+
+    &.about,
+    &.privacy-policy {
+      border-top: 1px solid var(--background-border-color);
+      border-radius: 4px;
+    }
   }
 }
 
@@ -2581,7 +2584,6 @@ $ui-header-height: 55px;
   font-size: 16px;
   align-items: center;
   justify-content: center;
-  border-bottom: 2px solid transparent;
 }
 
 .column,
@@ -2710,8 +2712,7 @@ $ui-header-height: 55px;
 
     .navigation-panel {
       margin: 0;
-      background: $ui-base-color;
-      border-inline-start: 1px solid lighten($ui-base-color, 8%);
+      border-inline-start: 1px solid var(--background-border-color);
       height: 100vh;
     }
 
@@ -2729,8 +2730,15 @@ $ui-header-height: 55px;
 
   .layout-single-column .ui__header {
     display: flex;
-    background: $ui-base-color;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    background: var(--background-color-tint);
+    border-bottom: 1px solid var(--background-border-color);
+  }
+
+  .column > .scrollable,
+  .tabs-bar__wrapper .column-header,
+  .tabs-bar__wrapper .column-back-button {
+    border-left: 0;
+    border-right: 0;
   }
 
   .column-header,
@@ -2788,7 +2796,7 @@ $ui-header-height: 55px;
     inset-inline-start: 9px;
     top: -13px;
     background: $ui-highlight-color;
-    border: 2px solid lighten($ui-base-color, 8%);
+    border: 2px solid var(--background-color);
     padding: 1px 6px;
     border-radius: 6px;
     font-size: 10px;
@@ -2810,7 +2818,7 @@ $ui-header-height: 55px;
 }
 
 .column-link--transparent .icon-with-badge__badge {
-  border-color: darken($ui-base-color, 8%);
+  border-color: var(--background-color);
 }
 
 .column-title {
@@ -3160,7 +3168,7 @@ $ui-header-height: 55px;
     flex: 0 0 auto;
     border: 0;
     background: transparent;
-    border-top: 1px solid lighten($ui-base-color, 4%);
+    border-top: 1px solid var(--background-border-color);
     margin: 10px 0;
   }
 
@@ -3177,13 +3185,14 @@ $ui-header-height: 55px;
   overflow: hidden;
   display: flex;
   border-radius: 4px;
+  border: 1px solid var(--background-border-color);
 }
 
 .drawer__inner {
   position: absolute;
   top: 0;
   inset-inline-start: 0;
-  background: darken($ui-base-color, 4%);
+  background: var(--background-color);
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -3192,15 +3201,11 @@ $ui-header-height: 55px;
   overflow-y: auto;
   width: 100%;
   height: 100%;
-
-  &.darker {
-    background: $ui-base-color;
-  }
 }
 
 .drawer__inner__mastodon {
-  background: darken($ui-base-color, 4%)
-    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
+  background: var(--background-color)
+    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(darken($ui-base-color, 4%))}"/></svg>')
     no-repeat bottom / 100% auto;
   flex: 1;
   min-height: 47px;
@@ -3224,7 +3229,7 @@ $ui-header-height: 55px;
 .drawer__header {
   flex: 0 0 auto;
   font-size: 16px;
-  background: darken($ui-base-color, 4%);
+  border: 1px solid var(--background-border-color);
   margin-bottom: 10px;
   display: flex;
   flex-direction: row;
@@ -3234,7 +3239,7 @@ $ui-header-height: 55px;
   a:hover,
   a:focus,
   a:active {
-    background: $ui-base-color;
+    color: $primary-text-color;
   }
 }
 
@@ -3279,15 +3284,14 @@ $ui-header-height: 55px;
 .column-back-button {
   box-sizing: border-box;
   width: 100%;
-  background: $ui-base-color;
+  background: transparent;
+  border: 1px solid var(--background-border-color);
   border-radius: 4px 4px 0 0;
   color: $highlight-text-color;
   cursor: pointer;
   flex: 0 0 auto;
   font-size: 16px;
   line-height: inherit;
-  border: 0;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
   text-align: unset;
   padding: 13px;
   margin: 0;
@@ -3300,13 +3304,17 @@ $ui-header-height: 55px;
   &:hover {
     text-decoration: underline;
   }
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-top: 0;
+  }
 }
 
 .column-header__back-button {
   display: flex;
   align-items: center;
   gap: 5px;
-  background: $ui-base-color;
+  background: transparent;
   border: 0;
   font-family: inherit;
   color: $highlight-text-color;
@@ -3412,8 +3420,6 @@ $ui-header-height: 55px;
 }
 
 .column-link {
-  background: lighten($ui-base-color, 8%);
-  color: $primary-text-color;
   display: flex;
   align-items: center;
   gap: 5px;
@@ -3423,12 +3429,18 @@ $ui-header-height: 55px;
   overflow: hidden;
   white-space: nowrap;
   border: 0;
+  background: transparent;
+  color: $secondary-text-color;
   border-left: 4px solid transparent;
 
   &:hover,
   &:focus,
   &:active {
-    background: lighten($ui-base-color, 11%);
+    color: $primary-text-color;
+  }
+
+  &.active {
+    color: $highlight-text-color;
   }
 
   &:focus {
@@ -3440,22 +3452,6 @@ $ui-header-height: 55px;
     border-radius: 0;
   }
 
-  &--transparent {
-    background: transparent;
-    color: $secondary-text-color;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background: transparent;
-      color: $primary-text-color;
-    }
-
-    &.active {
-      color: $highlight-text-color;
-    }
-  }
-
   &--logo {
     background: transparent;
     padding: 10px;
@@ -3480,8 +3476,8 @@ $ui-header-height: 55px;
 }
 
 .column-subheading {
-  background: $ui-base-color;
-  color: $dark-text-color;
+  background: darken($ui-base-color, 4%);
+  color: $darker-text-color;
   padding: 8px 20px;
   font-size: 12px;
   font-weight: 500;
@@ -3489,12 +3485,6 @@ $ui-header-height: 55px;
   cursor: default;
 }
 
-.getting-started__wrapper,
-.getting-started,
-.flex-spacer {
-  background: $ui-base-color;
-}
-
 .getting-started__wrapper {
   flex: 0 0 auto;
 }
@@ -3506,6 +3496,8 @@ $ui-header-height: 55px;
 .getting-started {
   color: $dark-text-color;
   overflow: auto;
+  border: 1px solid var(--background-border-color);
+  border-top: 0;
 
   &__trends {
     flex: 0 1 auto;
@@ -3514,7 +3506,7 @@ $ui-header-height: 55px;
     margin-top: 10px;
 
     h4 {
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
+      border-bottom: 1px solid var(--background-border-color);
       padding: 10px;
       font-size: 12px;
       text-transform: uppercase;
@@ -3636,7 +3628,7 @@ $ui-header-height: 55px;
   margin-top: 14px;
   text-decoration: none;
   overflow: hidden;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
   border-radius: 8px;
 
   &__actions {
@@ -3893,7 +3885,7 @@ a.status-card {
 }
 
 .load-gap {
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
 }
 
 .timeline-hint {
@@ -3926,7 +3918,8 @@ a.status-card {
   font-size: 16px;
   font-weight: 500;
   color: $dark-text-color;
-  background: $ui-base-color;
+  border: 1px solid var(--background-border-color);
+  border-top: 0;
   cursor: default;
   display: flex;
   flex: 1 1 auto;
@@ -4002,8 +3995,7 @@ a.status-card {
 .column-header {
   display: flex;
   font-size: 16px;
-  background: $ui-base-color;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
   border-radius: 4px 4px 0 0;
   flex: 0 0 auto;
   cursor: pointer;
@@ -4070,6 +4062,10 @@ a.status-card {
       padding-top: 16px;
     }
   }
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-top: 0;
+  }
 }
 
 .column-header__buttons {
@@ -4089,9 +4085,9 @@ a.status-card {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: $ui-base-color;
   border: 0;
   color: $darker-text-color;
+  background: transparent;
   cursor: pointer;
   font-size: 16px;
   padding: 0 15px;
@@ -4110,7 +4106,6 @@ a.status-card {
 
   &.active {
     color: $primary-text-color;
-    background: lighten($ui-base-color, 4%);
 
     &:hover {
       color: $primary-text-color;
@@ -4127,7 +4122,6 @@ a.status-card {
   max-height: 70vh;
   overflow: hidden;
   overflow-y: auto;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
   color: $darker-text-color;
   transition:
     max-height 150ms ease-in-out,
@@ -4149,13 +4143,14 @@ a.status-card {
     height: 0;
     background: transparent;
     border: 0;
-    border-top: 1px solid lighten($ui-base-color, 8%);
+    border-top: 1px solid var(--background-border-color);
     margin: 10px 0;
   }
 }
 
 .column-header__collapsible-inner {
-  background: $ui-base-color;
+  border: 1px solid var(--background-border-color);
+  border-top: 0;
 }
 
 .column-header__setting-btn {
@@ -4401,9 +4396,8 @@ a.status-card {
 }
 
 .account--panel {
-  background: lighten($ui-base-color, 4%);
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--background-border-color);
   display: flex;
   flex-direction: row;
   padding: 10px 0;
@@ -4609,7 +4603,6 @@ a.status-card {
 .empty-column-indicator,
 .follow_requests-unlocked_explanation {
   color: $dark-text-color;
-  background: $ui-base-color;
   text-align: center;
   padding: 20px;
   font-size: 15px;
@@ -4636,14 +4629,14 @@ a.status-card {
 
 .follow_requests-unlocked_explanation {
   background: darken($ui-base-color, 4%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
   contain: initial;
   flex-grow: 0;
 }
 
 .error-column {
   padding: 20px;
-  background: $ui-base-color;
+  border: 1px solid var(--background-border-color);
   border-radius: 4px;
   display: flex;
   flex: 1 1 auto;
@@ -4858,7 +4851,7 @@ a.status-card {
   width: 100%;
   height: 6px;
   border-radius: 6px;
-  background: darken($ui-base-color, 8%);
+  background: var(--background-color);
   position: relative;
   margin-top: 5px;
 }
@@ -5280,7 +5273,7 @@ a.status-card {
 }
 
 .search-results__section {
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
 
   &:last-child {
     border-bottom: 0;
@@ -5288,7 +5281,7 @@ a.status-card {
 
   &__header {
     background: darken($ui-base-color, 4%);
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--background-border-color);
     padding: 15px;
     font-weight: 500;
     font-size: 14px;
@@ -6335,7 +6328,7 @@ a.status-card {
 .attachment-list {
   display: flex;
   font-size: 14px;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
   border-radius: 4px;
   margin-top: 16px;
   overflow: hidden;
@@ -6345,7 +6338,7 @@ a.status-card {
     color: $dark-text-color;
     padding: 8px 18px;
     cursor: default;
-    border-inline-end: 1px solid lighten($ui-base-color, 8%);
+    border-inline-end: 1px solid var(--background-border-color);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -6497,7 +6490,7 @@ a.status-card {
   overflow: hidden;
   box-sizing: border-box;
   position: relative;
-  background: darken($ui-base-color, 8%);
+  background: var(--background-color);
   border-radius: 8px;
   padding-bottom: 44px;
   width: 100%;
@@ -6893,7 +6886,6 @@ a.status-card {
 
 .scrollable .account-card {
   margin: 10px;
-  background: lighten($ui-base-color, 8%);
 }
 
 .scrollable .account-card__title__avatar {
@@ -6904,11 +6896,7 @@ a.status-card {
 }
 
 .scrollable .account-card__bio::after {
-  background: linear-gradient(
-    to left,
-    lighten($ui-base-color, 8%),
-    transparent
-  );
+  background: linear-gradient(to left, var(--background-color), transparent);
 }
 
 .account-gallery__container {
@@ -6937,8 +6925,8 @@ a.status-card {
 
 .notification__filter-bar,
 .account__section-headline {
-  background: $ui-base-color;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
+  border-top: 0;
   cursor: default;
   display: flex;
   flex-shrink: 0;
@@ -6979,10 +6967,15 @@ a.status-card {
       }
     }
   }
+
+  .scrollable & {
+    border-left: 0;
+    border-right: 0;
+  }
 }
 
 .filter-form {
-  background: $ui-base-color;
+  border-bottom: 1px solid var(--background-border-color);
 
   &__column {
     display: flex;
@@ -7200,7 +7193,8 @@ noscript {
   justify-content: flex-start;
   gap: 15px;
   align-items: center;
-  background: lighten($ui-base-color, 4%);
+  border: 1px solid var(--background-border-color);
+  border-top: 0;
 
   label {
     flex: 1 1 auto;
@@ -7301,7 +7295,7 @@ noscript {
 
   .list {
     padding: 10px;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--background-border-color);
   }
 
   .list__wrapper {
@@ -7445,7 +7439,7 @@ noscript {
     height: 145px;
     position: relative;
     background: darken($ui-base-color, 4%);
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--background-border-color);
 
     img {
       object-fit: cover;
@@ -7459,7 +7453,7 @@ noscript {
   &__bar {
     position: relative;
     padding: 0 20px;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--background-border-color);
 
     .avatar {
       display: block;
@@ -7467,8 +7461,8 @@ noscript {
       width: 94px;
 
       .account__avatar {
-        background: darken($ui-base-color, 8%);
-        border: 2px solid $ui-base-color;
+        background: var(--background-color);
+        border: 2px solid var(--background-border-color);
       }
     }
   }
@@ -7583,13 +7577,12 @@ noscript {
       margin: 0;
       margin-top: 16px;
       border-radius: 4px;
-      background: darken($ui-base-color, 4%);
-      border: 0;
+      border: 1px solid var(--background-border-color);
 
       dl {
         display: block;
         padding: 11px 16px;
-        border-bottom-color: lighten($ui-base-color, 4%);
+        border-bottom-color: var(--background-border-color);
       }
 
       dd,
@@ -7764,7 +7757,7 @@ noscript {
     display: flex;
     align-items: center;
     padding: 15px;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--background-border-color);
     gap: 15px;
 
     &:last-child {
@@ -7882,7 +7875,7 @@ noscript {
 
 .conversation {
   display: flex;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
   padding: 5px;
   padding-bottom: 0;
 
@@ -8237,7 +8230,7 @@ noscript {
 
 .picture-in-picture-placeholder {
   box-sizing: border-box;
-  border: 2px dashed lighten($ui-base-color, 8%);
+  border: 2px dashed var(--background-border-color);
   background: $base-shadow-color;
   display: flex;
   flex-direction: column;
@@ -8265,7 +8258,7 @@ noscript {
 
 .notifications-permission-banner {
   padding: 30px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -8335,7 +8328,7 @@ noscript {
   color: $primary-text-color;
   text-decoration: none;
   padding: 15px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
   gap: 15px;
 
   &:last-child {
@@ -8714,7 +8707,6 @@ noscript {
 }
 
 .privacy-policy {
-  background: $ui-base-color;
   padding: 20px;
 
   @media screen and (min-width: $no-gap-breakpoint) {
@@ -9083,6 +9075,7 @@ noscript {
 
 .about {
   padding: 20px;
+  border-top: 1px solid var(--background-border-color);
 
   @media screen and (min-width: $no-gap-breakpoint) {
     border-radius: 4px;
@@ -9129,7 +9122,7 @@ noscript {
   }
 
   &__meta {
-    background: lighten($ui-base-color, 4%);
+    border: 1px solid var(--background-border-color);
     border-radius: 4px;
     display: flex;
     margin-bottom: 30px;
@@ -9145,7 +9138,7 @@ noscript {
       width: 0;
       border: 0;
       border-style: solid;
-      border-color: lighten($ui-base-color, 8%);
+      border-color: var(--background-border-color);
       border-left-width: 1px;
       min-height: calc(100% - 60px);
       flex: 0 0 auto;
@@ -9253,7 +9246,7 @@ noscript {
       line-height: 22px;
       padding: 20px;
       border-radius: 4px;
-      background: lighten($ui-base-color, 4%);
+      border: 1px solid var(--background-border-color);
       color: $highlight-text-color;
       cursor: pointer;
     }
@@ -9263,7 +9256,7 @@ noscript {
     }
 
     &__body {
-      border: 1px solid lighten($ui-base-color, 4%);
+      border: 1px solid var(--background-border-color);
       border-top: 0;
       padding: 20px;
       font-size: 15px;
@@ -9273,18 +9266,17 @@ noscript {
 
   &__domain-blocks {
     margin-top: 30px;
-    background: darken($ui-base-color, 4%);
-    border: 1px solid lighten($ui-base-color, 4%);
+    border: 1px solid var(--background-border-color);
     border-radius: 4px;
 
     &__domain {
-      border-bottom: 1px solid lighten($ui-base-color, 4%);
+      border-bottom: 1px solid var(--background-border-color);
       padding: 10px;
       font-size: 15px;
       color: $darker-text-color;
 
       &:nth-child(2n) {
-        background: darken($ui-base-color, 2%);
+        background: darken($ui-base-color, 4%);
       }
 
       &:last-child {
@@ -9380,7 +9372,7 @@ noscript {
 }
 
 .hashtag-header {
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
   padding: 15px;
   font-size: 17px;
   line-height: 22px;
@@ -9442,8 +9434,8 @@ noscript {
   gap: 12px;
   padding: 16px 0;
   padding-bottom: 0;
-  border-bottom: 1px solid mix($ui-base-color, $ui-highlight-color, 75%);
-  background: mix($ui-base-color, $ui-highlight-color, 95%);
+  border-bottom: 1px solid var(--background-border-color);
+  background: rgba($ui-highlight-color, 0.05);
 
   &__header {
     display: flex;
@@ -9527,8 +9519,8 @@ noscript {
       overflow-x: scroll;
 
       &__card {
-        background: darken($ui-base-color, 4%);
-        border: 1px solid lighten($ui-base-color, 8%);
+        background: var(--background-color);
+        border: 1px solid var(--background-border-color);
         border-radius: 4px;
         display: flex;
         flex-direction: column;
@@ -9565,7 +9557,7 @@ noscript {
         .account__avatar {
           flex-shrink: 0;
           align-self: flex-end;
-          border: 1px solid lighten($ui-base-color, 8%);
+          border: 1px solid var(--background-border-color);
           background-color: $ui-base-color;
         }
 
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 611c8bb5d1..94078d960d 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -94,10 +94,14 @@ $font-display: 'mastodon-font-display' !default;
 $font-monospace: 'mastodon-font-monospace' !default;
 
 :root {
-  --dropdown-border-color: #{lighten($ui-base-color, 12%)};
-  --dropdown-background-color: #{lighten($ui-base-color, 4%)};
+  --dropdown-border-color: #{lighten($ui-base-color, 4%)};
+  --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
   --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
     0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
   --modal-background-color: #{darken($ui-base-color, 4%)};
   --modal-border-color: #{lighten($ui-base-color, 4%)};
+  --background-border-color: #{lighten($ui-base-color, 4%)};
+  --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+  --background-color: #{darken($ui-base-color, 8%)};
+  --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
 }