LibWeb/CSS: Implement the color-scheme CSS property

Author: https://github.com/Gingeh
Commit: ce5cd012b9
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3146
Reviewed-by: https://github.com/AtkinsSJ ✅

Base/res/ladybird/inspector.css

@@ -4,7 +4,6 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --background: rgb(23, 23, 23);
         --separator: dimgray;
         --separator-accent: rgb(57, 57, 57);
         --tab-controls: rgb(57, 57, 57);
@@ -30,7 +29,6 @@
 
 @media (prefers-color-scheme: light) {
     :root {
-        --background: white;
         --separator: lightgray;
         --separator-accent: white;
         --tab-controls: rgb(229, 229, 229);
@@ -54,7 +52,7 @@
 }
 
 html {
-    background-color: var(--background);
+    color-scheme: light dark;
 }
 
 body {
@@ -186,7 +184,7 @@ body {
     left: 0;
     right: 0;
     background-color: var(--tab-controls);
-    border-top: 2px solid var(--background);
+    border-top: 2px solid Canvas;
     display: flex;
     padding: 0.5em;
 }

Base/res/ladybird/newtab.html

@@ -4,11 +4,8 @@
     <meta charset="UTF-8">
     <title>New Tab</title>
     <style>
-        /* FIXME: We should be able to remove the HTML style when "color-scheme" is supported */
-        @media (prefers-color-scheme: dark) {
-            html {
-                background-color: rgb(20, 20, 20);
-            }
+        html {
+            color-scheme: light dark;
         }
     </style>
 </head>

Base/res/ladybird/templates/directory.html

@@ -4,15 +4,8 @@
     <meta charset="UTF-8">
     <title>Index of %path%</title>
     <style>
-        /* FIXME: We should be able to remove the HTML style when "color-scheme" is supported */
-        @media (prefers-color-scheme: dark) {
-            html {
-                background-color: rgb(20, 20, 20);
-                color: rgb(235, 235, 235);
-            }
-            a {
-                color: cornflowerblue;
-            }
+        html {
+            color-scheme: light dark;
         }
 
         header {

Base/res/ladybird/templates/error.html

@@ -4,12 +4,8 @@
     <meta charset="UTF-8">
     <title>Error!</title>
     <style>
-        /* FIXME: We should be able to remove the HTML style when "color-scheme" is supported */
-        @media (prefers-color-scheme: dark) {
-            html {
-                background-color: rgb(20, 20, 20);
-                color: rgb(235, 235, 235);
-            }
+        html {
+            color-scheme: light dark;
         }
 
         h1 {

Base/res/ladybird/templates/version.html

@@ -4,12 +4,8 @@
     <meta charset="UTF-8">
     <title>About %browser_name%</title>
     <style>
-        /* FIXME: We should be able to remove the HTML style when "color-scheme" is supported */
-        @media (prefers-color-scheme: dark) {
-            html {
-                background-color: rgb(20, 20, 20);
-                color: rgb(235, 235, 235);
-            }
+        html {
+            color-scheme: light dark;
         }
         img {
             float: left;