Skip to content

Arch Linux Dark by aruncveli

Imported and mirrored from https://github.com/aruncveli/userstyles/raw/main/archlinux/archlinux.user.styl

Screenshot of Arch Linux Dark
Homepage Write a review Install Get Stylus

Details

Authoraruncveli

LicenseMIT

Categoryarchlinux

Created

Updated

Size11 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dark theme for some (simpler) Arch Linux pages: Home, Packages, AUR and Download.

Notes

For the AUR cgit, dark mode styles from cgit homepage are copied as is.

Since the Wiki is a different kind of beast, I recommend the amazing work put into Wikipedia-Dark. 🚀 Or the MediaWiki's own dark mode.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Arch Linux Dark
@namespace      github.com/aruncveli/userstyles
@version        24.09.30
@description    Dark theme for some (simpler) Arch Linux pages: Home, Packages, AUR and Download.
@author         Arun Chandanaveli <aruncveli@gmail.com> (https://github.com/aruncveli)
@homepageURL    https://github.com/aruncveli/userstyles
@supportURL     https://github.com/aruncveli/userstyles/issues
@license        MIT
@preprocessor   stylus
@var	color	cfg  "Foreground"	            white
@var	color	cbg	"Background"	            black
@var	color	cbg1	"Background lightened 1"	#111111
@var	color	cbg2	"Background lightened 2"	#222222
@var	color	cbg3 "Background lightened 3"	#333333
@var	color	link-color	"Link"                    #0b84ff
@var	color	red-color	  "Red"                     #ff443a
==/UserStyle== */

dark-scheme()
  :root
    color-scheme dark

fg()
  color cfg

bg(color = cbg)
  background-color color

bg1()
  bg(cbg1)

bg2()
  bg(cbg2)

bg3()
  bg(cbg3)

link()
  color link-color

bcr(color = cbg, radius = 16px)
  border-color color
  border-radius radius

bbc(color = cbg)
  border-bottom-color color

btc(color = cbg)
  border-top-color color

@-moz-document url-prefix("https://archlinux.org"), url-prefix("https://aur.archlinux.org"), url-prefix("https://man.archlinux.org")
  a:link
  a:visited
  a:hover
  a:visited:hover
    link()

@-moz-document url-prefix("https://archlinux.org"), url-prefix("https://aur.archlinux.org")
  dark-scheme()

  body
  dl dt
    fg()

  body
    bg()

  div.box
    bcr(cbg1)

  div.box
  code
  pre
    bg1()

  #news
    h4
      bbc()
    h3 a
      bg1()
      bcr(cbg1)

  pre
    bg1()
    bcr(cbg1)

  #pkgsearch
    bg1()
    bcr(cbg1)
    input
      fg()
      bg2()
      bcr(cbg2, 4px)

  .pkgsearch-typeahead
    bg3()
    bcr(cbg3, 4px)
    li a
      fg()

  h3 span.arrow
    btc(cbg1)

  h2
    bbc(cbg1)

  dl
    dt
    dd
      btc(cbg)

@-moz-document url-prefix("https://archlinux.org/packages"), url-prefix("https://aur.archlinux.org/packages")
  table.results
    btc(cbg1)

  .results
    th
      bg2()
      bbc(cbg2)
    tr:nth-child
      &(odd)
      &(even)
        bg1()


  #pkglist-results tr:hover
    bg2()

  #pkgdetails
    #metadata h3
      bg2()
      bcr(cbg2, 4px)
    #detailslinks > div
      bg2()
      bcr(cbg2, 12px)
    #actionlist .flagged
      color red-color

  .comment-header
    bbc()

@-moz-document url-prefix("https://aur.archlinux.org")
  form.link button
  #archdev-navbar li a
    link()

@-moz-document url-prefix("https://aur.archlinux.org/packages")
  .text-button
    link()
    &:hover
      link()

  .flagged a
    color red-color

  .comments-header h3 span.text
    bg1()
    bcr(cbg1)

  .edited
    fg()

@-moz-document url-prefix("https://aur.archlinux.org/cgit")
  @css {
    div#cgit { color: #eee; background: #171717; }
    div#cgit a { color: #3af; }
    div#cgit .diffstat-header a { color: #28d; }
    div#cgit table#header td.main a { color: #eee; }
    div#cgit table#header td.sub { color: #999; }
    div#cgit table.tabs { border-bottom-color: #444; }
    div#cgit table.tabs td a { color: #888; }
    div#cgit table.tabs td a.active { color: #fff; background-color: #444; }
    div#cgit div.path { color: #eee; background-color: #333; }
    div#cgit div.content { border-bottom-color: #bbb; }
    div#cgit table.list tr { background: #171717; }
    div#cgit table.list tr.logheader { background: #171717; }
    div#cgit table.list tr:nth-child(even) { background: #171717; }
    div#cgit table.list tr:nth-child(odd) { background: #1f1f1f; }
    div#cgit table.list tr:hover { background: #333; }
    div#cgit table.list tr.nohover { background: #171717; }
    div#cgit table.list tr.nohover:hover { background: #171717; }
    div#cgit table.list tr.nohover-highlight:hover:nth-child(even) { background: #171717; }
    div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) { background: #1f1f1f; }
    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: #eee; }
    div#cgit table.list td a.ls-dir { color: #28d; }
    div#cgit table.list td a:hover { color: #3af; }
    div#cgit table#downloads { border-color: #888; }
    div#cgit table#downloads th { background-color: #333; }
    div#cgit div#blob { border-color: #eee; }
    div#cgit table.blob { border-top-color: #eee; }
    div#cgit table.blob td.hashes,
    div#cgit table.blob td.lines { color: #eee; }
    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: #eee; }
    div#cgit table.blame div.alt:nth-child(even) { background: #171717; }
    div#cgit table.blame div.alt:nth-child(odd) { background: #1f1f1f; }
    div#cgit table.bin-blob { border-color: #eee; }
    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: #282828; }
    div#cgit div.notes { border-color: #661; background-color: #220; }
    div#cgit table.diffstat { border-color: #555; background-color: #282828; }
    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: #3af; }
    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: #eee; }
    div#cgit table.diff td div.hunk { color: #28d; }
    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: #9d9; }
    div#cgit span.age-weeks { color: #bbb; }
    div#cgit span.age-months { color: #888; }
    div#cgit span.age-years { color: #666; }
    div#cgit span.insertions { color: #7f7; }
    div#cgit span.deletions { color: #e33; }
    div#cgit div.footer { color: #555; }
    div#cgit div.footer a { color: #555; }
    div#cgit a.branch-deco { color: #fff; background-color: #361; border-color: #3b2; }
    div#cgit a.tag-deco { color: #fff; background-color: #650; border-color: #ba3; }
    div#cgit a.tag-annotated-deco { color: #fff; background-color: #840; border-color: #b96; }
    div#cgit a.remote-deco { color: #fff; background-color: #348; border-color: #67c; }
    div#cgit a.deco { color: #fff; background-color: #922; border-color: #d55; }
    div#cgit a.branch-deco:hover,
    div#cgit table.list td a.branch-deco:hover,
    div#cgit a.tag-deco:hover,
    div#cgit table.list td a.tag-deco:hover,
    div#cgit a.tag-annotated-deco:hover,
    div#cgit table.list td a.tag-annotated-deco:hover,
    div#cgit a.remote-deco:hover,
    div#cgit table.list td a.remote-deco:hover,
    div#cgit a.deco:hover,
    div#cgit table.list td a.deco:hover { color: #fff; }
    div#cgit table.stats { border-color: #555; }
    div#cgit table.stats th { background-color: #333; border-color: #555; }
    div#cgit table.stats td { border-color: #555; }
    div#cgit table.stats td.sum { color: #5c7e9b; }
    div#cgit table.vgraph { border-color: #eee; }
    div#cgit table.vgraph th { background-color: #1f1f1f; border-color: black; }
    div#cgit table.vgraph div.bar { background-color: #1f1f1f; }
    div#cgit table.hgraph { border-color: #eee; }
    div#cgit table.hgraph th { background-color: #1f1f1f; border-color: #eee; }
    div#cgit table.hgraph div.bar { background-color: #1f1f1f; }
    div#cgit table.ssdiff td { border-left-color: #555; border-right-color: #555; }
    div#cgit table.ssdiff td.add { color: #eee; background: #353; }
    div#cgit table.ssdiff td.add_dark { color: #eee; background: #030; }
    div#cgit table.ssdiff span.add { background: #030; }
    div#cgit table.ssdiff td.del { color: #eee; background: #533; }
    div#cgit table.ssdiff td.del_dark { color: #eee; background: #411; }
    div#cgit table.ssdiff span.del { background: #300; }
    div#cgit table.ssdiff td.changed { color: #eee; background: #553; }
    div#cgit table.ssdiff td.changed_dark { color: #eee; background: #330; }
    div#cgit table.ssdiff td.lineno { color: #eee; background: #1f1f1f; }
    div#cgit table.ssdiff td.hunk { color: #eee; background: #0d3d64; 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: #eee; }
    div#cgit table.ssdiff td.foot { border-top-color: #555; }

    // These are modified as per https://gitlab.com/saalen/highlight/-/blob/master/themes/darkness.theme,    // of which the arch linux site uses the edit-kwrite.theme    div#cgit table.blob .num { color:#619de7; }
    div#cgit table.blob .esc { color:#00abab; }
    div#cgit table.blob .str { color:#abab00; }
    div#cgit table.blob .pps { color:#abab00; }
    div#cgit table.blob .slc { color:#008888; font-style:italic; }
    div#cgit table.blob .com { color:#008888; font-style:italic; }
    div#cgit table.blob .ppc { color:#1da3cf; }
    div#cgit table.blob .opt { color:#ff00ff; }
    div#cgit table.blob .ipl { color:#db70b8; }
    div#cgit table.blob .lin { color...

Reviews

No reviews yet.