• Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

Requesting dark theme

Should TPU have the ability to go dark?


  • Total voters
    135
Joined
Dec 16, 2012
Messages
4,241 (1.59/day)
Location
Jyväskylä, Finland
Processor AMD Ryzen 5 2600
Motherboard Asus TUF B450 Plus Gaming
Cooling Coolink Corator DS w/ NM-AM4 & NF-P12 PWM
Memory 16GB DDR4-2400
Video Card(s) EVGA GeForce GTX 980 Ti FTW
Storage 2.2TB of SSDs & 2TB HDD
Display(s) 2x 1920x1080 w/ Arctic Z2 gen3 + Oculus Rift
Case Corsair Carbide Air 740
Audio Device(s) Sound Blaster Z
Power Supply Seasonic Focus+ Gold 750W
Mouse Logitech G400s
Keyboard Logitech G410
Software Windows 10 Pro
Dark reader works like charm, looks just like I'd like TPU to look like. Thanks for the tip! :)
 
Joined
May 13, 2015
Messages
130 (0.07/day)
Processor AMD Ryzen 3800X / AMD 8350
Motherboard ASRock X570 Phantom Gaming X / Gigabyte 990FXA-UD5 Revision 3.0
Cooling Stock / Corsair H100
Memory 32GB / 24GB
Video Card(s) AMD Radeon 290X (Toggling until 5950XT)
Storage C:\ 1TB SSD, D:\ RAID-1 1TB SSD, 2x4TB-RAID-1
Display(s) Samsung U32E850R
Case be quiet! Dark Base Pro 900 Black rev. 2 / Fractal Design
Power Supply EVGA Supernova 1300G2 / EVGA Supernova 850G+
Mouse Logitech M-U0007
Keyboard Logitech G110 / Logitech G110
Hi, I'm a bit late to this party though I can provide some help here.

First I've developed an entire web platform for building websites from scratch so yeah, I can help both users and the TPU team. :cool:

For users in a big rush not to be blinded you'll need the Stylus extension. I only use Waterfox (all other browsers have basically gotten their GUIs completely trashed) so I don't know about browser compatibility. Then you'll want to use this theme as a basis.

If for some reason it won't work then click on the extension's button and add the following code for the website:

.site-header, #page, .sidebar, body, .flickity-viewport, .pinned-news__item, select#tz {background: #212121 !important;}
.gpudb-details .content section.details > div {background-color: #222;}
.cpudb-details .content section.details > table tr:nth-child(2n+1), .gpudb-details .content section.details > div > dl:nth-child(2n+1), .vgabios .content table.bioslist tr:nth-child(2n+1), .vgabios-details .tablecontainer table tr:nth-child(2n+1) {background-color: #444;}

header.site,
#page,
.pagetitle,
.rightbar,
body,
.gallery-index .gallery-box .gallery_box_text,
.comments .posttext blockquote,
.review .text h2,
.rightbar > .newposts > ul > li,
.related > .headingcontainer > ul.tags,
.related > ul.links,
.comments > .forumpost > .userinfo > .usertitle,
b,p,
label,
.reviewlist-bit > .teaser,
.newspost > .byline > time,
.related > ul.links > li > span,
.rightbar > .newposts > ul > li > .byline > .username,
.rightbar > .newposts > ul > li > .replycount,
.rightbar > .topreviews > ul > li > time,
.rightbar > .newposts > ul > li > .byline > time,
.rightbar > .popularnews > ul > li > span,
#quicksearch,
.gallery-details .specs ul,
.gpudb-details > .specs-large > div,
.reviewdb > .reviewdbheader > p,
.review > footer > .pagesel > select,
.tputbl,
.button,
.comments > .forumpost > footer > time,
.comments .posttext blockquote small,
.comments > .forumpost > footer,
.comments > h2 > span > i,
.downloads .featured li > div > span,
.newspost > .byline,
input,
.sidebar-newposts__username,
.sidebar-newposts__time,
.sidebar-newposts__replycount,
.sidebar-top-reviews__date,
.sidebar-top-news__replycount,
.todayslist > h1,
.frontpagepoll ul,
.sidebar-logged-in,
.review .content>header>.byline>div>time,
.downloads-details .actions .actions-left .publisher,
.downloads-details .actions .actions-left .downloaded
{
color: #F0FFFF !important;
}

.comments > .forumpost > div,
.pager a.disabled,
.pager a.disabled:hover,
.gallery-index > .addcase-button,
.gallery-details .case-info-left,
.gpudb-details > .specs-large > div,
.gpudb-details section.customboards .sort-key,
.review > footer,
.review > header,
.review .verdict .score,
.staff-member:nth-child(2n+1){
background: rgba(64, 64, 64, .7)!important
}

.trivia #input,
.comments .posttext blockquote,
.review_carousel ul > li:hover,
.trivia > .messagecontainer,
.staff:nth-child(2n+1),
.downloads > .dl-left > nav ul.dltree li > a.selected,
.gallery-index .gallery-box:hover,
.downloads .content>.dl-left>nav ul.dltree li>a.selected
{
background: rgba(64, 64, 92, .7)!important
}

.tputbl.hilight tr:hover th[scope=row], .tputbl.hilight tr:hover td
{
background: rgba(64, 92, 92, .7)!important
}

div.title a,
.newspost > h1 > a,
.rightbar > .newposts > ul > li > a,
.rightbar > .popularnews > ul > li > a,
.rightbar > .topreviews > ul > li > a,
.comments > .forumpost > .userinfo > a,
.comments .posttext a,
.newspost > .byline > address > a,
.rightbar > .vgadrivers > a,
.rightbar > #time,
.todayslist ul > li > a > span,
ul.links li a,
.todayslist > h1,
.frontpagepoll footer span a,
.nextpowerup > div > a,
ul.clearfix a,
.newsemail a,
.contacts a,
.content a,
.rightbar > .loggedin > p > a,
.newspost > .byline > .discusslink,
.newspost > .text a,
.rightbar > .mobile_app > .app,
.rightbar > article > h1,
.rightbar > #time > a:hover,
.sidebar-newposts__list>li>a,
.pinned-news__title,
.sidebar-top-reviews__link,
.sidebar-top-news__link,
a:visited
{
color: #87CEEB !important
}

.comments > .forumpost,
.comments > .forumpost > footer
{
background: rgba(128, 128, 128, .7)!important
}

.site-footer,
input,
.upnext,
.pager a,
.popup_content #popup_content,
.rightbar > .sitesearch #search,
.frontpagepoll,
.frontpagepoll ul > li:nth-child(odd),
.nextpowerup > div,
.downloads #quicksearch,
.reviewlist-search > div,
.reviewlist-search .ajax > #quicksearch,
.reviewlist-bit:first-child,
.reviewlist-bit:nth-child(odd),
.reviewlist-bit,
.review_carousel > .outer,
.downloads .featured li,
.downloads .latest > div,
.downloads > .dl-left > nav > .tree-wrap,
.downloads > .dl-left > nav ul.dltree li:last-child,
.downloads .featured li:nth-child(odd),
.downloads-details .changes,
.vgabios .search > div,
.vgabios > .bioslist,
.vgabios > .bioslist tr:nth-child(odd),
.vgabios > .bioslist th,
.gpudb .search > div,
.gpudb > .changes > div,
.gpudb > .changes tr:nth-child(odd),
.gpudb .processors,
.gpudb .processors tr:nth-child(odd),
.reviewdb .tbl > table,
.reviewdb .tbl tr:nth-child(odd),
.gallery-details .specs ul > li,
.cpudb .search > div,
.cpudb .processors,
.cpudb .processors tr:nth-child(odd),
.cpudb-details section.details > table,
.cpudb-details section.details > table tr:nth-child(odd),
.vgabios-details .tablecontainer table,
.vgabios-details .tablecontainer table tr:nth-child(odd),
.vgabios-details .cardimage,
.gpudb-details section.details > table,
.gpudb-details section.details > table tr:nth-child(odd),
.gpudb-details section.relperf .entry,
.gpudb-details section.relperf .entry:nth-child(odd),
.reviewdb .reviews-container > .reviews > table,
.reviewdb .reviews-container > .reviews > table tr:nth-child(odd),
.reviewdb .reviews-container > .reviews > table th,
.tputbl tr:nth-child(odd) td,
.tputbl tr:nth-child(2n+2) th,
.tputbl th[scope=row],
.tputbl,
.tputbl,.download-list .download:nth-child(odd),
.download-list .download,
.downloads .oldversions,
.vgabios table.bioslist th,
.vgabios table.bioslist,
.vgabios table.bioslist tr:nth-child(odd),
.downloads .content>.dl-left>nav>.tree-wrap,
.downloads .content>.dl-left>nav ul.dltree li:last-child,
.review .content>header,
.review .content>footer,
.gpuz .validationlookup,
.downloads-details .history .history-entries,
.downloads-details .actions,
.downloads-details .versions,
.downloads-details .versions .files>li:nth-child(odd),
.downloads-details .versions .files>li.compact,
.downloads-details .notification
{
background: none
}

.comments > .forumpost > footer,
.comments > .forumpost > div,
.comments > .forumpost,
footer#footer
{
border: 0px
}

a.app.android:before,
a.app.iphone:before
{
filter: invert(100%)
}

.button
{
text-shadow: none;
background: none!important;
}

.review_carousel ul > li > a > img
{
opacity: .5
}

@font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 400;
src: local('Oxygen'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v5/78wGxsHfFBzG7bRkpfRnCQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 700;
src: local('Oxygen Bold'), local('Oxygen-Bold'), url(https://fonts.gstatic.com/s/oxygen/v5/yVHpdQrmTj9Kax1tmFSx2ltXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
html,body,text,textarea,p{
font-family: "Oxygen"!important;
font-weight: normal;
}
h1,h2,h3,h4,a,label{
font-family: "Oxygen"!important;
font-weight: bold;
}

For any TPU webmasters implementing dark mode (for browsers that support it) isn't difficult though it can be tricky. My site's theme supports it and I've written a blog article for how to combine CSS variables with dark mode. This could be achieved fairly easily. Anyone with CSS experience could also make the TPU webmaster's lives easier by creating some code for them. I hope this helps.
 

cardss

New Member
Joined
Mar 10, 2020
Messages
1 (0.03/day)
so can you guys make your app have a dark mode? desktop is fine with plugins, but not the app.
 
Joined
Jul 5, 2013
Messages
8,969 (3.63/day)
System Name GPD-Q9
Processor Rockchip RK-3288 1.8ghz quad core
Motherboard GPD Q9_V6_150528
Cooling Passive
Memory 2GB DDR3
Video Card(s) Mali T764
Storage 16GB Samsung NAND
Display(s) IPS 1024x600
so can you guys make your app have a dark mode? desktop is fine with plugins, but not the app.
TPU is not focusing on the App(AFAIK) as browsing from a mobile browser is very easy.
 
Joined
Mar 17, 2013
Messages
8 (0.00/day)
Several browser apps offer native darkmode,
Samsung Internet, Naver Whale Browser, Dolphin Browser,
and Firefox for Android, with extension.
 
Joined
May 30, 2018
Messages
1,053 (1.55/day)
Location
Cusp Of Mania, FL
System Name humble reentry to pc-building after too many years
Processor Ryzen 9 3900X
Motherboard Asus ROG Strix X370-F
Cooling Dark Rock 4
Memory 2x8GB TridentZ RGB [3600Mhz CL16]
Video Card(s) Asus ROG Strix RTX 2060 OC
Storage 970 EVO 500GB nvme, 860 EVO 250GB SATA, Seagate Barracuda 1TB + 4TB HDDs
Display(s) 32" Samsung F395 [1080/60]
Case NZXT H710
Audio Device(s) Schiit Modi 2 Uber, Sys, Vali 2, Scarlett 2i2 gen2 - LSR 305's, DT-990 Pro's, HD600's
Power Supply Corsair RM650x v2
Mouse iunno whatever cheap crap logitech *clutches Xbox 360 controller security blanket*
Keyboard HyperX Alloy Pro
Software Windows 10 Pro
My favorite FF extension for this is Dark Reader. Honestly not sure why it isn't the most popular, as it's the only one that doesn't screw-up color schemes, mess with images, or cause different elements to bug-out/vanish. It only inverts blacks and whites, without messing with colors. You can adjust it to your liking. I don't think I've found a website that it doesn't work perfectly with. Always looks great. Clean and natural. Just a dark version of your favorite websites. You can even configure it by site as you're browsing them.
 
Top