Tweakers Custom CSS, Dark Mode

gistfile1.txt

/*******
 General
 Example: https://i.imgur.com/fyo8CRs.png 
 ********/
/** Screw #layout and #contentArea height, give #html the same background colour */
html, body, #searchbar, #menubar, #fakeTop {
	background: #0E0E0E !important;
	color: #BFBFBF !important;
}


/** Overall background */
#layout {
	background: #0E0E0E !important;
	padding-top: 5px !important;
	height: 100% !important;
}

/** Give the actual content a different background colour */
#contentArea {
	background: #323434 !important;
	padding: 5px 5px 10px 5px !important;
	position: relative !important;
}

/* Global .bar style */
.bar {
	background-color: #323333;
	color: #BFBFBF;
}

/* Gallery */
.galleryHeadingContainer>div {
	border-top: none !important;
}
.galleryHeadingContainer, .pageTabsContainer {
	background-color: #212323 !important;
}
div.galleryBody h3.bar {
	background: #212323 !important;
}
.galleryTable.karma td {
	background: #323434 !important;
}
ul.galleryProfile li.checked {
	color: #BFBFBF !important;
}

/** Unsorted meuk */
h3, h3 a {
	color: #CCCCCC !important;
}


/** Bottom */
#bottom div.hr {
	background: #202020 !important;
}

/** Text boxes (search, reply) */
textarea#messageBox, input {
	color: #CCCCCC;
	background: #1E1E1E;
}

/** Menu */
.unread .newNotificationsCount {
	color: #000000 !important;
}
#menu li a {
	color: #C8CBCB !important;
}
#menu li.active a {
	color: #D9FF26 !important;
}
#menu .dropdown > span, .dropdown li, .dropdown li a, #menu .dropdown ul a {
	color: #000000 !important;
}

/** Notifications */
.notificationsPopup .header h3 {
	color: #000000 !important;
}
div.popup {
	background: #323131 !important;
}
.scrollableList .listItem:hover {
	background: #323434 !important;
}
.menuHeaderPopup .notification.unread:hover {
	background: #454444 !important;
}
.menuHeaderPopup .notification.unread {
	background: #414040 !important;
}

/** Tracker */
#tracker .trackeritem li a { 
	color: #B7B4B2 !important;
}
#tracker .trackeritem li .new, #tracker .trackeritem li a:hover, #tracker .trackeritem li a:hover .time { 
	color: #d9ff26 !important;
}
#tracker .trackeritem h4, #tracker .trackeritem h4 a { 
	color: #D7D6D4 !important;
}

/* Background color of tabs */
.pageTabs li {
	background: #212323 !important;
}
.pageTabs li.active {
	background: #323434 !important;
}

/* Hyperlinks */
a {
	color: #BFBFBF !important;
}
a:visited {
	color: #878888 !important;
}

/* Badges */
.labelCard, ul.topKarma.show {
	background: #000000 !important;
}


/*******
   FP
 *******/
/** Main content */
/* Tabs */
#fp_tabs li a {
	color: #ABAAAA !important;
}
#fp_tabs li.active a {
	color: #CCCCCC !important;
}

/* Whitepapers */
.itknowledgebasewrapper {
	background: #212323 !important;
}

/** Tile items */
.fpaItem>a {
	background: rgba(0,0,0,0.8);
}
.fpaTitle h2 {
	color: #b9133d !important;
}

/** Article Listing */
table.highlights td a {
	color: #BFBFBF !important;
}
table.highlights td a:visited {
	color: #888888 !important;
}

table.highlights {
	border-top: 1px solid #000 !important;
}
table.highlights td {
	border-bottom: 1px solid #000 !important;
}
table.highlights .publicationTime span.new {
	color: #A9CC0B !important;
}
/* More items popup */
.moreItems .popupContent {
	background: #2E2F2F !important;
}

/** Second Column - PW, Jobs, Newsletter, etc. */
#pricewatch, #jobs, #poll, .pollWrapper, #newsletter, #textlink, #social .twitterButton, #social .facebookButton {
	background: #212323 !important;
}

/* Poll option highlight */
.poll label:hover {
	background-color: #545656;
}

.secondColumn p, .secondColumn h3 {
	color: #BFBFBF !important;
}
#poll, .poll {
	color: #BFBFBF;
	background: none !important;
}
.poll.jsenabled label:hover {
	background: #18AE43 !important;
}

/* Highlighted Products (Het bekijken waard) */
#highlightedProducts .description, #highlightedProducts .price {
	color: #BFBFBF !important;
}

/* User reviews */
.frontpage #community .userReview .userReviewDescription, .userReview {
	background: #454646 !important;
	color: #BFBFBF;
}

/** Articles */
.article, .content {
	color: #BFBFBF !important;
}
.article h2 {
	color: #B9133D;
}
.article h3 {
	color: #CCCCCC !important;
}
/* Tables in articles */
.article table {
	background: #232525 !important;
}

/* Author information next to article */
.relatedAuthor p {
	color: #868686 !important;
}
.relatedAuthor .authorInfo td {
	color: #868686 !important;
}

/* Next/Prev article date colour */
table.nextPrevious tr td {
	color: #B7B4B2 !important;
}

/* Modfilter text and width */
.modFilter {
	color: #B7B4B2 !important;
}

/* Meuk sidebar */
.meukDetail .sidebar .section {
	background: #323434 !important;
	color: #BFBFBF !important;
}
table.meuklist {
	color: #BFBFBF;
}

/** Comments */
.reactie {
	background: #212323 !important;
	color: #BFBFBF !important;
	border-left: 1px solid #545454 !important;
}
/* +2 comments */
.reactieBody.informative {
	background: #323535 !important;
	border: 1px solid #4D4F4F !important;
}
/* +3 comments */
.reactieBody.spotlight {
	background: #454747 !important;
	border: 1px solid #6D6F6F !important;
}
/* Odd white line at last comment*/
.reactie.last > .reactieContainer {
	border-left: 1px solid #545454 !important;
}
/* Blockquote colour a bit lighter */
.reactieContent blockquote {
	color: #A9A9A9 !important;
}

/** User tab V&A */
div.pwLinks ul li, div.pwLinks ul li a {
	color: #BFBFBF !important;
}
.pwLinks {
	background: #323434 !important;
}
/* Wishlist */
.tabContent .article table {
	background: #2E2F2F !important;
}
div.inventory h3.title, div.inventory h3.titleShow {
	color: #0067A2 !important;
}


/** Gallery fotoalbum */
form table td {
	color: #CCCCCC !important;
}
#fotoalbum .sidebar {
	background: #212323;
}

/** Tweakblog admin table */
form table.tweakblog {
	background: #2E2F2F !important;
}

/** Karmastore */
.mainColumn table.itemList {
	background: #2E2F2F !important;
}


/* Change text background below article
   in case we do want to have the buttons
   See 'hide social' at bottom of this file section */
#toggleButtonTxt {
	background: #212323 !important;
}

/** Pricewatch */
#header h1 .subtitle {
	color: #BFBFBF !important;
}

/* Product display list */
/* White top bar */
#top #entity, #top .pageTabsContainer {
	background: #323434 !important;
}
#entity>div {
	border-top: none !important;
}

#categoryBrowser div, #categoryBrowser .sublist {
	background: #323434 !important;
	border: 1px solid #171818 !important;
}
#categoryBrowser .large li {
	border-bottom: 1px solid #171818 !important;
	border-right: 1px solid #171818 !important;
}
#categoryBrowser {
	background: #282929 !important;
	border: 1px solid #171818 !important;
}

.popularProductListing table.listing tr td, .popularProductListing table.listing tr td a, .articleColumn table.listing tr td, .articleColumn table.listing a {
	background: #323434 !important;
}
#tweakbase {
	margin-top: 51px;
}
.listOptions .pageIndex {
	color: #BFBFBF;
}
.productCompare table.listing tr td, .productCompare table.listing tr td a, .productCompare table.listing th, .itemFilter table.listing tr td, .itemFilter table.listing tr td a, table.spec-detail tr.diff td {
	background: #323434 !important;
}
.productCompare table.listing tr th.compare {
	background-position: 14px 19px !important;
}
.productCompare table.listing tr td.compare {
	background-position: 14px -1px !important;
	border: none !important;
}
.productCompare table.listing .compare { 
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAABUAQMAAABnUf89AAAABlBMVEUAGAXDxsa+Z6rqAAAAAXRSTlMAQObYZgAAABZJREFUCFtjXMXAwMDA0DBAJFZBepEAjDwVLKcRyjUAAAAASUVORK5CYII=") no-repeat transparent !important;
}

table.listing th .listOptions .sortable.sortorder .dropdown li, table.listing th .listOptions .sortable.sortorder .dropdown li a {
	color: #000000 !important;
}

.relatedBlock table.listing tr td, .relatedBlock table.listing a, .relatedBlock {
	background: #2D2E2E !important;
}
.relevancyColumn .relationboxBlock .thumb a, .relatedBox .thumb a {
	background: #484848 !important;
	border: 1px solid #595959 !important;
}
/* Sort dropdown */
div.sortable.sortorder ul li a {
	color: #000000 !important;
}

/* Bestelkosten berekenen */
/* Right column colour */
#costTypeSelect, .costFilter {
	background: none !important;
}
/* Article table */
.priceTable tbody tr.even {
	background: #454548 !important;
}
.priceTable tbody tr {
	background: #343437 !important;
}
/* Shop table */
table.shoppingCart tr.even td {
	background: #454548 !important;
	color: #BFBFBF !important;
}
table.shippingCart tr td {
	background: #343437 !important;
	color: #BFBFBF !important;
}
table.shoppingCart .pricelisthead td, table.shoppingCart .pricelist td {
	color: #BFBFBF !important;
}

/* Specs */
td.spec-column, table.spec-detail td.spec-group-name {
	color: #BFBFBF !important;
}
table.spec-detail td.spec-index-column {
	color: #838686 !important;
}
.specs .popularSpecs, .fixedLabels .specs .popularSpecs td.spec-label span {
	background: #343232 !important;
}
.specs h3.bar {
	background: #232121 !important;
}
.specs td.spec-label, .specs td.spec {
	color: #BFBFBF !important;
}
#productSpecifications tbody tr:hover td, .fixedLabels #productSpecifications tbody tr:hover td.spec-label span, #productSpecifications tbody tr.diff:hover td {
	background-color: #323282 !important;
}

/* Shop Review */
.rightInfoBlock {
	background: none !important;
}
#reacties.shopSurvey .reactie {
	border: 1px solid #DBDEDE;
}

/* User Review */
.ScorecardView {
	background-color: #232121 !important;
	color: #BFBFBF;
}
/* Review tab has some black text colour */
.articleColumn.userreview .userReviewPageInfo {
	color: #BFBFBF;
}

/* Product comparison */
#compareSpecsHeader.fixed .wrap {
	background-color: #313232 !important;
}

div#productSpecifications.specs.toggle tr th .bar {
	background: #565656 !important;
}

/* Specs same */
div#productSpecifications.specs.toggle tr td.spec, div#productSpecifications.specs.toggle tr td.spec-label {
	color: #BFBFBF !important;
}
/* Specs differ */
div.productSpecifications.specs.toggle tr.diff {
	background: #545454 !important;
	color: #BFBFBF !important;
}
div#productSpecifications.specs.toggle table.popularSpecs tr td.spec, div#productSpecifications.specs.toggle table.popularSpecs tr td.spec-label {
	background: #545454 !important;
}


/*******
   GoT
 *******/
/* Breadcrumbs */
.breadcrumb a, .action_list a {
	color: #828585 !important;
}
.bulletSeparatedList > li:first-child::before { 
	content: "" !important;
}

/** Forum tabs */
#forum_tabs li a {
	color: #ABAAAA !important;
}
#forum_tabs li.active a {
	color: #CCCCCC !important;
}

/* Bookmarks */
.faux p {
	color: #CCCCCC !important;
}

/** Search results */
table.forumlisting .preview .content {
	background: #212323 !important;
}
table.forumlisting>tbody>tr>td {
	background: #323434 !important;
}
/* Search filter */
#filter, .filterOption.active {
	background: #212323 !important;
}
.filterBlock h4, .filterOption h4 {
	color: #BFBFBF !important;
}
.filterOption li, .filterOption label {
	color: #919494 !important;
}
.filterOption label.selected {
	color: #000000 !important;
}

/* Topic listing heading colour */
table.listing th a {
	color: #FEFEFE !important;
}
/* Border around image */
.channelHeader .thumb {
	border: none !important;
}

/** Listing borders */
table.listing td {
	border-top: 0px solid #000000 !important;
	border-bottom: 1px solid #000000 !important;
}
table.listing td.last {
	border-right: 1px solid #000000 !important;
}
table.listing td.ind, table.listing td.ind2 {
	border-left: 1px solid #000000 !important;
}

/** Forum Description */
#title p.forumdesc {
	color: #BFBFBF !important;
}
/** GoT Topic listings  */
table.listing td, table.listing td a {
	background: #121212 !important;
	color: #BFBFBF !important;
}
table.listing td.topic a, table.listing td.title a { 
	color: #BFBFBF !important;
}
/* Listing height */
table.listing td, table.listing th {
	padding: 4px 5px !important;
}
table.listing th {
	background: #3E3E3E !important;
}

/* Mijn Topics bar .find_topics.poster*/
div.info {
	background: #232121;
	color: #BFBFBF;
}

/** Forum replies */
/* Viewcounter colour */
.action_list li.viewcount {
	color: gray;
}

#content #sidebar #tweakbase_relations {
	margin: 0px 5px;
}

/* Message content */
div.message, div.faq, form.form1, form.form2, #folders, #myprofilecontainer, table.info {
	background: #212323 !important;
	color: #BFBFBF !important;
}
#messages, .topic_actions {
	padding-left: 5px !important;
}
div.message div.post div.messagecontent {
	margin-right: 5px !important;
	color: #cccccc;
}
/* Hyperlinks in messages Tweakers green */
div.messagecontent a {
	color: #D9FF26 !important;
}
/* Members Only */
.membersonly {
	background: #00A000 !important;
}
div.membersonly a {
	color: #000000 !important;
}
/* Hyperlinks in RML list */
table.rml a {
	color: #DDDD00 !important;
}
/* RML list background */
table.rml td {
	background: #505050 !important;
}
table.rml th {
	background: #606060 !important;
}
/* Remove space between messages */
div.message, div.faq {
	margin-bottom: 0px !important;
}

/* Make your own post more visible, now with gradient! */
div.message.ownpost {
	background-image: linear-gradient(#404040 10px, #212323 40px) !important;
}
/* Give the header of the TS a different colour */
div.message.topicstarter {
	background-image: linear-gradient(#323434 10px, #212323 40px) !important;
}
/* And the date a different colour */
div.topicstarter div.messageheader div.date a {
	color: #008800 !important;
}

/* Post version on diff */
div.message div.poster {
	color: #BFBFBF !important;
}

/** Quote boxes */
div.messagecontent blockquote {
	color: #CCCCCC !important;
}
div.message-quote-div {
	background: #3D3D3D !important;
	color: #CCCCCC !important;
}
/* Quote user link */
div.messagecontent div.message-quote-div a.messagelink, div.messagecontent div.message-quote-div a.messagelink:hover {
	color: #DDDDDD !important;
}

/** Code boxes */
table.phphighlight td.phphighlightline, table.phphighlight td.phphighlightcode {
	border: 1px solid #CCCCCC !important;
}
table.phphighlight td, table.phphighlight td pre, table.phphighlight td code {
	color: #000000 !important;
	background: #DDDDDD !important;
}

/* Pre-box */
div.pre pre {
	background: #323434 !important;
}

/* /me tag */
.me, div.messagecontent span.me a {
	color: #00AA00 !important;
}

/* Modbreak text */
.mbr {
	color: #AD0009 !important;
}

/* lazy image loading */
img.lazyimg {
	background: #0a0a0a !important;
}
/* image broken */
img.error {
	background: #3f1111;
}

/** User info **/
/* Ugly klipklap arrow */
.userklipklap {
	background: none !important;
	border: none !important;
}
.userklipklap > div {
	background: #202121 !important;
}
.userklipklap .online {
	color: #63C000 !important;
}

/* Username */
.user {
	color: #CCCCCC !important;
}

/* Crew username*/
.crew, .crew:visited {
	color: #B9133C !important;
}

/* Pimp user, aka luser :+ */
.pimp, a.pimp:hover, .pimp:visited {
	color: #DE47DC !important;
}

/* Pagenumbers */
.pagecounter {
	margin: 5px 0px 0px !important;
}

/** Quick Reply */
#reageer.bar {
	background: #303030 !important;
	border: 0px solid #D2D4D4 !important;
	border-top: 1px solid #D2D4D4 !important;
	border-left: 1px solid #D2D4D4 !important;
	border-right: 1px solid #D2D4D4 !important;
}
/* Topicwarning */
fieldset.modbreak {
	background: #800000 !important;
}
fieldset.modbreak legend {
	color: #FFE900 !important;
}
fieldset.modbreak a {
	color: #09FF26 !important
}
.bar.warning {
	background-color: #220000 !important;
	color: #CCCCCC !important;
}

/* Report post */
form#message_form.insertMessage {
	background: #232121 !important;
}
div.wrap div#content h3.bar {
	background: #232121 !important;
}
textarea#messageBox.report {
	background: #322121 !important;
}

/* Toon Voorbeeld - make it true visible button */
form input.forumlink { 
	cursor: pointer;
	background: #0A93CA !important;
	border: 1px solid #0987B8;
	border-radius: 1px;
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.102);
	color: #CCCCCC !important;
	font-size: 12px;
	height: 26px;
	padding: 0px 10px;
	text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.149);
}
/* Reply dropdown for page selection */
#footer div.buttonnav select, #quotemessages div.buttonnav select {
	color: #BFBFBF !important;
}
/* Button toolbar */
#toolbar img {
	background: #CCCCCC;
}

/* Make sure Reageer has correct text colour */
.fancyButton {
	color: #CCCCCC !important;
}

/* New topic and topic page navigation buttons */
.fancyButton.grey {
	background: linear-gradient(to bottom, #0A93CA, #0A8ABD) #0A93CA !important;
	border: 1px solid #0987B8 !important;
}

.fancyButton:hover { 
	background: linear-gradient(to bottom, #0CA3D4, #0B98C5) #0CA3D4 !important;
	border-bottom-color: #0B94BF !important;
	border-left-color: #0B94BF !important;
	border-right-color: #0B94BF !important;
	border-top-color: #0B94BF !important;
}

.fancyButton:focus { 
	box-shadow: 0px 0px 4px rgba(9, 135, 184, 0.749) !important;
}
a.fancyButton.grey.next {
	color: #CCCCCC !important;
}

/* Topic nav */
.pageDistribution .previous, .pageDistribution .next, .pageDistribution .last { 
	background: no-repeat linear-gradient(to bottom, #0A93CA, #0A8ABD) #0A93CA !important;
	border: 1px solid #0A88BA  !important;
	height: 15px !important;
	line-height: 15px !important;
	color: #CCCCCC !important;
}
.pageDistribution .previous { 
	background-image: url("https://tweakimg.net/g/prev_arrow.png") !important;
	background-position: 5px 3px !important;
}

/* Relationeditor (Onderwerpen koppelen) */
.relationManager dd ul.bulletSeparatedList, ul.bulletSeparatedList {
	color: #BFBFBF !important;
}
#relationeditor table tr td {
	background: #2F3131 !important;
}
#relationeditor h3 {
	color: #327398 !important;
}
form.insertMessage.relationManager {
	background: #232121 !important;
}

.relationeditor input[type=text] {
	color: #BFBFBF !important;
	background: #323131 !important;
}

.relationeditor .resultItem, .relationeditor .resultFooter, .relationeditor .resultItemSimple {
	color: #BFBFBF !important;
	background: #424141 !important;
}
.relationeditor .resultItem .title, .relationeditor .resultItemSimple .title, .relationeditor .resultItem .type, .relationeditor .resultItemSimple .type {
	color: #BFBFBF !important;
}


/* Dropdowns */
select {
	background: #000000 !important;
	color: #BFBFBF !important;
}