List for cgit developers and users
 help / color / mirror / Atom feed
* [PATCH] css: Optional support for dark mode
@ 2023-01-01 21:15 Samuel Lidén Borell
  2023-01-02  0:51 ` Jason A. Donenfeld
  0 siblings, 1 reply; 13+ messages in thread
From: Samuel Lidén Borell @ 2023-01-01 21:15 UTC (permalink / raw)
  To: cgit; +Cc: 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@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; }
+@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


^ permalink raw reply	[flat|nested] 13+ messages in thread

end of thread, other threads:[~2023-01-29 17:11 UTC | newest]

Thread overview: 13+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2023-01-01 21:15 [PATCH] css: Optional support for dark mode Samuel Lidén Borell
2023-01-02  0:51 ` Jason A. Donenfeld
2023-01-01 21:15   ` [PATCH RESEND v2] css: Support " Samuel Lidén Borell
2023-01-11 20:54     ` Jason A. Donenfeld
2023-01-11 20:56       ` Jason A. Donenfeld
2023-01-12  0:33         ` Samuel Lidén Borell
2023-01-12  0:34           ` Jason A. Donenfeld
2023-01-12  0:33         ` Jason A. Donenfeld
2023-01-22 11:35           ` [PATCH v3] " Samuel Lidén Borell
2023-01-22 13:04             ` Samuel Lidén Borell
2023-01-27 20:42             ` Jason A. Donenfeld
2023-01-29 17:07               ` Samuel Lidén Borell
2023-01-29 16:55                 ` [PATCH v4] " Samuel Lidén Borell

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for NNTP newsgroup(s).