diff options
| author | Eric Wong <e@80x24.org> | 2019-04-21 21:11:19 +0000 |
|---|---|---|
| committer | Eric Wong <e@80x24.org> | 2019-04-21 21:11:19 +0000 |
| commit | 390497135ac2c970ba5c042e80c140cc5a323cce (patch) | |
| tree | 257a3f2a148757309bd00d3f9d84d9ded8e52fdb /extras/autoindex.rb | |
| parent | 8f38837ef6478d87b7094578d5a03f7d7a04fe30 (diff) | |
| download | yahns-390497135ac2c970ba5c042e80c140cc5a323cce.tar.gz | |
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.
Diffstat (limited to 'extras/autoindex.rb')
| -rw-r--r-- | extras/autoindex.rb | 20 |
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 } |