From: "Samuel Lidén Borell" <samuel@kodafritt.se>
To: cgit@lists.zx2c4.com
Cc: "Samuel Lidén Borell" <samuel@kodafritt.se>
Subject: [PATCH] css: Optional support for dark mode
Date: Sun, 1 Jan 2023 22:15:23 +0100 [thread overview]
Message-ID: <20230101214103.1E52F19A2@badger.kodafritt.se> (raw)
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
next reply other threads:[~2023-01-01 21:41 UTC|newest]
Thread overview: 13+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-01-01 21:15 Samuel Lidén Borell [this message]
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
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20230101214103.1E52F19A2@badger.kodafritt.se \
--to=samuel@kodafritt.se \
--cc=cgit@lists.zx2c4.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
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).