Dark Arch by riedler
Mirrored from https://github.com/RiedleroD/userstyles-riedler/raw/master/darkarch.user.css

Details
Authorriedler
LicenseCC BY-SA 4.0
Created
Updated
Categoryarchlinux.org
Statistics
Learn how we calculate statistics in the FAQ.
Total views
Total installs
Weekly installs
Weekly updates
Description
Dark mode for archlinux.org (except for gitlab and the wiki)
Notes
Version: 0.1.3
Changelog (since 0.1.2)
All:
- styled all textarea elements
- set color-scheme to 'dark'
- spaced out selection box contents
- set new link & scheme colors to my usual ones (better contrast)
- filtered arch logo to be in line with color scheme
- fixed codeboxes
- fixed some link colors
- minor fixes
Forums:
- styled 'new message' block
- styled some menu items when hovered
- styled the rulebox
- styled header above userlist table
- styled checklists
- styled the line between message and signature
Source code
/* ==UserStyle==
@name Dark Arch
@namespace https://github.com/RiedleroD/userstyles-riedler/
@version 0.1.4
@description Dark mode for archlinux.org (except for gitlab and the wiki)
@author Riedler
@preprocessor uso
@var color bg0 "Background 0" #111
@var color bg1 "Background 1" #151515
@var color bg2 "Background 2" #222
@var color bg3 "Background 3" #282828
@var color bg4 "Background 4" #333
@var color cl1 "Main Color" #418BA4
@var color brd "Border" #888
@var color hbrd "Light Border" #AAA
@var text brdr "Border Radius" 0.25em
@var color dtxt "Dark Text" #888
@var color txt "Text" #AAA
@var color htxt "Bright Text" #CCC
@var color hhtxt "White Text" #FFF
@var color lnk "Link" #418BA4
@var color hlnk "Hovered Link" #6AC
@var color vlnk "Visited Link" #86A
@var color slc "Selections" #000
@var color fals "False/Red" #922
@var color hfals "Light False/Red" #E55
@var color idk "Maybe/Yellow" #A50
@var color hidk "Light Maybe/Yellow"#FA0
@var color tru "True/Green" #262
@var color htru "Light True/Green" #6C6
==/UserStyle== */
@-moz-document regexp("https?:\\/\\/(?:(?!wiki)(?!gitlab)[^\\/])*archlinux.org(/.*)?"){
/*scrollbars (yes you can style those)*/
::-webkit-scrollbar,::-webkit-scrollbar-track-piece{
background-color:/*[[bg1]]*/ !important;}
::-webkit-scrollbar-corner,::-webkit-scrollbar-thumb{
background-color:/*[[bg3]]*/ !important;
border-radius:/*[[brdr]]*/;}
:root{/*for firefox*/
scrollbar-width:thin;
scrollbar-color:/*[[cl1]]*/ /*[[bg0]]*/;
color-scheme:dark;
}
/*text selctions (yes you can style those too)*/
::selection{
background-color:/*[[slc]]*/;
color:/*[[hhtxt]]*/;}
/*various blocks*/
:root,body,
#content,#punindex{
background-color:/*[[bg0]]*/;
color:/*[[txt]]*/;}
div.box{
background-color:/*[[bg2]]*/;
border-color:/*[[brd]]*/;
border-radius:/*[[brdr]]*/;}
#pkgdetails #detailslinks > div{
background-color:/*[[bg2]]*/;
border-color:/*[[brd]]*/;
border-radius:/*[[brdr]]*/;}
#pkgdetails #metadata h3{
background-color:/*[[bg4]]*/;
color:/*[[htxt]]*/;}
div#menu,
div#pm-menu,
div#search,
fieldset,
div#search fieldset,
div#tasklist,
div#taskinfo,
div#fineprint,
table.userlist,
#punviewforum,
.pun,
.pun .blockpost,
.pun .blockpost .postbody,
.pun .blockpost .postfoot{
background-color:/*[[bg2]]*/;
border-color:/*[[brd]]*/;
color:/*[[txt]]*/;}
div#taskdetails,
div#related,
div#comments,
div#history,
.pun .punwrap,
.pun .blocktable .box{
background-color:/*[[bg2]]*/;
border-color:/*[[brd]]*/;
border-radius:/*[[brdr]]*/;
color:/*[[txt]]*/;}
div#taskclosed{
background-color:/*[[bg2]]*/;
border-color:/*[[fals]]*/}
.pun .blockpost h2,
.pun .quotebox{
background-color:/*[[bg4]]*/;
border-color:/*[[brd]]*/;
color:/*[[htxt]]*/;}
div.attachments{
background-color:/*[[bg3]]*/;
border-color:/*[[brd]]*/;
border-radius:/*[[brdr]]*/;
background-blend-mode:exclusion;}
/*navbars & menus*/
#archnavbar{
border-bottom-color:/*[[cl1]]*/ !important;}
#archnavbarlogo{
filter:hue-rotate(354deg) saturate(50%) brightness(115%);
}
#submenu a{
background-color:/*[[bg2]]*/;
border-color:/*[[brd]]*/;
border-radius:/*[[brdr]]*/ /*[[brdr]]*/ 0 0;}
#submenu a:hover{
background-color:/*[[bg3]]*/;
color:/*[[htxt]]*/;}
#submenu a.active{
background-color:/*[[bg3]]*/;
color:/*[[txt]]*/;
border-color:/*[[hbrd]]*/;}
#brdmenu{
background:none;}
/*text related stuff*/
a:link,
.pun a,
.pun a:link,
.pun a:visited{
color:/*[[lnk]]*/;}
#brdmenu a,
#brdmenu a:link,
#brdmenu a:visited{
background:none;
border-color:#0000;
color:/*[[lnk]]*/;
}
a:link:hover{
color:/*[[hlnk]]*/;}
.pun a:hover,
#brdmain a:hover{
color:/*[[hlnk]]*/ !important;}
a:visited,
#brdmain a:visited{
color:/*[[vlnk]]*/;}
.pun a:active,
#brdmain a:active{
color:/*[[hlnk]]*/ !important;
}
span#searchstate a,
.pun .postmsg,
#punhelp code,
#punhelp samp{
color:/*[[txt]]*/;}
span#searchstate a:hover,
fieldset legend,
.pun .quotebox cite{
color:/*[[htxt]]*/;}
.pun label,
.pun legend,
#adminconsole fieldset th,
.pun .postsignature,
.pun .postmsg .postedit{
color:/*[[dtxt]]*/;}
/*codeblocks*/
/*
testing URLs: https://bbs.archlinux.org/viewtopic.php?id=274693
https://archlinux.org/news/libxml22912-6-update-may-require-manual-intervention/
https://aur.archlinux.org/cgit/aur.git/tree/PKGBUILD?h=nosefart
*/
.pun .codebox{
background-color:/*[[bg0]]*/;
color:/*[[htxt]]*/;
border-color:/*[[brd]]*/;
border-radius:/*[[brdr]]*/;
}
pre{
border:none;
border-radius:/*[[brdr]]*/;
background-color:/*[[bg0]]*/;
color:/*[[txt]]*/;
outline:solid 1px /*[[brd]]*/;
}
code{
background-color:/*[[bg0]]*/;
color:/*[[txt]]*/;
outline:solid 1px #000;
}
.pun .codebox pre,
.pun .codebox code{
outline:none;
}
pre code{
outline:none;
}
/*various input elements*/
select{
background-color:/*[[bg3]]*/;
color:/*[[txt]]*/;
border:solid 1px /*[[brd]]*/;
border-radius:/*[[brdr]]*/;}
select:not([multiple]){
appearance:none;
background-image:url("https://riedler.wien/sfto/darklearning/double_triangles_top_bottom_AAA.svg");
background-repeat:no-repeat;
background-size:0.75em;
background-position:center right 0.125em;
cursor:pointer;
padding-right:1em;}
select:not([multiple]):hover{
background-color:/*[[bg4]]*/;
color:/*[[htxt]]*/;}
option:hover{
background-color:/*[[bg4]]*/;
color:/*[[htxt]]*/;
cursor:pointer;}
option{
box-shadow:none !important;}
button,
a.button{
background-color:/*[[bg3]]*/;
border-color:/*[[brd]]*/;
border-radius:/*[[brdr]]*/;
color:/*[[txt]]*/;}
button:hover,
a.button:hover{
background-color:/*[[bg4]]*/;
color:/*[[htxt]]*/;}
input[type="text"],
input[type="password"]{
background-color:/*[[bg3]]*/;
color:/*[[txt]]*/;
border:solid 1px /*[[brd]]*/;
border-radius:/*[[brdr]]*/;}
input[type="submit"]{
appearance:none;
background-color:/*[[bg3]]*/;
color:/*[[txt]]*/;
border:solid 1px /*[[brd]]*/;
border-radius:/*[[brdr]]*/;
cursor:pointer;}
input[type="submit"]:hover{
background-color:/*[[bg4]]*/;
color:/*[[htxt]]*/;}
input[type="checkbox"]{
appearance:none;}
input[type="checkbox"]:after{
width:1em;
height:1em;
background-color:/*[[bg3]]*/;
display:inline-block;
content:"";
text-align:center;
vertical-align:middle;
border-radius:/*[[brdr]]*/;
padding:0.05em;
line-height:1em;
cursor:pointer;
border:solid 1px /*[[brd]]*/;}
input[type="checkbox"]:checked:after{
content:"\02713";}
input[type="checkbox"]:hover:after{
background-color:/*[[bg4]]*/;
color:/*[[htxt]]*/;}
input[type="radio"]{
appearance:none;
width:1em;
height:1em;
background-color:/*[[bg3]]*/;
border:solid 1px /*[[brd]]*/;
border-radius:100%;}
input[type="radio"]:checked{
box-shadow:inset 0 0 0 0.2em /*[[bg3]]*/;
background-color:/*[[txt]]*/;}
textarea{
background-color:/*[[bg0]]*/;
border:solid 1px /*[[brd]]*/;
color:/*[[txt]]*/;
border-radius:/*[[brdr]]*/;
}
/*various tables*/
table.styled-table tr td{
background-color:/*[[bg2]]*/;
border-color:/*[[brd]]*/;}
table.styled-table{
border-color:/*[[brd]]*/;
/*TODO: fix border radius not being applied.
It has something to do with the border collapse
but I'm too lazy to fix it now without fucking
up the table borders.
Example: https://security.archlinux.org/package/sl*/
border-radius:/*[[brdr]]*/;
background-color:/*[[bg2]]*/;}
.results{
border-color:/*[[brd]]*/;}
.results tr:nth-child(2n+1),
#article-list tr:nth-child(2n+1){
background-color:/*[[bg2]]*/;}
.results tr:nth-child(2n),
#article-list tr:nth-child(2n){
background-color:/*[[bg3]]*/;}
#article-list tr:hover,
#clocks-table tr:hover,
#dev-dashboard tr:hover,
#dev-todo-lists tr:hover,
#dev-todo-pkglist tr:hover,
#pkglist-results tr:hover,
#stats-area tr:hover{
background-color:/*[[bg4]]*/;}
.results th{
background-color:/*[[bg4]]*/;
border-color:/*[[brd]]*/;}
div#tasklist table td{
border-bottom:1px solid /*[[brd]]*/;}
td.task_summary a:hover{
color:/*[[hlnk]]*/ !important;}
td.task_summary a:visited{
color:/*[[vlnk]]*/ !important;}
td#taskfieldscell{
border-right-color:/*[[brd]]*/;}
.pun .blocktable td{
border-color:/*[[brd]]*/;}
.pun .blocktable th{
background-color:/*[[bg3]]*/;
border-color:/*[[brd]]*/;
color:/*[[htxt]]*/;}
#punindex .blocktable h2,
.pun #vf h2{
color:/*[[htxt]]*/;}
/*bug severity*/
.severity1{
background-color:#432 !important;
color:/*[[txt]]*/;}
.severity1:hover{
background-color:#543 !important;
color:/*[[htxt]]*/;}
.severity2{
background-color:#631 !important;
color:/*[[txt]]*/;}
.severity2:hover{
background-color:#742 !important;
color:/*[[htxt]]*/;}
.severity3{
background-color:#822 !important;
color:/*[[txt]]*/;}
.severity3:hover{
background-color:#933 !important;
color:/*[[htxt]]*/;}
.severity4{
background-color:#911 !important;
color:/*[[txt]]*/;}
.severity4:hover{
background-color:#A22 !important;
color:/*[[htxt]]*/;}
.severity5{
background-color:#000 !important;
background-image:repeating-linear-gradient(10deg, #000 0%, #440 1%,#000 2%) !important;
color:/*[[htxt]]*/;}
.severity5:hover{
background-color:#000 !important;
background-image:repeating-linear-gradient(10deg, #000 0%, #550 1%,#000 2%) !important;
color:/*[[hhtxt]]*/;}
/*misc*/
h2.summary{
border-radius:/*[[brdr]]*/;}
#pkgsearch{
background-color:/*[[bg2]]*/;
border-color:/*[[cl1]]*/;
border-radius:/*[[brdr]]*/;}
#pkgsearch input{
background-color:/*[[bg2]]*/;
border-color:/*[[cl1]]*/;
color:/*[[txt]]*/;}
.pkgsearch-typeahead{
background-color:/*[[bg3]]*/;
border-color:/*[[cl1]]*/;
border-radius:/*[[brdr]]*/;}
.pkgsearch-typeahead li a{
color:/*[[txt]]*/;}
.pkgsearch-typeahead li:hover{
background-color:/*[[bg4]]*/;
cursor:pointer;}
.pkgsearch-typeahead li:hover a{
text-decoration:underline;}
.pun .icon{/*not sure what these are exactly*/
border-color:/*[[bg4]]*/;}
/*image replacement or filters*/
img[src~="/static/icons8_logo.91378e9a3b77.png"]{
filter:invert(0.8) hue-rotate(180deg);}
img[src^="https://bugs.archlinux.org/themes/ArchLinux/percent-"]{
filter:brightness(2) saturate(0.5);}
.datelink>img{
filter:brightness(0.85);}
.attachments>a>img[src$="text.png"]{
filter:brightness(0.6) contrast(3);}
}
@-moz-document domain("www.archlinux.org"), domain("aur.archlinux.org"){
/*home*/
dl dt{
color:/*[[dtxt]]*/;}
#news h3 a{
background-color:/*[[cl1]]*/;}
h3 span.arrow{
border-top-color:/*[[cl1]]*/;}
}
@-moz-document domain("aur.archlinux.org"){
div#cgit table.tabs,
div#cgit div.content{
border-bottom-color:/*[[bg3]]*/;
}
div#cgit table.tabs td a.active{
background-color:/*[[bg3]]*/;
color:/*[[txt]]*/;
}
div#cgit div.path{
background-color:/*[[bg3]]*/;
color:/*[[txt]]*/;
}
div#cgit a,
div#cgit table.diffstat td.upd a{
color:/*[[lnk]]*/;
}
div#cgit a:hover,
div#cgit table.diffstat td.upd a:hover{
color:/*[[hlnk]]*/;
}
div#cgit table.blob td.linenumbers{
border:solid 1px /*[[brd]]*/;
border-right:none;
border-radius:0.25em 0 0 0.25em;
padding:calc(0.25em + 1px) 0.5em;
}
div#cgit table.blob td.linenumbers pre{
outline:none;
}
div#cgit table.blob td.lines{
border:solid 1px /*[[brd]]*/;
padding:0.25em 0.5em;
border-radius:0 /*[[brdr]]*/ /*[[brdr]]*/ 0;
}
div#cgit table.blob td.lines pre{
outline:none;
}
div#cgit table{
/*fixes problem with border-radius*/
border-collapse:separate;
border-spacing:0;
}
/*table lists*/
div#cgit table.list tr,
div#cgit table.list tr.nohover:hover{
background-color:/*[[bg0]]*/;
}
div#cgit table.list tr.logheader,
div#cgit table.list tr:hover{
background-color:/*[[bg2]]*/;
}
div#cgit table.list td a{
color:/*[[txt]]*/;
}
div#cgit table.list td a:hover{
color:/*[[hlnk]]*/;
}
/*diff codeblock - unified mode*/
div#cgit table.diff td div.head{
color:/*[[txt]]*/;
}
div#cgit table.diff td div.hunk{
color:/*[[cl1]]*/;
}
div#cgit table.diff td div.del{
color:/*[[fals]]*/;
}
div#cgit table.diff td div.add{
color:/*[[tru]]*/;
}
/*diff codeblock - ssdiff mode*/
div#cgit table.ssdiff td.head div.head{
color:/*[[txt]]*/;
}
div#cgit table.ssdiff td.hunk{
background-color:/*[[bg3]]*/;
color:/*[[htxt]]*/;
border-top:none;
}
div#cgit table.ssdiff td.lineno{
color:/*[[txt]]*/;
background-color:/*[[bg1]]*/;
border-right:none;
}
div#cgit table.ssdiff td.lineno ~ td.lineno{
border-left:none;
}
div#cgit table.ssdiff td.changed{
color:/*[[hidk]]*/;
background-color:/*[[idk]]*/;
}
div#cgit table.ssdiff td.del,
div#cgit table.ssdiff span.del{
background-color:/*[[fals]]*/;
color:/*[[hfals]]*/;
}
div#cgit table.ssdiff td.add,
div#cgit table.ssdiff span.add{
color:/*[[htru]]*/;
background-color:/*[[tru]]*/;
}
div#cgit table.ssdiff td.changed_dark,
div#cgit table.ssdiff td.add_dark,
div#cgit table.ssdiff td.del_dark{
background-color:#0000;
}
/*diff statistics table*/
div#cgit table.diffstat{
background-color:/*[[bg3]]*/;
border-color:/*[[brd]]*/;
border-radius:/*[[brdr]]*/;
border-collapse:separate;
}
div#cgit table.diffstat td.graph td.add{
background-color:/*[[tru]]*/;
}
div#cgit table.diffstat td.graph td.rem{
background-color:/*[[fals]]*/;
}
/*diff options sideblock*/
div#cgit div.cgit-panel table{
background-color:/*[[bg3]]*/;
border-radius:/*[[brdr]]*/;
border-collapse:separate;
}
/*package stats*/
div#cgit table.stats td{
border-color:/*[[brd]]*/;
}
div#cgit table.stats th{
background-color:/*[[bg3]]*/;
border-color:/*[[brd]]*/;
color:/*[[htxt]]*/;
}
div#cgit table.stats td.total{
background-color:/*[[bg3]]*/;
color:/*[[htxt]]*/;
}
div#cgit table.stats td.sum{
background-color:/*[[bg1]]*/;
color:/*[[txt]]*/;
}
div#cgit table.stats td.sum:last-child{
background-color:/*[[bg2]]*/;
color:/*[[htxt]]*/;
}
}
@-moz-document domain("security.archlinux.org"){
table th{
background-color:/*[[bg4]]*/;
border-color:/*[[brd]]*/;}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary{
background-color:/*[[cl1]]*/;
color:/*[[txt]]*/;
border-color:#0000;}
.button.button-primary:hover,
.button.button-primary:focus,
button.button-primary:hover,
button.button-primary:focus,
input[type="submit"].button-primary:hover,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:hover,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:hover,
input[type="button"].button-primary:focus{
background-color:/*[[cl1]]*/;
color:/*[[htxt]]*/;
border-color:#0000;
filter:brightness(1.2);}
}
@-moz-document domain("lists.archlinux.org"){
[bgcolor="#99CCFF"]{
background-color:/*[[cl1]]*/;}
[bgcolor="#FFF0D0"]{
background-color:/*[[bg4]]*/;}
[bgcolor="#dddddd"]{
background-color:/*[[bg3]]*/;}
font[color="#000000"]{
color:/*[[htxt]]*/;}
}
@-moz-document domain("bbs.archlinux.org"){
/*new message*/
.pun .blockform .box,
#adstats,
#adintro,
#postpreview,
#posterror{
border-color:/*[[brd]]*/;
background-color:/*[[bg3]]*/;
}
.pun #quickpost h2,
#punpost .blockform h2,
#punedit .blockform h2,
#posterror h2,
#pundelete .blockform h2{
background-color:/*[[bg3]]*/;
color:/*[[txt]]*/;
border-top-left-radius:/*[[brdr]]*/;
}
.pun .infldset,
#adintro .inbox,
#adstats .inbox{
background-color:/*[[bg3]]*/;
border:none;
}
.pun .inform > fieldset{
background-color:/*[[bg3]]*/;
}
/*menu*/
.pun .blockmenu ul,
.pun .blockmenu li{
border-color:/*[[brd]]*/;
}
.pun .blockmenu .isactive a:link,
.pun .blockmenu .isactive a:visited,
.pun .blockmenu a:hover,
.pun .blockmenu a:active,
.pun .blockmenu a:focus{
background-color:/*[[bg4]]*/;
}
/*rulebox*/
#punmisc #rules .box,
#punhelp .box{
border-color:/*[[brd]]*/;
background-color:/*[[bg3]]*/;
}
/*userlist table*/
.pun #users1 h2{
background-color:#0000;
}
/*a checklist*/
.pun .checklist{
background-color:/*[[bg2]]*/;
border-color:/*[[brd]]*/;
border-radius:/*[[brdr]]*/;
}
/*topics*/
.pun .inew .icon{
border-color:/*[[lnk]]*/;
}
/*hr before signatures*/
.pun .postmsg hr{
background-color:/*[[brd]]*/;
}
}