Dark Arch by riedler

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

Dark Arch screenshot
Install Get Stylus Write a review

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]]*/;
	}
}

Reviews

No reviews yet.