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

Size10 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. 🚀

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.08.04
@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	fg	        "Foreground"	            white
@var	color	bg	        "Background"	            black
@var	color	bg1	        "Background lightened 1"	#111111
@var	color	bg2	        "Background lightened 2"	#222222
@var	color	link-color	"Link"                    #0b84ff
==/UserStyle== */

dark-scheme()
  :root
    color-scheme dark

text()
  color fg

background(variant = bg)
  background-color variant

background1()
  background(bg1)

background2()
  background(bg2)

link()
  color link-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
    text()

  body
    background()

  div.box
  #news h3 a
  code
  pre
    background1()

  #pkgsearch
    background1()
    input
      text()
      background1()

  .pkgsearch-typeahead
    background1()
    li a
      text()

  h3 span.arrow
    border-top-color bg1

@-moz-document url-prefix("https://archlinux.org/packages"), url-prefix("https://aur.archlinux.org/packages")
  .results
    th
      background()
    tr:nth-child(odd)
    tr:nth-child(even)
      background1()

  #pkglist-results tr:hover
    background()

  #pkgdetails
    #metadata h3
    #detailslinks > div
      background()

@-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

@-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:#888888; }
    div#cgit table.blob .kwa { color:#ffff00; font-weight:bold; }
    div#cgit table.blob .kwb { color:#00ff00; }
    div#cgit table.blob .kwc { color:#26e0e7; font-weight:bold; }
    div#cgit table.blob .kwd { color:#f34627; }
  }


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

  body
    text()
    background()

  code
    background1()
  table.styled-table
    background()
    th
    tr:hover
      background1()

@-moz-document url-prefix("https://man.archlinux.org/search")
  .box
    background1()

@-moz-document url-prefix("https://man.archlinux.org/man")
  .man-pag...

Reviews

No reviews yet.