perf(UI): use css filter to adapt dark mode

tisfeng · Sep 20, 2023 · 06e376e · 06e376e
1 parent 2bff97f
commit 06e376e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/Easydict/Feature/Service/Apple/AppleDictionary/EZAppleDictionary.m b/Easydict/Feature/Service/Apple/AppleDictionary/EZAppleDictionary.m
@@ -142,14 +142,14 @@ - (NSString *)getAllIframeHTMLResultOfWord:(NSString *)word languages:(NSArray<E
 
             // Update background color for dark mode
             NSString *dictBackgroundColorCSS = [NSString stringWithFormat:@"<style>"
-                                                @"body { background-color: %@; }"
+                                                @"body { background-color: %@; color: %@}"
 
                                                 @"@media (prefers-color-scheme: dark) {"
-                                                @"body { background-color: %@; }"
+                                                @"body { background-color: %@; filter: invert(0.85) hue-rotate(185deg) saturate(200%%) brightness(120%%);}"
                                                 @"}"
                                                 @"</style>",
 
-                                                lightBackgroundColorString, darkBackgroundColorString];
+                                                lightBackgroundColorString, lightTextColorString, darkBackgroundColorString];
 
             NSString *dictHTML = [NSString stringWithFormat:@"%@ \n\n%@ \n\n%@", customCSS, dictBackgroundColorCSS, wordHtmlString];
 

diff --git a/Easydict/Feature/Service/Apple/AppleDictionary/apple-dictionary.html b/Easydict/Feature/Service/Apple/AppleDictionary/apple-dictionary.html
@@ -96,7 +96,6 @@
     }
 
     @media (prefers-color-scheme: dark) {
-
       details summary::before,
       details summary::after {
         background: var(--dark-text-color);
@@ -444,8 +443,8 @@
       }
 
       if (isDarkMode()) {
-        updateAllIframeColor(true);
-        updateBackgroundColor(true);
+        // updateAllIframeColor(true);
+        // updateBackgroundColor(true);
       }
 
       updateAllIframeStyle();
@@ -465,8 +464,8 @@
       );
       colorSchemeListener.addEventListener(`change`, function (event) {
         var isDarkMode = event.matches;
-        updateAllIframeColor(isDarkMode);
-        updateBackgroundColor(isDarkMode);
+        // updateAllIframeColor(isDarkMode);
+        // updateBackgroundColor(isDarkMode);
       });
     };
   </script>