diff --git a/src/components/Button.vue b/src/components/Button.vue
index d48af017..dd908cc1 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -52,8 +52,8 @@ function handleClick(evt: MouseEvent) {
 
 <style lang="scss" scoped>
 .b-button {
-  --b-button-color: var(--bew-content-solid-1);
-  --b-button-color-hover: var(--bew-content-solid-1-hover);
+  --b-button-color: var(--bew-content-solid);
+  --b-button-color-hover: var(--bew-content-solid-hover);
   --b-button-text-color: var(--bew-text-1);
   --b-button-radius: var(--bew-radius);
   --b-button-padding: 14px;
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index e5aa433a..9d2a9582 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -256,7 +256,7 @@ function handleBackToTopOrRefresh() {
 
   .dock-content-inner {
     --uno: "duration-300 ease-in-out transform-gpu";
-    --uno: "p-2 m-2 bg-$bew-content-2 dark:bg-$bew-elevated";
+    --uno: "p-2 m-2 bg-$bew-content-alt dark:bg-$bew-elevated";
     --uno: "flex flex-col gap-2 shrink-0";
     --uno: "rounded-full border-1 border-$bew-border-color";
     box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-2);
@@ -273,7 +273,7 @@ function handleBackToTopOrRefresh() {
     --uno: "md:w-45px w-35px md:h-45px h-35px";
     --uno: "grid place-items-center";
     --uno: "filter-$bew-filter-glass-1";
-    --uno: "bg-$bew-elevated hover:bg-$bew-content-1-hover";
+    --uno: "bg-$bew-elevated hover:bg-$bew-content-hover";
     --uno: "rounded-full shadow-$bew-shadow-2 border-1 border-$bew-border-color";
 
     backdrop-filter: var(--bew-filter-glass-1);
@@ -309,7 +309,7 @@ function handleBackToTopOrRefresh() {
   --uno: "aspect-square relative";
   --uno: "leading-0";
   --uno: "rounded-60px antialiased";
-  --uno: "bg-$bew-content-1 hover:bg-$bew-fill-2 cursor-pointer";
+  --uno: "bg-$bew-content hover:bg-$bew-fill-2 cursor-pointer";
   --uno: "dark:bg-$bew-fill-1 dark-hover:bg-$bew-fill-4";
 
   box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-1);
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index f96c9f29..12c76f07 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -343,8 +343,8 @@ async function handleClearSearchHistory() {
 }
 
 #search-wrap {
-  --b-search-bar-color: var(--bew-content-1);
-  --b-search-bar-color-hover: var(--bew-content-1-hover);
+  --b-search-bar-color: var(--bew-content);
+  --b-search-bar-color-hover: var(--bew-content-hover);
   --b-search-bar-color-focus: var(--b-search-bar-color);
 
   @mixin card-content {
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 50f74127..b1521857 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -137,7 +137,7 @@ function setCurrentTitle() {
             backdrop-filter: var(--bew-filter-glass-2);
           "
           flex="~ gap-2 col" rounded="30px hover:25px" p-2 shadow
-          bg="$bew-content-2 hover:$bew-elevated dark:$bew-elevated dark-hover:$bew-elevated"
+          bg="$bew-content-alt hover:$bew-elevated dark:$bew-elevated dark-hover:$bew-elevated"
           scale="group-hover:105" duration-300 overflow-hidden antialiased transform-gpu
           border="1 $bew-border-color"
         >
@@ -174,7 +174,7 @@ function setCurrentTitle() {
           --un-shadow: var(--bew-shadow-4), var(--bew-shadow-edge-glow-2);
           backdrop-filter: var(--bew-filter-glass-2);
         "
-        relative overflow="x-hidde" w-full h-full bg="$bew-content-2 dark:$bew-elevated"
+        relative overflow="x-hidde" w-full h-full bg="$bew-content-alt dark:$bew-elevated"
         shadow rounded="$bew-radius" border="1 $bew-border-color" transform-gpu
       >
         <header
diff --git a/src/components/Settings/components/ChangeWallpaper.vue b/src/components/Settings/components/ChangeWallpaper.vue
index 03dcf8f3..a0437ad6 100644
--- a/src/components/Settings/components/ChangeWallpaper.vue
+++ b/src/components/Settings/components/ChangeWallpaper.vue
@@ -162,7 +162,7 @@ function handleRemoveCustomWallpaper() {
               >
                 <button
                   style="backdrop-filter: var(--bew-filter-glass-1);"
-                  bg="$bew-content-1" rounded-full w-28px h-28px
+                  bg="$bew-content" rounded-full w-28px h-28px
                   grid place-items-center
                   @click="handleUploadWallpaper"
                 >
@@ -170,7 +170,7 @@ function handleRemoveCustomWallpaper() {
                 </button>
                 <button
                   style="backdrop-filter: var(--bew-filter-glass-1);"
-                  bg="$bew-content-1" rounded-full w-28px h-28px
+                  bg="$bew-content" rounded-full w-28px h-28px
                   grid place-items-center
                   @click="handleRemoveCustomWallpaper"
                 >
diff --git a/src/components/Settings/components/ChildSettingsDialog.vue b/src/components/Settings/components/ChildSettingsDialog.vue
index 1a0f12fc..c1947853 100644
--- a/src/components/Settings/components/ChildSettingsDialog.vue
+++ b/src/components/Settings/components/ChildSettingsDialog.vue
@@ -24,7 +24,7 @@ function handleClose() {
         --un-shadow: var(--bew-shadow-3) var(--bew-shadow-edge-glow-2);
         backdrop-filter: var(--bew-filter-glass-2);
       "
-      pos="fixed top-1/2 left-1/2" bg="$bew-content-2 dark:$bew-elevated" rounded="$bew-radius"
+      pos="fixed top-1/2 left-1/2" bg="$bew-content-alt dark:$bew-elevated" rounded="$bew-radius"
       transform="translate--1/2 translate-z-0 gpu" z-2 shadow overflow="x-hidden y-overlay" w="$b-dialog-width"
       h="$b-dialog-height" antialiased
     >
diff --git a/src/components/Settings/components/SettingsItemGroup.vue b/src/components/Settings/components/SettingsItemGroup.vue
index fc410067..bacc478f 100644
--- a/src/components/Settings/components/SettingsItemGroup.vue
+++ b/src/components/Settings/components/SettingsItemGroup.vue
@@ -17,7 +17,7 @@ defineProps<{
     <main
       style="box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-1);"
       mt-2 px-4 mx--4 rounded="$bew-radius"
-      bg="$bew-content-1 dark:$bew-fill-1"
+      bg="$bew-content dark:$bew-fill-1"
       shadow="$bew-shadow-edge-glow-1"
     >
       <slot />
diff --git a/src/components/TopBar/components/FavoritesPop.vue b/src/components/TopBar/components/FavoritesPop.vue
index 476fb7b1..54541233 100644
--- a/src/components/TopBar/components/FavoritesPop.vue
+++ b/src/components/TopBar/components/FavoritesPop.vue
@@ -152,7 +152,7 @@ defineExpose({
       pos="fixed top-0 left-0"
       w="full"
       h-50px
-      bg="$bew-content-1"
+      bg="$bew-content"
       z="2"
       un-border="!rounded-t-$bew-radius"
     >
@@ -210,7 +210,7 @@ defineExpose({
         <Loading
           v-if="isLoading && favoriteResources.length === 0"
           pos="absolute left-0"
-          bg="$bew-content-1"
+          bg="$bew-content"
           z="1"
           w="full"
           h="full"
diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index 99d8f64d..994b0082 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -228,7 +228,7 @@ function getHistoryList(type: Business, view_at = 0 as number) {
         <Empty
           v-if="!isLoading && historys.length === 0"
           pos="absolute top-0 left-0"
-          bg="$bew-content-1"
+          bg="$bew-content"
           z="0" w="full" h="full"
           flex="~ items-center"
         />
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue
index 29507313..dd444678 100644
--- a/src/components/TopBar/components/MomentsPop.vue
+++ b/src/components/TopBar/components/MomentsPop.vue
@@ -332,7 +332,7 @@ defineExpose({
         <Empty
           v-if="!isLoading && moments.length === 0"
           pos="absolute top-0 left-0"
-          bg="$bew-content-1"
+          bg="$bew-content"
           z="0" w="full" h="full"
           flex="~ items-center"
         />
diff --git a/src/components/TopBar/components/WatchLaterPop.vue b/src/components/TopBar/components/WatchLaterPop.vue
index 922558ab..098dedc9 100644
--- a/src/components/TopBar/components/WatchLaterPop.vue
+++ b/src/components/TopBar/components/WatchLaterPop.vue
@@ -112,7 +112,7 @@ function getAllWatchLaterList() {
         <Empty
           v-if="!isLoading && watchLaterList.length === 0"
           pos="absolute top-0 left-0"
-          bg="$bew-content-1"
+          bg="$bew-content"
           z="0" w="full" h="full"
           flex="~ items-center"
         />
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index a45de223..2fe43d95 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -482,7 +482,7 @@ function jumpToLoginPage() {
           p="x-14px"
           lh-35px h-35px
           rounded="$bew-radius"
-          bg="$bew-content-solid-1"
+          bg="$bew-content-solid"
           shadow="$bew-shadow-1"
           outline-none
           w-full
diff --git a/src/styles/adaptedStyles/animePage.scss b/src/styles/adaptedStyles/animePage.scss
index e9f3fdb0..7250d58b 100644
--- a/src/styles/adaptedStyles/animePage.scss
+++ b/src/styles/adaptedStyles/animePage.scss
@@ -85,14 +85,14 @@
       #home_v3_module_page_switch.home-page-switch-wrapper .inner-content-body-container .prev-page,
       .time-line-wrapper .time-line-body .timeline-common-content .next-page,
       .time-line-wrapper .time-line-body .timeline-common-content .prev-page {
-        background-color: var(--bew-content-solid-1);
+        background-color: var(--bew-content-solid);
       }
 
       .nav-tool-container .channel-entry .channel-item:hover,
       .nav-tool-container .new-q:hover,
       .nav-tool-container .top:hover,
       .nav-tool-container .service:hover {
-        background-color: var(--bew-content-solid-1-hover);
+        background-color: var(--bew-content-solid-hover);
       }
 
       .section-title-v2-wrapper .title-left .week-day-wrapper .week-day-item.active {
@@ -100,7 +100,7 @@
       }
 
       .section-title-v2-wrapper .title-right:hover {
-        background-color: var(--bew-content-solid-1-hover);
+        background-color: var(--bew-content-solid-hover);
       }
 
       .recommend-feed-line-rank-wrapper.feenline-rank-wrapper {
diff --git a/src/styles/adaptedStyles/animePlayback&MoviePage.scss b/src/styles/adaptedStyles/animePlayback&MoviePage.scss
index 35d5daf9..5f0c342a 100644
--- a/src/styles/adaptedStyles/animePlayback&MoviePage.scss
+++ b/src/styles/adaptedStyles/animePlayback&MoviePage.scss
@@ -130,7 +130,7 @@
     [class*="rankList_sponsor_rank_item"][class*="rankList_pos_rank_module"]
       [class*="rankList_sp_right"]
       [class*="rankList_sp_msg"] {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
 
     .special.wide .main-container {
@@ -146,7 +146,7 @@
     }
 
     [class*="SectionSelector_SectionSelector"] [class*="SectionSelector_expand"] {
-      background: linear-gradient(270deg, var(--bew-content-solid-1) 46.21%, transparent);
+      background: linear-gradient(270deg, var(--bew-content-solid) 46.21%, transparent);
     }
 
     [class*="numberListItem_number_list_item"] {
@@ -362,7 +362,7 @@
     .main-container .review-module .review-list .review-item .review-body,
     .main-container .nav-tools .tool-item,
     .main-container .season-list .ss-list-wrapper .expand-more {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
 
     .ep-list-wrapper .ep-item.cursor,
diff --git a/src/styles/adaptedStyles/articlesPage.scss b/src/styles/adaptedStyles/articlesPage.scss
index 99b701b6..dfe783c2 100644
--- a/src/styles/adaptedStyles/articlesPage.scss
+++ b/src/styles/adaptedStyles/articlesPage.scss
@@ -297,15 +297,15 @@
     .share-dynamic-dialog,
     .share-dynamic-dialog .sdd-card .sdd-card-content,
     .share-success-dialog {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
 
     .interaction-info .toolbar .share-box .qrcode-box {
-      background-color: var(--bew-content-solid-2);
+      background-color: var(--bew-content-alt-solid);
     }
 
     .comment-wrapper .comment-m {
-      --bew-bg: var(--bew-content-solid-1);
+      --bew-bg: var(--bew-content-solid);
     }
 
     .share-dynamic-dialog .sdd-card {
diff --git a/src/styles/adaptedStyles/comments.scss b/src/styles/adaptedStyles/comments.scss
index 922945f7..7815a82b 100644
--- a/src/styles/adaptedStyles/comments.scss
+++ b/src/styles/adaptedStyles/comments.scss
@@ -209,7 +209,7 @@
     .bb-comment .comment-send-lite.comment-send-lite,
     .comment-bilibili-fold .comment-send-lite.comment-send-lite,
     .comment-wrapper .comment-m {
-      // background-color: var(--bew-content-solid-1);
+      // background-color: var(--bew-content-solid);
       background-color: var(--bew-bg);
     }
 
@@ -227,7 +227,7 @@
     .comment-bilibili-fold .comment-send-lite .textarea-container.focus textarea,
     .bili-dyn-forward-publishing__editor:not(.disabled):focus,
     .bili-dyn-forward-publishing__editor:not(.disabled):hover {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
 
     .forw-area {
diff --git a/src/styles/adaptedStyles/error404Page.scss b/src/styles/adaptedStyles/error404Page.scss
index 640ea271..6ad33f59 100644
--- a/src/styles/adaptedStyles/error404Page.scss
+++ b/src/styles/adaptedStyles/error404Page.scss
@@ -28,7 +28,7 @@
   // #region dark mode adaption part
   &.dark {
     .error-container {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
   }
   // #endregion
diff --git a/src/styles/adaptedStyles/footer.scss b/src/styles/adaptedStyles/footer.scss
index 323582bb..c43ba98f 100644
--- a/src/styles/adaptedStyles/footer.scss
+++ b/src/styles/adaptedStyles/footer.scss
@@ -31,7 +31,7 @@
 
     .bili-footer .footer-wrp,
     .international-footer {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
 
     .bili-footer .boston-postcards li,
diff --git a/src/styles/adaptedStyles/historyPage.scss b/src/styles/adaptedStyles/historyPage.scss
index da24b91e..9e033c45 100644
--- a/src/styles/adaptedStyles/historyPage.scss
+++ b/src/styles/adaptedStyles/historyPage.scss
@@ -118,11 +118,11 @@
     }
 
     .history-dlg {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
 
     .go-top-m .go-top {
-      background-color: var(--bew-content-solid-1) !important;
+      background-color: var(--bew-content-solid) !important;
     }
   }
 }
diff --git a/src/styles/adaptedStyles/homePage.scss b/src/styles/adaptedStyles/homePage.scss
index cc7f4ee3..cb4457cc 100644
--- a/src/styles/adaptedStyles/homePage.scss
+++ b/src/styles/adaptedStyles/homePage.scss
@@ -39,7 +39,7 @@
     }
 
     .single-card.floor-card .badge {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
   }
 }
diff --git a/src/styles/adaptedStyles/loginDialog.scss b/src/styles/adaptedStyles/loginDialog.scss
index 5491a877..8aacfdf8 100644
--- a/src/styles/adaptedStyles/loginDialog.scss
+++ b/src/styles/adaptedStyles/loginDialog.scss
@@ -95,7 +95,7 @@
       .forget-tip,
       .bili-mini,
       .el-input__inner {
-        background-color: var(--bew-content-solid-1);
+        background-color: var(--bew-content-solid);
       }
 
       &.el-popper,  // & -> .el-select-dropdown
@@ -150,13 +150,13 @@
 
       // & -> .el-select-dropdown
       &.el-popper[x-placement^="bottom"] .popper__arrow:after {
-        border-bottom-color: var(--bew-content-solid-2);
+        border-bottom-color: var(--bew-content-alt-solid);
       }
 
       .tab__form .form__item input,
       .bili-mini-account input,
       .bili-mini-password input {
-        box-shadow: inset 0 0 0 1000px var(--bew-content-solid-1);
+        box-shadow: inset 0 0 0 1000px var(--bew-content-solid);
       }
 
       .bili-mini-content-wp .login-client-qr-code img,
diff --git a/src/styles/adaptedStyles/momentsPage.scss b/src/styles/adaptedStyles/momentsPage.scss
index 9be45179..b3795ea6 100644
--- a/src/styles/adaptedStyles/momentsPage.scss
+++ b/src/styles/adaptedStyles/momentsPage.scss
@@ -80,7 +80,7 @@
 
     .bili-dyn-home--member,
     #app {
-      --bg1: var(--bew-content-solid-1);
+      --bg1: var(--bew-content-solid);
       --bg2: var(--bew-bg);
     }
 
@@ -246,7 +246,7 @@
     .bili-dyn-live-users__title,
     .bili-dyn-list-loading,
     .video-container {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
 
     .bili-rich-textarea__inner {
@@ -298,7 +298,7 @@
     }
 
     .bili-topic-search__popover {
-      background-color: var(--bew-content-solid-2);
+      background-color: var(--bew-content-alt-solid);
       border-color: var(--bew-border-color);
     }
 
@@ -323,11 +323,11 @@
     .bili-dyn-card-video__body,
     .bili-dyn-card-pgc__body,
     .feed-card .loading-content {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
 
     .bili-dyn-item__panel .bili-comment {
-      --bg1: var(--bew-content-solid-1);
+      --bg1: var(--bew-content-solid);
     }
 
     .reference .dyn-goods__wrap,
@@ -368,7 +368,7 @@
     }
 
     .bili-dyn-version-control__btn {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
       border-color: var(--bew-border-color);
       color: var(--bew-text-1);
     }
diff --git a/src/styles/adaptedStyles/notePage.scss b/src/styles/adaptedStyles/notePage.scss
index df45e6da..8304435d 100644
--- a/src/styles/adaptedStyles/notePage.scss
+++ b/src/styles/adaptedStyles/notePage.scss
@@ -128,7 +128,7 @@
     }
 
     .note-list-del-popup {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
 
     .note-list-item,
@@ -143,7 +143,7 @@
     }
 
     .editor-innter .ql-editor::-webkit-scrollbar-track {
-      background-color: var(--bew-content-1);
+      background-color: var(--bew-content);
     }
 
     .note-header .note-title .note-text,
@@ -225,7 +225,7 @@
     .view-manage-note,
     .note-tooltip.info,
     .my-notes-manage-note {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
 
     .ql-toolbar.ql-snow + .ql-container.ql-snow {
diff --git a/src/styles/adaptedStyles/notificationsPage.scss b/src/styles/adaptedStyles/notificationsPage.scss
index d77d5b3e..19674cba 100644
--- a/src/styles/adaptedStyles/notificationsPage.scss
+++ b/src/styles/adaptedStyles/notificationsPage.scss
@@ -342,11 +342,11 @@
     .config,
     .bili-im,
     .bili-im .message-list {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
 
     .cs-q-tab-area ul.cs-q-tabs {
-      background-color: var(--bew-content-solid-2);
+      background-color: var(--bew-content-alt-solid);
     }
 
     .static-popup,
@@ -361,7 +361,7 @@
     }
 
     .cs-q-tab-area.shadow:after {
-      background: linear-gradient(270deg, var(--bew-content-solid-2) 0%, transparent 100%);
+      background: linear-gradient(270deg, var(--bew-content-alt-solid) 0%, transparent 100%);
     }
 
     .follow-btn.inactive,
diff --git a/src/styles/adaptedStyles/userSpacePage.scss b/src/styles/adaptedStyles/userSpacePage.scss
index f35ec845..9432bb8b 100644
--- a/src/styles/adaptedStyles/userSpacePage.scss
+++ b/src/styles/adaptedStyles/userSpacePage.scss
@@ -295,7 +295,7 @@
   // 深色模式下對主題顏色調整
   &.dark {
     .bili-dyn-item {
-      --bg1: var(--bew-content-solid-1);
+      --bg1: var(--bew-content-solid);
       --bg2: var(--bew-bg);
     }
 
@@ -506,7 +506,7 @@
     }
 
     .emoji-box {
-      border-color: var(--bew-content-solid-2);
+      border-color: var(--bew-content-alt-solid);
     }
 
     #page-fav .fav-main .small-item {
@@ -631,7 +631,7 @@
     }
 
     .col-full {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
       box-shadow: 0 0 0 1px var(--bew-border-color);
     }
 
@@ -680,7 +680,7 @@
     }
 
     #page-setting #setting-new-tag-btn {
-      background: var(--bew-content-solid-1);
+      background: var(--bew-content-solid);
     }
 
     .search-page,
@@ -695,7 +695,7 @@
     #page-index .col-1::after,
     #page-index .col-2 .section,
     #page-dynamic .col-2 .section {
-      background-color: var(--bew-content-solid-1);
+      background-color: var(--bew-content-solid);
     }
 
     .main-content .card-content .post-content.repost,
@@ -706,19 +706,19 @@
     .bb-comment .operation .opera-list,
     .comment-bilibili-fold .operation .opera-list,
     .bili-at-popup {
-      background-color: var(--bew-content-solid-2);
+      background-color: var(--bew-content-alt-solid);
     }
 
     .emoji-box .emoji-tabs,
     .bb-comment .operation .opera-list li:hover,
     .comment-bilibili-fold .operation .opera-list li:hover,
     .pagination {
-      background-color: var(--bew-content-1);
+      background-color: var(--bew-content);
     }
 
     .emoji-box .emoji-text:hover,
     .emoji-box .emoji-tabs .tab-link.on {
-      background-color: var(--bew-content-2);
+      background-color: var(--bew-content-alt);
     }
 
     .elec .new-elec-trigger:hover {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 7910afd0..7c323b6b 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -140,15 +140,15 @@
 
   // `--bew-content-*` for the flat background elements
   // #region `--bew-content-*` background colors
-  --bew-content-1: hsl(0 0% 100% / var(--bew-content-opacity));
-  --bew-content-1-hover: hsl(0 0% 85% / var(--bew-content-opacity));
-  --bew-content-2: hsl(240 31% 95% / var(--bew-content-opacity));
-  --bew-content-2-hover: hsl(240 31% 80% / var(--bew-content-opacity));
+  --bew-content: hsl(0 0% 100% / var(--bew-content-opacity));
+  --bew-content-hover: hsl(0 0% 85% / var(--bew-content-opacity));
+  --bew-content-alt: hsl(240 31% 95% / var(--bew-content-opacity));
+  --bew-content-alt-hover: hsl(240 31% 80% / var(--bew-content-opacity));
 
-  --bew-content-solid-1: hsl(0 0% 100%);
-  --bew-content-solid-1-hover: hsl(0 0% 85%);
-  --bew-content-solid-2: hsl(240 31% 95%);
-  --bew-content-solid-2-hover: hsl(240 31% 85%);
+  --bew-content-solid: hsl(0 0% 100%);
+  --bew-content-solid-hover: hsl(0 0% 85%);
+  --bew-content-alt-solid: hsl(240 31% 95%);
+  --bew-content-alt-solid-hover: hsl(240 31% 85%);
   // #endregion
 
   // `--bew-elevated-*` for popup, dialog and difference layers with difference elevation levels
@@ -212,15 +212,15 @@
   --bew-homepage-bg: hsl(230 12% 6%);
   --bew-homepage-bg-mask: hsl(230 12% 6% / var(--bew-homepage-bg-mask-opacity));
 
-  --bew-content-1: hsl(230 12% 12% / var(--bew-content-opacity));
-  --bew-content-1-hover: hsl(230 12% 28% / var(--bew-content-opacity));
-  --bew-content-2: hsl(240 14% 15% / var(--bew-content-opacity));
-  --bew-content-2-hover: hsl(240 14% 31% / var(--bew-content-opacity));
+  --bew-content: hsl(230 12% 12% / var(--bew-content-opacity));
+  --bew-content-hover: hsl(230 12% 28% / var(--bew-content-opacity));
+  --bew-content-alt: hsl(240 14% 15% / var(--bew-content-opacity));
+  --bew-content-alt-hover: hsl(240 14% 31% / var(--bew-content-opacity));
 
-  --bew-content-solid-1: hsl(230 12% 12%);
-  --bew-content-solid-1-hover: hsl(230 12% 28%);
-  --bew-content-solid-2: hsl(240 14% 15%);
-  --bew-content-solid-2-hover: hsl(240 14% 31%);
+  --bew-content-solid: hsl(230 12% 12%);
+  --bew-content-solid-hover: hsl(230 12% 28%);
+  --bew-content-alt-solid: hsl(240 14% 15%);
+  --bew-content-alt-solid-hover: hsl(240 14% 31%);
 
   --bew-elevated: hsl(230 12% 16% / var(--bew-content-opacity));
   --bew-elevated-hover: hsl(230 12% 32% / var(--bew-content-opacity));
@@ -290,8 +290,8 @@
   --pay_yellow: var(--Ye5);
   --pay_yellow_thin: var(--Ye1);
   --bg1: var(--bew-bg);
-  --bg2: var(--bew-content-solid-2);
-  --bg3: var(--bew-content-solid-2);
+  --bg2: var(--bew-content-alt-solid);
+  --bg3: var(--bew-content-alt-solid);
   --bg1_float: var(--bew-elevated-solid);
   --bg2_float: var(--bew-elevated-solid);
   --text_white: var(--Wh0_u);
@@ -304,9 +304,9 @@
   --line_light: var(--bew-fill-1);
   --line_regular: var(--bew-fill-2);
   --line_bold: var(--bew-fill-3);
-  --graph_white: var(--bew-content-solid-1);
-  --graph_bg_thin: var(--bew-content-solid-1);
-  --graph_bg_regular: var(--bew-content-solid-1);
+  --graph_white: var(--bew-content-solid);
+  --graph_bg_thin: var(--bew-content-solid);
+  --graph_bg_regular: var(--bew-content-solid);
   --graph_bg_thick: var(--bew-elevated-solid);
   --graph_weak: var(--Ga3);
   --graph_medium: var(--Ga5);
@@ -326,16 +326,16 @@
 
   --graph_bg_thin_rgb: 13, 14, 17;
 
-  --bpx-aux-header-bg: var(--bew-content-solid-1);
+  --bpx-aux-header-bg: var(--bew-content-solid);
   --bpx-aux-header-icon: var(--bew-text-2);
   --bpx-aux-header-font: var(--bew-text-1);
   --bpx-aux-content-bg: var(--bew-bg);
   --bpx-aux-content-font1: var(--bew-text-1);
   --bpx-aux-content-font2: var(--bew-text-2);
-  --bpx-aux-footer-bg: var(--bew-content-solid-1);
+  --bpx-aux-footer-bg: var(--bew-content-solid);
   --bpx-aux-footer-font: var(--bew-text-3);
   --bpx-aux-footer-font-hover: var(--bew-text-1);
-  --bpx-dmsend-main-bg: var(--bew-content-solid-1);
+  --bpx-dmsend-main-bg: var(--bew-content-solid);
   --bpx-dmsend-input-bg: var(--bew-fill-1);
   --bpx-dmsend-info-font: var(--bew-text-1);
   --bpx-dmsend-switch-icon: var(--bew-text-2);