summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLibravatarKrytarik Raido <krytarik@gmail.com>2021-03-21 00:13:04 +0100
committerLibravatarKrytarik Raido <krytarik@gmail.com>2021-03-21 00:13:04 +0100
commit6da1fb12380db7ae1cd1597750a623cc658edb1b (patch)
tree8704954acca32a9c81f164da7d677dd00e24f51e
parent0cdc688555ea07bee362f76b9ce610b1801340af (diff)
downloadcgit-assets-6da1fb12380db7ae1cd1597750a623cc658edb1b.tar.bz2
cgit-assets-6da1fb12380db7ae1cd1597750a623cc658edb1b.tar.xz
cgit-assets-6da1fb12380db7ae1cd1597750a623cc658edb1b.tar.zst
Add dark theme.
-rw-r--r--.gitignore2
-rw-r--r--custom.css.in4
-rw-r--r--dark.css187
3 files changed, 192 insertions, 1 deletions
diff --git a/.gitignore b/.gitignore
index b3a5267..a15e610 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1 @@
-*.css
+custom.css
diff --git a/custom.css.in b/custom.css.in
index 71b860d..88df7a7 100644
--- a/custom.css.in
+++ b/custom.css.in
@@ -27,3 +27,7 @@ div#cgit span.libravatar:hover > img.onhover {
background-color: #eeeeee;
box-shadow: 2px 2px 7px rgba(100,100,100,0.75);
}
+
+@media (prefers-color-scheme: dark) {
+m4_include(dark.css)
+}
diff --git a/dark.css b/dark.css
new file mode 100644
index 0000000..dc7eef3
--- /dev/null
+++ b/dark.css
@@ -0,0 +1,187 @@
+/***
+ * CGit Dark theme
+ * by Krytarik Raido <krytarik@gmail.com>
+ *
+ ***/
+
+body {
+ background-color: rgb(37, 37, 37);
+}
+
+div#cgit, div#cgit div.path {
+ background: rgb(37, 37, 37);
+ color: rgb(230, 230, 230);
+}
+
+/*** Hyperlinks ***/
+
+div#cgit table#header td.main a,
+div#cgit table.list td a {
+ color: rgb(230, 230, 230);
+}
+
+div#cgit table.list td .decoration a {
+ color: rgb(37, 37, 37);
+}
+
+div#cgit a, div#cgit a:hover,
+div#cgit table.list td a:hover,
+div#cgit table.list td a.ls-dir,
+div#cgit table.diffstat td.upd a,
+div#cgit table.blob td.linenumbers a:hover,
+div#cgit table.ssdiff td.lineno a:hover {
+ color: rgb(79, 140, 201);
+}
+
+/*** Controls ***/
+
+div#cgit table#header td.form input,
+div#cgit table#header td.form select,
+div#cgit table.tabs td.form input,
+div#cgit table.tabs td.form select,
+div#cgit div.cgit-panel td.ctrl input,
+div#cgit div.cgit-panel td.ctrl select {
+ background-color: rgb(52, 52, 52);
+ border-color: rgb(52, 52, 52);
+ color: rgb(230, 230, 230);
+}
+
+div#cgit div.cgit-panel table {
+ background-color: rgb(52, 52, 52);
+ border-color: rgb(37, 37, 37);
+}
+
+/*** Lists ***/
+
+div#cgit table.list tr:nth-child(2n),
+div#cgit table.list tr.nohover-highlight:hover:nth-child(2n) {
+ background-color: rgb(43, 43, 43);
+}
+
+div#cgit table.list tr.nohover,
+div#cgit table.list tr.nohover:hover,
+div#cgit table.list tr:nth-child(2n+1),
+div#cgit table.list tr.nohover-highlight:hover:nth-child(2n+1) {
+ background-color: rgb(37, 37, 37);
+}
+
+div#cgit span.age-days {
+ color: #060;
+}
+
+/*** Diffs ***/
+
+div#cgit table.diff td div.head {
+ color: rgb(230, 230, 230);
+}
+
+div#cgit table.diff td div.hunk {
+ color: grey;
+}
+
+div#cgit table.diffstat {
+ background-color: rgb(37, 37, 37);
+ border-color: rgb(37, 37, 37);
+}
+
+/*** Stats ***/
+
+div#cgit table.stats th {
+ background-color: rgb(52, 52, 52);
+}
+
+div#cgit table.stats th,
+div#cgit table.stats td {
+ border-color: rgb(52, 52, 52);
+}
+
+/*** Blobs ***/
+
+div#cgit table.blob td.lines,
+div#cgit table.blob .kwa,
+div#cgit table.blob .kwc,
+div#cgit table.blob .opt {
+ color: rgb(230, 230, 230);
+}
+
+div#cgit table.blob .kwd {
+ color: #0057ae;
+}
+
+/*** Blames ***/
+
+div#cgit table.blame div.alt:nth-child(2n) {
+ background-color: rgb(43, 43, 43);
+}
+
+div#cgit table.blame div.alt:nth-child(2n+1) {
+ background-color: rgb(37, 37, 37);
+}
+
+/*** Libravatar ***/
+
+div#cgit span.libravatar img.inline {
+ background-color: #eee;
+}
+
+/*** Markdown ***/
+
+.markdown-body h1, .markdown-body h2,
+.markdown-body h1 a.toclink, .markdown-body h2 a.toclink, .markdown-body h3 a.toclink,
+.markdown-body h4 a.toclink, .markdown-body h5 a.toclink, .markdown-body h6 a.toclink,
+.markdown-body h1 .mini-icon-link, .markdown-body h2 .mini-icon-link, .markdown-body h3 .mini-icon-link,
+.markdown-body h4 .mini-icon-link, .markdown-body h5 .mini-icon-link, .markdown-body h6 .mini-icon-link {
+ color: rgb(230, 230, 230) !important;
+}
+
+.markdown-body h6, .markdown-body blockquote {
+ color: #888 !important;
+}
+
+.markdown-body code, .markdown-body tt, .markdown-body .highlight,
+.markdown-body pre, .markdown-body .highlight pre {
+ background-color: rgb(52, 52, 52) !important;
+ border-color: rgb(52, 52, 52) !important;
+}
+
+.markdown-body table tr {
+ background-color: rgb(37, 37, 37) !important;
+}
+
+.markdown-body table tr:nth-child(2n) {
+ background-color: rgb(43, 43, 43) !important;
+}
+
+/*** ReST ***/
+
+div#summary div.sidebar { background-color: rgb(52, 52, 52) !important }
+div#summary pre.code, div#summary code { background-color: rgb(52, 52, 52) !important }
+div#summary pre.code .comment, div#summary code .comment { color: #888 !important }
+div#summary pre.code .keyword, div#summary code .keyword { color: #080 !important }
+div#summary pre.code .literal.string, div#summary code .literal.string {
+ color: #d20 !important; background-color: rgb(65, 52, 52) !important }
+div#summary pre.code .name.builtin, div#summary code .name.builtin { color: #20b2aa !important }
+div#summary pre.code .deleted, div#summary code .deleted { background-color: rgb(166, 23, 23) !important }
+div#summary pre.code .inserted, div#summary code .inserted { background-color: rgb(52, 65, 52) !important }
+
+/*** Syntax highlighting ***/
+
+.highlight .cs, .highlight .s, .highlight .sa, .highlight .sb, .highlight .sc,
+.highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh,
+.highlight .si, .highlight .sx, .highlight .sr, .highlight .s1, .highlight .ss,
+.highlight .err { background-color: rgb(65, 52, 52) !important }
+
+.highlight .gd { color: rgb(166, 23, 23) !important; background-color: rgb(65, 52, 52) !important }
+.highlight .gi { color: rgb(23, 166, 23) !important; background-color: rgb(52, 65, 52) !important }
+
+.highlight .hll { background-color: rgb(65, 65, 52) !important }
+td.linenos .special, span.linenos.special { color: rgb(230, 230, 230) !important; background-color: rgb(65, 65, 52) !important }
+
+.highlight .gp, .highlight .gu, .highlight .nd { color: #888 !important }
+.highlight .gh, .highlight .si, .highlight .vi { color: #777 !important }
+
+.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh,
+.highlight .mi, .highlight .mo, .highlight .il { color: #20b2aa !important }
+.highlight .no, .highlight .nb, .highlight .bp { color: #20b2aa !important }
+
+.highlight .se { color: #15e !important }