Add support for dark mode in web page stylesheet

ychin · ychin · commit 264ab99a524f · 2019-10-17T03:30:17.000-07:00
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
     <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
+    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet_dark.css" media="screen">
     <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
   </head>
   <body>
diff --git a/stylesheets/stylesheet_dark.css b/stylesheets/stylesheet_dark.css
@@ -0,0 +1,19 @@
+/*
+ * Custom modified stylesheet to support dark mode as upstream doesn't support
+ * it.
+ */
+:root {
+    prefer-color-schemes: light dark;
+    color-scheme: light dark;
+}
+@media (prefers-color-scheme: dark) {
+    a {
+        color: #2583E2;
+    }
+    body {
+        color: #9F938E;
+    }
+    .site-footer-credits {
+        color: #7E6E67;
+    }
+}
