💄 style(dark-mode): 优化编辑器的深色模式

arvinxx · Jan 30, 2021 · 69a317a · 69a317a
1 parent aa29a84
commit 69a317a
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 16 deletions.
diff --git a/src/contentScripts/darkMode/darkMode/home/index.less b/src/contentScripts/darkMode/darkMode/home/index.less
@@ -51,7 +51,7 @@ div[class^='UserFollowed-module_container'] {
 }
 
 div[class^='ItemLiked-module_container'] {
- background: @dark-mode-background-light !important;
+ .dark-mode-background-light;
 
  div[class^='ItemLiked-module_likesInfo'] a {
  color: @dark-mode-text-color-base !important;
@@ -65,7 +65,7 @@ div[class^='ItemLiked-module_container'] {
 }
 
 div[class^='BookWatched-module_container'] {
- background: @dark-mode-background-light !important;
+ .dark-mode-background-light;
  div[class^='BookWatched-module_bookDetail'] {
  border-bottom-color: @dark-mode-border-color-light;
  }
@@ -124,7 +124,7 @@ use[fill='#FFF'] {
 }
 
 [class^='Social-module_social'] {
- border-top-color: @dark-mode-background-light !important;
+ .dark-mode-background-light;
 
  span,
  b {
@@ -133,7 +133,7 @@ use[fill='#FFF'] {
 }
 
 [class^='index-module_groupNameScope'] {
- background: @dark-mode-background-light !important;
+ .dark-mode-background-light;
 }
 
 [class^='BookSummary-module_column'],

diff --git a/src/contentScripts/darkMode/darkMode/reading/articleContent.less b/src/contentScripts/darkMode/darkMode/reading/articleContent.less
@@ -4,6 +4,12 @@
 // 文章内容
 #content,
 .lake-content-editor {
+ // 锚文本
+ .lake-anchor-button {
+ .dark-mode-background-base-with-hover;
+ .dark-mode-text-color-second-with-hover;
+ }
+
  .dark-mode-text-color-base;
 
  .lake-list,
@@ -48,6 +54,16 @@
  }
 
  // 信息块
+ .lake-alert {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: #262626 !important;
+ }
+ }
  .lake-alert-info {
  background: @dark-mode-block-background-info !important;
  }
@@ -72,7 +88,7 @@
  .dark-mode-background-light;
  }
 
- //
+ // checkbox
  .lake-checkbox-inner {
  .dark-mode-background-light;
  .dark-mode-border-color-light;
@@ -83,4 +99,25 @@
  border-color: @dark-mode-yuque-brand-color !important;
  }
  }
+
+ // 引用卡片
+ .lake-embed-mask {
+ .doc-embed-content-container {
+ .dark-mode-background-light;
+ }
+ }
+}
+
+[class*='BookReader-module_content'] {
+ #footer {
+ .dark-mode-background-base;
+ }
+}
+
+.lake-engine .CodeMirror-gutters,
+.lake-engine-view .CodeMirror-gutters {
+ .dark-mode-background-light;
+}
+.lake-codeblock-header {
+ .dark-mode-border-bottom-color-light;
 }
diff --git a/src/contentScripts/darkMode/darkMode/reading/comment.less b/src/contentScripts/darkMode/darkMode/reading/comment.less
@@ -3,6 +3,10 @@
  .dark-mode-button-disable-in-base;
 }
 
-.ant-list-item:before {
+.ant-list-item::before {
  border-color: @dark-mode-border-color-light !important;
 }
+
+.reply-tip {
+ .dark-mode-background-dark;
+}
diff --git a/src/contentScripts/darkMode/darkMode/reading/editor.less b/src/contentScripts/darkMode/darkMode/reading/editor.less
@@ -81,3 +81,24 @@
  .dark-mode-border-color-base;
  }
 }
+
+// 网页书签卡片
+.lake-bookmark-link,
+.lake-bookmark-link-content {
+ .dark-mode-card-dark;
+}
+.lake-bookmark-link-title {
+ .dark-mode-text-color-base;
+
+ font-weight: bold;
+}
+.lake-bookmark-link-desc {
+ .dark-mode-text-color-base;
+}
+.lake-bookmark-link-belong {
+ .dark-mode-text-color-second;
+}
+
+.ant-select-selector {
+ .dark-mode-button-default-in-base;
+}
diff --git a/src/contentScripts/darkMode/darkMode/reading/index.less b/src/contentScripts/darkMode/darkMode/reading/index.less
@@ -6,6 +6,7 @@
 @import 'ant-list';
 @import 'comment';
 @import 'editor';
+@import 'toc';
 
 .loading {
  background: @dark-mode-background-dark !important;
@@ -28,6 +29,6 @@ body {
 
 div[class^='DocQRCode-module_icon'],
 .ant-back-top-content {
- background: @dark-mode-background-light !important;
  color: @dark-mode-text-color-base;
+ background: @dark-mode-background-light !important;
 }
diff --git a/src/contentScripts/darkMode/darkMode/reading/toc.less b/src/contentScripts/darkMode/darkMode/reading/toc.less
@@ -0,0 +1,22 @@
+@import '~theme/index';
+
+// 目录页
+
+[class*='App-module_wrapper'] {
+ .dark-mode-background-dark;
+ [class*='CatalogSidebar-module_wrapper'],
+ .ant-tree,
+ [class*='CatalogTreeItem-module_catalogItemTitleText'],
+ [class*='CatalogTreeItem-module_tailType'] > span {
+ .dark-mode-background-base;
+ }
+}
+
+//[class*='CatalogTreeItem-module_tailType'] > span {
+//}
+
+[class*='CatalogMain-module_header'] {
+ .ant-btn {
+ .dark-mode-button-default-in-base;
+ }
+}
diff --git a/src/contentScripts/darkMode/style.less b/src/contentScripts/darkMode/style.less
@@ -2,24 +2,22 @@
 
 .button {
  position: fixed;
- bottom: 8px;
  right: 24px;
-
- width: 32px;
- height: 32px;
- border-radius: 16px;
-
+ bottom: 8px;
+ z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
- cursor: pointer;
+ width: 32px;
+ height: 32px;
  background: white;
+ border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+ cursor: pointer;
 }
 
 [theme='light'] {
- .button {
- }
+ //
 }
 
 [theme='dark'] {

diff --git a/src/theme/style/background.less b/src/theme/style/background.less
@@ -4,6 +4,13 @@
  background: @dark-mode-background-base !important;
 }
 
+.dark-mode-background-base-with-hover {
+ background: @dark-mode-background-base !important;
+ &:hover {
+ background: @dark-mode-background-base-hover !important;
+ }
+}
+
 .dark-mode-background-base-hover {
  background: @dark-mode-background-base-hover !important;
 }

diff --git a/src/theme/style/button.less b/src/theme/style/button.less
@@ -28,6 +28,16 @@
  border-color: @dark-mode-border-color-darker !important;
  }
 }
+
+// 在 background-base 下的默认按钮
+.dark-mode-button-default-in-dark {
+ color: @dark-mode-text-color-base !important;
+ background: @dark-mode-background-base !important;
+ border-color: @dark-mode-background-base !important;
+ &:hover {
+ background: @dark-mode-text-color-base-hover !important;
+ }
+}
 // 在 background-dark 下的禁用按钮
 .dark-mode-button-disable-in-dark {
  .ant-btn[disabled] {

diff --git a/src/theme/style/text.less b/src/theme/style/text.less
@@ -20,6 +20,16 @@
 .dark-mode-text-color-second {
  color: @dark-mode-text-color-second !important;
 }
+.dark-mode-text-color-second-hover {
+ color: @dark-mode-text-color-base !important;
+}
+
+.dark-mode-text-color-second-with-hover {
+ .dark-mode-text-color-second;
+ &:hover {
+ .dark-mode-text-color-second-hover;
+ }
+}
 // 链接颜色
 .dark-mode-link-color {
  color: @dark-mode-link-color !important;