From mboxrd@z Thu Jan 1 00:00:00 1970 X-Spam-Checker-Version: SpamAssassin 3.4.4 (2020-01-24) on inbox.vuxu.org X-Spam-Level: X-Spam-Status: No, score=-3.3 required=5.0 tests=MAILING_LIST_MULTI, RCVD_IN_DNSWL_MED autolearn=ham autolearn_force=no version=3.4.4 Received: (qmail 10236 invoked from network); 1 Jan 2023 21:41:18 -0000 Received: from lists.zx2c4.com (165.227.139.114) by inbox.vuxu.org with ESMTPUTF8; 1 Jan 2023 21:41:18 -0000 Received: by lists.zx2c4.com (ZX2C4 Mail Server) with ESMTP id a8faf917; Sun, 1 Jan 2023 21:41:06 +0000 (UTC) Return-Path: Received: from badger.kodafritt.se (badger.kodafritt.se [2a02:752:0:18::12]) by lists.zx2c4.com (ZX2C4 Mail Server) with ESMTPS id e5e0c9df (TLSv1.3:TLS_AES_256_GCM_SHA384:256:NO) for ; Sun, 1 Jan 2023 21:41:03 +0000 (UTC) Received: by badger.kodafritt.se (Postfix, from userid 1019) id 1E52F19A2; Sun, 1 Jan 2023 22:41:03 +0100 (CET) From: =?UTF-8?q?Samuel=20Lid=C3=A9n=20Borell?= Date: Sun, 1 Jan 2023 22:15:23 +0100 Subject: [PATCH] css: Optional support for dark mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit To: cgit@lists.zx2c4.com Cc: =?UTF-8?q?Samuel=20Lid=C3=A9n=20Borell?= Message-Id: <20230101214103.1E52F19A2@badger.kodafritt.se> X-BeenThere: cgit@lists.zx2c4.com X-Mailman-Version: 2.1.30rc1 Precedence: list List-Id: List for cgit developers and users List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: cgit-bounces@lists.zx2c4.com Sender: "CGit" 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 --- 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