about summary refs log tree commit
diff options
context:
space:
mode:
authorEric Wong <e@80x24.org>2019-04-21 21:11:19 +0000
committerEric Wong <e@80x24.org>2019-04-21 21:11:19 +0000
commit390497135ac2c970ba5c042e80c140cc5a323cce (patch)
tree257a3f2a148757309bd00d3f9d84d9ded8e52fdb
parent8f38837ef6478d87b7094578d5a03f7d7a04fe30 (diff)
Some browsers (e.g. Firefox 67.0a1 via "ui.systemUsesDarkTheme") are
adding support for the "prefers-color-scheme" @media query.  So this
allows pages to respect user choice when it comes to dark or light
schemes.

OLED and CRT displays measure significant power savings when using
dark schemes.  Dark themes work better with less ambient light, so
favoring darkness can lead to overall power savings even with CCFL
and LED-lit displays.
-rw-r--r--extras/autoindex.rb20
1 files changed, 18 insertions, 2 deletions
diff --git a/extras/autoindex.rb b/extras/autoindex.rb
index 45b80cf..9060c6c 100644
--- a/extras/autoindex.rb
+++ b/extras/autoindex.rb
@@ -14,6 +14,21 @@ class Autoindex
   FN = %{<a href="%s">%s</a>}
   TFMT = "%Y-%m-%d %H:%M"
 
+  # default to a dark, web-safe (216 color) palette for power-savings.
+  # Color-capable browsers can respect the prefers-color-scheme:light
+  # @media query (browser support a work-in-progress)
+  STYLE = <<''.gsub(/^\s*/m, '').delete!("\n")
+@media screen {
+  *{background:#000;color:#ccc}
+  a{color:#69f;text-decoration:none}
+  a:visited{color:#96f}
+}
+@media screen AND (prefers-color-scheme:light) {
+  *{background:#fff;color:#333}
+  a{color:#00f;text-decoration:none}
+  a:visited{color:#808}
+}
+
   def initialize(app, *args)
     app.respond_to?(:root) or raise ArgumentError,
        "wrapped app #{app.inspect} does not respond to #root"
@@ -139,8 +154,9 @@ class Autoindex
       path_info_html = path_info_ue.split(%r{/}, -1).map! do |part|
         Rack::Utils.escape_html(part)
       end.join("/")
-      body = "<html><head><title>Index of #{path_info_html}</title></head>" \
-             "<body><h1>Index of #{path_info_html}</h1><hr><pre>\n" \
+      body = "<html><head><title>Index of #{path_info_html}</title>" \
+             "<style>#{STYLE}</style>" \
+             "</head><body><h1>Index of #{path_info_html}</h1><hr><pre>\n" \
              "#{dirs.concat(files).join("\n")}" \
              "</pre><hr></body></html>\n"
       h = { "Content-Type" => "text/html", "Content-Length" => body.size.to_s }