add support for dark mode preferences
authorMike Frysinger <vapier@gentoo.org>
Thu, 2 Jan 2020 13:54:48 +0000 (08:54 -0500)
committerMike Frysinger <vapier@gentoo.org>
Thu, 2 Jan 2020 13:54:48 +0000 (08:54 -0500)
style-dark.css [new file with mode: 0644]
style-light.css [moved from style.css with 85% similarity]
top.php

diff --git a/style-dark.css b/style-dark.css
new file mode 100644 (file)
index 0000000..fe37b06
--- /dev/null
@@ -0,0 +1,26 @@
+/*
+ * 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;
+}
similarity index 85%
rename from style.css
rename to style-light.css
index a77bb79105c1fd8f4901528958de58b38362145e..3a93df5c60435c76e5cbc224ba8d329c9d3a8a5a 100644 (file)
--- a/style.css
@@ -1,3 +1,7 @@
+/*
+ * The default (light) style.
+ */
+
 body {
        color: #440077;
        background-color: white;
 body {
        color: #440077;
        background-color: white;
diff --git a/top.php b/top.php
index 33b1f5ee9e35c5e18639f270eda756f8bff72b33..87c4ff19109238f347c7cbabad0cb5ee8a4a397d 100644 (file)
--- a/top.php
+++ b/top.php
@@ -4,7 +4,8 @@
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="/favicon.ico">
 <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>
 </head>
 
 <body>