]> git.wh0rd.org Git - nano-editor.git/commitdiff
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 [new file with mode: 0644]
style.css [deleted file]
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;
+}
diff --git a/style-light.css b/style-light.css
new file mode 100644 (file)
index 0000000..3a93df5
--- /dev/null
@@ -0,0 +1,26 @@
+/*
+ * 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;
+}
diff --git a/style.css b/style.css
deleted file mode 100644 (file)
index a77bb79..0000000
--- a/style.css
+++ /dev/null
@@ -1,22 +0,0 @@
-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;
-}
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">
-   <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>