--- /dev/null
+/*
+ * The dark style when user prefers that in their browser/OS.
+ */
+
+body {
+ color: #cc88ff;
+ background-color: #111;
+}
+.inverted {
+ color: white;
+ background-color: #9200ff;
+}
+
+a {
+ color: #cc88ff;
+}
+a:visited {
+ color: #bb77ff;
+}
+a:active {
+ color: #FF0000;
+}
+
+.inverted a {
+ color: white;
+}
--- /dev/null
+/*
+ * The default (light) style.
+ */
+
+body {
+ color: #440077;
+ background-color: white;
+}
+.inverted {
+ color: white;
+ background-color: #440077;
+}
+
+a {
+ color: #440077;
+}
+a:visited {
+ color: #51188E;
+}
+a:active {
+ color: #FF0000;
+}
+
+.inverted a {
+ color: white;
+}
+++ /dev/null
-body {
- color: #440077;
- background-color: white;
-}
-.inverted {
- color: white;
- background-color: #440077;
-}
-
-a {
- color: #440077;
-}
-a:visited {
- color: #51188E;
-}
-a:active {
- color: #FF0000;
-}
-
-.inverted a {
- color: white;
-}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="/favicon.ico">
- <link rel="stylesheet" href="style.css"/>
+ <link rel="stylesheet" href="style-dark.css" media="(prefers-color-scheme: dark)"/>
+ <link rel="stylesheet" href="style-light.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"/>
</head>
<body>