[epiphany/wip/exalm/dark: 1/3] about: Support dark style

[Alexander Mikhaylenko <alexm src gnome org>]

commit 44dec268b044f7e3d7ba6d32816cf0e215b2ebc8
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Wed Oct 6 13:01:10 2021 +0500

    about: Support dark style
    
    Set color-scheme so we get light focus rects in dark variant.
    
    Recikir icons, since they are monochrome here (well, almost but it's close
    enough) and we don't know beforehand what the icons will be the app icon
    in particular), be careful and invert them as:
      - set their brightness to 0, making sure their color is black
      - then use invert with a carefully chosen value
    
    Don't set titles to the wrong color - text-color is for text areas, this
    one is fg-color.

 src/resources/about.css | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)
---
diff --git a/src/resources/about.css b/src/resources/about.css
index 20f55723d..3b1e6ed14 100644
--- a/src/resources/about.css
+++ b/src/resources/about.css
@@ -7,11 +7,14 @@ html {
     --base-color: #fff;
     --text-color: #000;
     --borders: #d3d7cf;
+    --icon-invert: 0.2; /* average(0x2e, 0x34, 0x36) / 0xff */
 
     /* Misc colors */
     --header-color: #999;
     --header-text-color: white;
     --row-hover-color: rgba(0, 0, 0, .1);
+
+    color-scheme: light dark;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -22,6 +25,7 @@ html {
         --base-color: #2d2d2d;
         --text-color: #fff;
         --borders: #1b1b1b;
+        --icon-invert: 0.93; /* average(0xee, 0xee, 0xec) / 0xff */
 
         /* Misc colors */
         --header-color: #666;
@@ -239,6 +243,8 @@ html.epiphany-html {
 .incognito-body-image {
     margin:auto;
     display:block;
+    filter: brightness(0) invert(var(--icon-invert));
+    opacity: 0.5;
 }
 
 /* about:overview */
@@ -395,10 +401,6 @@ html[dir="rtl"] .overview-item {
     -webkit-user-drag: none;
 }
 
-.overview-empty h1 {
-    color: var(--text-color);
-}
-
 .overview-empty p {
     text-align: center;
 }
@@ -406,6 +408,7 @@ html[dir="rtl"] .overview-item {
 .overview-empty img {
     -webkit-user-select: none;
     -webkit-user-drag: none;
-    opacity: 0.55; /* Adwaita's dim-label */
+    opacity: 0.5;
     width: 128px;
+    filter: brightness(0) invert(var(--icon-invert));
 }