Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tweakers Custom CSS, Dark Mode
/*******
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.