[PATCH] css: Optional support for dark mode

[Samuel Lidén Borell]

Modern browsers have a "dark mode" preference, which enables alternate
CSS rules on web sites that support this.

This patch adds an optional dark color scheme, that can be copied into
cgit.css. The color scheme is then auto-detected via a @media query.

Note that filters that use color (such as source highlighters), and
logotypes, may need to be updated to work with a black background. So
this goes into a separate file, that can be copied into cgit.css for
those who want to enable support for dark mode.

Signed-off-by: Samuel Lidén Borell <samuel at kodafritt.se>
---
 contrib/css/cgit_dark.css | 131 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 contrib/css/cgit_dark.css

diff --git a/contrib/css/cgit_dark.css b/contrib/css/cgit_dark.css
new file mode 100644
index 0000000..464d765
--- /dev/null
+++ b/contrib/css/cgit_dark.css
@@ -0,0 +1,131 @@
+/*
+	Automatic dark mode via @media queries. This is supported in modern
+	web browsers. Older browser will just ignore it.
+
+	To enable this, append this file to your cgit.css file.
+
+	Plase note: Any filters that you use that use colored text, must also
+	have CSS rules for dark mode, or the text may become invisible (black
+	on black). If you use a custom logotype, you should also check that it
+	is legible on a black background.
+*/
+:root { color-scheme: light dark; }
+ at media (prefers-color-scheme: dark) {
+	html, div#cgit { color: #ccc; background: black; }
+	div#cgit a { color: #66f; }
+	div#cgit table#header td.main a { color: #fff; }
+	div#cgit table#header td.sub { color: #888; }
+	div#cgit table.tabs { border-bottom-color: #333; }
+	div#cgit table.tabs td a { color: #888; }
+	div#cgit table.tabs td a.active { color: #fff; background-color: #333; }
+	div#cgit div.path { color: #fff; background-color: #111; }
+	div#cgit div.content { border-bottom-color: #bbb; }
+	div#cgit table.list tr { background: black; }
+	div#cgit table.list tr.logheader { background: #111; }
+	div#cgit table.list tr:nth-child(even) { background: #080808; }
+	div#cgit table.list tr:nth-child(odd) { background: black; }
+	div#cgit table.list tr:hover { background: #111; }
+	div#cgit table.list tr.nohover { background: black; }
+	div#cgit table.list tr.nohover:hover { background: black; }
+	div#cgit table.list tr.nohover-highlight:hover:nth-child(even) { background: #080808; }
+	div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) { background: black; }
+	div#cgit table.list td.commitgraph .column1 { color: #f55; }
+	div#cgit table.list td.commitgraph .column2 { color: #5f5; }
+	div#cgit table.list td.commitgraph .column3 { color: #ff5; }
+	div#cgit table.list td.commitgraph .column4 { color: #55f; }
+	div#cgit table.list td.commitgraph .column5 { color: #f5f; }
+	div#cgit table.list td.commitgraph .column6 { color: #5ff; }
+	div#cgit table.list td a { color: white; }
+	div#cgit table.list td a.ls-dir { color: #66f; }
+	div#cgit table.list td a:hover { color: #66f; }
+	div#cgit table#downloads { border-color: #888; }
+	div#cgit table#downloads th { background-color: #333; }
+	div#cgit div#blob { border-color: white; }
+	div#cgit table.blob { border-top-color: white; }
+	div#cgit table.blob td.hashes,
+	div#cgit table.blob td.lines { color: white; }
+	div#cgit table.blob td.linenumbers { border-right-color: gray; }
+	div#cgit table.blob td.linenumbers a,
+	div#cgit table.ssdiff td.lineno a { color: gray; }
+	div#cgit table.blob td.linenumbers a:hover,
+	div#cgit table.ssdiff td.lineno a:hover { color: white; }
+	div#cgit table.blame div.alt:nth-child(even) { background: #111; }
+	div#cgit table.blame div.alt:nth-child(odd) { background: black; }
+	div#cgit table.bin-blob { border-color: white; }
+	div#cgit table.bin-blob th { border-color: #888; }
+	div#cgit table.bin-blob td { border-left-color: #888; }
+	div#cgit div.cgit-panel table { border-color: #555; background-color: #111; }
+	div#cgit div.notes { border-color: #661; background-color: #220; }
+	div#cgit table.diffstat { border: #555; background-color: #111; }
+	div#cgit table.diffstat td span.modechange { color: #c66; }
+	div#cgit table.diffstat td.add a { color: #6c6; }
+	div#cgit table.diffstat td.del a { color: #c66; }
+	div#cgit table.diffstat td.upd a { color: #66c; }
+	div#cgit table.diffstat td.graph td.add { background-color: #3a3; }
+	div#cgit table.diffstat td.graph td.rem { background-color: #a33; }
+	div#cgit div.diffstat-summary { color: #777; }
+	div#cgit table.diff td div.head { color: white; }
+	div#cgit table.diff td div.hunk { color: #66f; }
+	div#cgit table.diff td div.add { color: #6c6; }
+	div#cgit table.diff td div.del { color: #c66; }
+	div#cgit table.list td.reposection { color: #777; }
+	div#cgit ul.pager a { color: #888; }
+	div#cgit span.age-mins { color: #7f7; }
+	div#cgit span.age-hours { color: #7f7; }
+	div#cgit span.age-days { color: #bfb; }
+	div#cgit span.age-weeks { color: #bbb; }
+	div#cgit span.age-months { color: #777; }
+	div#cgit span.age-years { color: #444; }
+	div#cgit span.insertions { color: #7f7; }
+	div#cgit span.deletions { color: #f77; }
+	div#cgit div.footer { color: #333; }
+	div#cgit div.footer a { color: #333; }
+	div#cgit a.branch-deco { color: #fff; background-color: #007700; border-color: #88ff88; }
+	div#cgit a.tag-deco { color: #fff; background-color: #777700; border-color: #ffff88; }
+	div#cgit a.tag-annotated-deco { color: #fff; background-color: #773300; border-color: #ffff88; }
+	div#cgit a.remote-deco { color: #fff; background-color: #000033; border-color: #8888ff; }
+	div#cgit a.deco { color: #fff; background-color: #770000; border-color: #ff8888; }
+	div#cgit table.stats { border-color: white; }
+	div#cgit table.stats th { background-color: #111; border-color: white; }
+	div#cgit table.stats td { border-color: white; }
+	div#cgit table.stats td.sum { color: #f33; }
+	div#cgit table.vgraph { border-color: white; }
+	div#cgit table.vgraph th { background-color: #111; border-color: black; }
+	div#cgit table.vgraph div.bar { background-color: #111; }
+	div#cgit table.hgraph { border-color: white; }
+	div#cgit table.hgraph th { background-color: #111; border-color: white; }
+	div#cgit table.hgraph div.bar { background-color: #111; }
+	div#cgit table.ssdiff td { border-left-color: #555; border-right-color: #555; }
+	div#cgit table.ssdiff td.add { color: white; background: #030; }
+	div#cgit table.ssdiff td.add_dark { color: white; background: #353; }
+	div#cgit table.ssdiff span.add { background: #030; }
+	div#cgit table.ssdiff td.del { color: white; background: #300; }
+	div#cgit table.ssdiff td.del_dark { color: white; background: #533; }
+	div#cgit table.ssdiff span.del { background: #300; }
+	div#cgit table.ssdiff td.changed { color: white; background: #330; }
+	div#cgit table.ssdiff td.changed_dark { color: white; background: #553; }
+	div#cgit table.ssdiff td.lineno { color: white; background: #111; }
+	div#cgit table.ssdiff td.hunk { color: white; background: #003; border-top-color: #555; border-bottom-color: #555; }
+	div#cgit table.ssdiff td.head { border-top-color: #555; border-bottom-color: #555; }
+	div#cgit table.ssdiff td.head div.head { color: white; }
+	div#cgit table.ssdiff td.foot { border-top-color: #555; }
+
+	/* If you use filters that use colored text, such as a source
+	   highlighter, you will need to add styles for it as well.
+
+	   Here is an example, based on the example CSS in the file
+	   filters/syntax-highlighting.sh */
+	div#cgit table.blob .num { color:#ff814f; }
+	div#cgit table.blob .esc { color:#ff00ff; }
+	div#cgit table.blob .str { color:#fc4040; }
+	div#cgit table.blob .pps { color:#ffff7f; }
+	div#cgit table.blob .slc { color:#7f7c7f; }
+	div#cgit table.blob .com { color:#7e7c7e; }
+	div#cgit table.blob .ppc { color:#7dff7d; }
+	div#cgit table.blob .opt { color:#ffffff; }
+	div#cgit table.blob .lin { color:#aaaaaa; }
+	div#cgit table.blob .kwa { color:#ffffff; }
+	div#cgit table.blob .kwb { color:#51a8ff; }
+	div#cgit table.blob .kwc { color:#ffffff; }
+	div#cgit table.blob .kwd { color:#7e7efe; }
+}
-- 
2.30.2