💄 style(search-bar): 搜索框适配暗色模式

arvinxx · Jan 26, 2021 · 24fd36a · 24fd36a
1 parent a54d31d
commit 24fd36a
Show file tree

Hide file tree

Showing 8 changed files with 1,220 additions and 153 deletions.
diff --git a/src/contentScripts/searchBar/app/SearchInput/components/Options/style.less b/src/contentScripts/searchBar/app/SearchInput/components/Options/style.less
@@ -1,21 +1,31 @@
 @import '~theme/index';
 
 .container {
-  padding: 8px 12px;
   display: flex;
-  user-select: none;
   justify-content: space-between;
+  padding: 8px 12px;
+  user-select: none;
 }
 
 .option {
-  background: @search-bar-options-tag-bg;
   padding: 2px 6px;
+  background: @search-bar-options-tag-bg;
   border-radius: 2px;
   cursor: pointer;
   transition: all 150ms ease-in-out;
 }
 
 .optionActive {
-  background: @yuque-brand-color-light;
   color: @yuque-brand-color-dark;
+  background: @yuque-brand-color-light;
+}
+
+[theme='dark'] {
+  .option {
+    background: @dark-mode-background-dark;
+  }
+  .optionActive {
+    color: @dark-mode-yuque-brand-color-dark;
+    background: @dark-mode-yuque-brand-color-light;
+  }
 }
diff --git a/src/contentScripts/searchBar/app/SearchInput/style.less b/src/contentScripts/searchBar/app/SearchInput/style.less
@@ -9,3 +9,14 @@
     box-shadow: none !important;
   }
 }
+
+[theme='dark'] {
+  .input {
+    .dark-mode-card-light;
+    .dark-mode-text-color-base;
+
+    &::placeholder {
+      .dark-mode-text-color-second;
+    }
+  }
+}
diff --git a/src/contentScripts/searchBar/app/SearchResult/style.less b/src/contentScripts/searchBar/app/SearchResult/style.less
@@ -3,16 +3,16 @@
   padding: 8px 12px 24px;
 }
 .repo {
-  margin-right: 8px;
   width: 24px;
+  margin-right: 8px;
 }
 .title {
-  font-size: 16px;
   margin-bottom: 8px;
+  font-size: 16px;
   em {
     color: @yuque-brand-color;
-    font-style: normal;
     font-weight: bold;
+    font-style: normal;
   }
 }
 
@@ -21,14 +21,23 @@
 }
 
 .row {
-  cursor: pointer;
+  display: flex;
   padding: 12px;
+  cursor: pointer;
   transition: background-color 300ms ease-in-out;
-  display: flex;
 }
 
 [theme='light'] {
   .row:hover {
     background: @item-hover-bg;
   }
 }
+
+[theme='dark'] {
+  .desc {
+    .dark-mode-text-color-second;
+  }
+  .row:hover {
+    background: @dark-mode-background-light-hover;
+  }
+}
diff --git a/src/contentScripts/searchBar/app/index.tsx b/src/contentScripts/searchBar/app/index.tsx
@@ -76,7 +76,7 @@ const SearchBar: FC = () => {
 
 export default () => (
   <YuqueTokenService.Provider value={useYuqueTokenService()}>
-    <SearchBarService.Provider value={useSearchBarService()}>
+    <SearchBarService.Provider value={useSearchBarService(true)}>
       <SearchService.Provider value={useSearchService()}>
         <SearchBar />
       </SearchService.Provider>

diff --git a/src/contentScripts/searchBar/app/style.less b/src/contentScripts/searchBar/app/style.less
@@ -17,10 +17,9 @@
   transform: translate(-50%, -50%);
 }
 .input {
-  .search-bar-shadow;
-
-  background: @background-color-base;
   border-radius: 4px;
+
+  .search-bar-shadow;
 }
 .result {
   margin-top: 8px;
@@ -32,18 +31,32 @@
 .invalid {
   width: 500px;
   padding: 24px;
-  background: @white;
   border-radius: 4px;
+
   .flex-center-children;
 }
 [theme='light'] {
   .result {
-    background: white;
+    background: @white;
+  }
+  .invalid {
+    background: @white;
+  }
+  .input {
+    background: @background-color-base;
   }
 }
 
 [theme='dark'] {
   .result {
+    color: @dark-mode-text-color-base;
     background: @dark-mode-background-light;
   }
+  .invalid {
+    background: @dark-mode-background-light;
+  }
+  .input {
+    color: @dark-mode-text-color-base;
+    background: @dark-mode-background-base;
+  }
 }
diff --git a/src/services/useYuqueTokenService.ts b/src/services/useYuqueTokenService.ts
@@ -13,9 +13,7 @@ export const useYuqueTokenService = () => {
   const [token, setYuqueToken] = useLocalStorageState('PY_YUQUE_TOKEN', '');
 
   const syncToCloudStorage = useCallback(() => {
-    chrome.storage?.sync.set({ yuque_token: token }, () => {
-      chrome.storage.sync.get(console.log);
-    });
+    chrome.storage?.sync.set({ yuque_token: token });
     message.success('保存成功');
   }, [token]);
 
@@ -29,14 +27,14 @@ export const useYuqueTokenService = () => {
     if (valid) return;
 
     try {
-      const data = await request.get('https://www.yuque.com/api/v2/hello', {
+      await request.get('https://www.yuque.com/api/v2/hello', {
         headers: {
           'X-Auth-Token': token || '',
           'Access-Control-Allow-Origin': '*',
         },
         getResponse: true,
       });
-      console.log(data);
+
       setValid(true);
       return true;
     } catch (e) {

diff --git a/src/theme/token/base.less b/src/theme/token/base.less
@@ -4,3 +4,6 @@
 
 @yuque-brand-color-dark: darken(@yuque-brand-color, 20%);
 @yuque-brand-color-light: hsl(@yuque-hue-tone, 49%, 85%);
+
+@dark-mode-yuque-brand-color-dark: darken(@yuque-brand-color, 30%);
+@dark-mode-yuque-brand-color-light: hsl(@yuque-hue-tone, 10%, 50%);