Merge pull request #169 from MarleneJiang/issue-140-文章内容暗色主题适配

Issue 140 文章内容暗色主题适配
IdeaLeap · Feb 5, 2023 · b3f7941 · b3f7941 · vercel · Feb 5, 2023
2 parents 3db6478 + 6e40661
commit b3f7941
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 9 deletions.
diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
@@ -184,6 +184,7 @@ html.light{
   --juejin-color-text-container:#333333;
   --juejin-color-container-hover:#F7F8FA;
   --juejin-article-list-border:#e4e6eb;
+  --juejin-border-bottom:#e4e6eb;
 }
 
 html.dark{
@@ -290,6 +291,7 @@ html.dark{
   --juejin-color-text-container:#ffffff;
   --juejin-color-container-hover:#333;
   --juejin-article-list-border:#212123;
+  --juejin-border-bottom:#1e80ff;
 }
 
 .page-enter-active,

diff --git a/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue b/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue
@@ -158,7 +158,7 @@ onUnmounted(() => {
         <ul class="catalog-list" style="margin-top: 0px">
           <li v-for="(item, index) in Catalogue" :key="index" :class="[{ active: index === isActive }, catalogueClass(item.level)]" @click="activeSelect(index)">
             <div class="a-container">
-              <a :href="`#heading-${index}`" :title="item.text" class="catalog-aTag hover:bg-jj-containerhover"> {{ item.text }} </a>
+              <a :href="`#heading-${index}`" :title="item.text" class="catalog-aTag hover:bg-jj-container-hover-normal"> {{ item.text }} </a>
             </div>
           </li>
         </ul>
@@ -204,7 +204,7 @@ onUnmounted(() => {
   line-height: 2rem;
   color: #1d2129;
   border-bottom: 1px solid #e4e6eb;
-  @apply text-jj-content;
+  @apply text-jj-content border-b-jj-border-bottom-normal;
 }
 
 .catalog-block.isExpand .article-catalog .catalog-body {
@@ -232,7 +232,7 @@ onUnmounted(() => {
   line-height: 22px;
   color: #333;
   list-style: none;
-  @apply text-jj-container;
+  @apply text-jj-container-normal;
 }
 
 .catalog-list .item.d1 {
@@ -283,5 +283,6 @@ onUnmounted(() => {
   overflow: hidden;
   text-overflow: ellipsis;
   border-radius: 4px;
+  @apply text-jj-container-normal
 }
 </style>
diff --git a/frontend/components/ArticlesContent/SideBar/Right/Column.vue b/frontend/components/ArticlesContent/SideBar/Right/Column.vue
@@ -94,7 +94,7 @@ const handleClick = () => {
   -webkit-line-clamp: 2;
 }
 .next-article-list {
-  @apply absolute bottom-100% right-17px border-1px border-solid border-jj-border p-0;
+  @apply absolute bottom-100% right-17px border-1px border-solid border-jj-border-normal p-0;
   box-shadow: 0 8px 24px rgb(81 87 103 / 16%);
 }
 .article-list {

diff --git a/frontend/components/ArticlesContent/SideBar/Right/RelatedArticles.vue b/frontend/components/ArticlesContent/SideBar/Right/RelatedArticles.vue
@@ -55,12 +55,13 @@ const articleList = ArticleList.value.filter(item => item.id !== id.value)
   color: #1d2129;
   font-weight: 500;
   border-bottom: 1px solid #e4e6eb;
-  @apply dark:text-jj_font_white dark:border-b-nav_icon_color;
+  @apply text-jj-content border-b-jj-border-bottom-normal;
 }
 .sidebar .sidebar-block {
   margin-bottom: 20px;
   border-radius: 4px;
-  background-color: #fff;
+  /* background-color: #fff; */
+  @apply bg-jj-article
 }
 
 .entry-list {

diff --git a/frontend/unocss.config.ts b/frontend/unocss.config.ts
@@ -65,9 +65,18 @@ export default defineConfig({
         },
         sidebar: 'var(--juejin-color-bg-sidebar)',
         content: 'var(--juejin-color-text-content)',
-        container: 'var(--juejin-color-text-container)',
-        containerhover: 'var(--juejin-color-container-hover)',
-        border: 'var(--juejin-article-list-border)',
+        container: {
+          normal: 'var(--juejin-color-text-container)',
+          hover: {
+            normal: 'var(--juejin-color-container-hover)',
+          },
+        },
+        border: {
+          normal: 'var(--juejin-article-list-border)',
+          bottom: {
+            normal: 'var(--juejin-border-bottom)',
+          },
+        },
         stroke: {
           normal: 'var(--juejin-brand-stroke1-normal)',
         },