Make Light Theme display correctly

static/css/homepage.css

@@ -1,3 +1,21 @@
+html, html[data-theme="light"] {
+  --background-color: snow;
+  --color: #000;
+}
+
+html[data-theme="dark"] {
+  --background-color: #1f272d;
+  --color: #fff;
+  --tcolor: pink;
+}
+@media (prefers-color-scheme: dark) {
+  html {
+    --background-color: #222830;
+    --color: #fff;
+    --hcolor: #e976d9;
+    --tcolor: pink;
+  }
+}
  .articles { 
    padding: 5px;
    border: var(--line-width) solid;
@@ -19,14 +37,10 @@
   text-align: left;
   margin-top: 10px;
   padding-top: 0px;
-  color: #e976d9
- }
- a { 
-	 text-decoration: none;
+  color: var(--hcolor);
  }
 .summary {
   padding-left: 1.5rem;
-  color: #f1f3f7; 
   margin-top: 0.1rem;
 }
 .metadata { 
@@ -37,5 +51,5 @@
 }
 .metadata a { 
 	text-decoration: underline;
-	color: pink;
+	color: var(--tcolor);
 }