'Darkness' theme

LuX

04 Mar 2016, 21:19

Dunno if I'm blind(ed by the brightness), or there actually is no dark theme for us light sensitive creatures...
I took matters in my own hand and made a simple css dark theme mod. It changes more than colors though.
I find it annoying how the vanilla theme only uses 50% of the screen, so I made this new theme make use of the whole width of the screen.
I'm quite bad with the editor so expect bugs. If your screen is other than 1920x1080 it may not display correct.

Features: Custom DT black logo, bold Helvetica font, full screen used, large images withing posts (no more squinting), and much more.

Sample image: Image


To use it, get the 'Stylebot' extension for your browser and paste the code in the "Edit CSS" part. (Click on the icon -> Open Stylebot... -> Edit CSS, paste and click save)
You can always click the "Remove styling" button if you don't like it.

Code: Select all

#wrapper {
    background-color: #000000;
    border-color: #076880;
    width: 1800px;
}

#site-description p {
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    text-transform: capitalize;
    font-family: Helvetica;
    display: none;
}

#footer {
    background-color: #00161c;
}

body.section-viewforum.ltr {
    background-color: #242424;
}

body.section-viewtopic.ltr {
    background-color: #242424;
}

div.content {
    width: 1550px;
    font-family: Helvetica;
    font-weight: bold;
    color: #8d989e;
}

div.forums-wrapper.profile-wrapper.deskthority_red h2 a {
    font-weight: bold;
    font-family: Helvetica;
    color: #076880;
}

dl.postprofile {
    background-color: #171717;
}

blockquote.first {
    background-color: #141414;
    border-width: 2px;
    border-color: #cccccc;
}

#container h2 a {
    color: #076880;
    font-family: Helvetica;
}

td.topic.titleauthor.topic-layout2 {
    background-color: #141414;
}

td.topic.titleauthor.titleauthor-thumbnail {
    background-color: #141414;
}

td.icon.icon-click.bg2 {
    background-color: #242424;
}

td.topic.topic-layout1 {
    background-color: #141414;
}

strong.pagination span a {
    background-color: #545454;
    color: #b3b3b3;
}

p.rgb {
    color: #525252;
    font-weight: bold;
    font-family: Helvetica;
}

a.topictitle.topictitle-forums {
    color: #9dabb3;
    font-family: Helvetica;
    font-size: 16px;
}

p.rgb a {
    font-family: Helvetica;
    color: #076880;
}

div.pagination span strong {
    background-color: #878787;
    color: #030303;
}

div.pagination span a {
    background-color: #545454;
    color: #b3b3b3;
}

a.round-button {
    color: #076880;
    border-color: #076880;
    border-style: dashed;
    border-width: 2px;
}

div.hr-divider {
    border-width: 2px;
    border-color: #cccccc;
}

input.inputbox.search.tiny {
    background-color: #707070;
    color: #000000;
    border-style: dashed;
    border-width: 2px;
    border-color: #cccccc;
    font-family: Helvetica;
    font-weight: bold;
    width: 500px;
}

input.search-submit {
    margin-top: 3px;
    margin-right: 4px;
}

div.avatar a img {
    background-color: #ffffff;
    border-style: solid;
    border-width: 3px;
    border-color: #065569;
}

div.pagination {
    color: #cccccc;
    font-family: Helvetica;
    font-weight: bold;
}

td.last-post-author {
    background-color: #242424;
}

td.bg2.last-post-td {
    background-color: #242424;
}

td.bg2.number {
    background-color: #383838;
}

td.topic.number {
    background-color: #242424;
}

span.rgb strong a {
    color: #076880;
    font-family: Helvetica;
    font-weight: bold;
}

td.forum {
    background-color: #141414;
}

td.bg2 {
    background-color: #141414;
}

a.dtbanner-anchor.dtbanner-anchor-size2 {
    color: #076880;
}

#index_col2 {
    margin-left: 820px;
}

div.inner {
    background-color: #060606;
}

th.rgb {
    background-color: #076880;
}

#header {
    background-color: #00161c;
}

img.reimg-width.reimg-link {
    width: 1550px;
}

dl.attachbox {
    width: 1550px;
    background-color: #171717;
    border-width: 2px;
    border-color: #cccccc;
}

dl.attachbox dt {
    color: #636363;
}

blockquote.cited {
    border-style: dashed;
    border-width: 2px;
    border-color: #cccccc;
    background-color: #333333;
    color: #858585;
    font-family: Helvetica;
    font-weight: bold;
}

body.section-memberlist.ltr {
    background-color: #242424;
}

tr.bg1 td {
    background-color: #242424;
}

tr.bg2 td {
    background-color: #141414;
}

td p a {
    font-family: Helvetica;
    font-weight: bold;
    font-size: 16px;
    color: #999999;
}

tr.bg1 td p {
    font-family: Helvetica;
    font-weight: bold;
    font-size: 14px;
    color: #636363;
}

tr.bg2 td p {
    font-size: 14px;
    font-family: Helvetica;
    font-weight: bold;
    color: #636363;
}

blockquote.uncited {
    border-width: 2px;
    border-style: dashed;
    border-color: #cccccc;
    background-color: #141414;
}

a.postlink {
    color: #708b99;
}

a.forumtitle {
    color: #adadad;
    font-family: Helvetica;
}

td.bg2.number p {
    color: #adadad;
}

td.forum.number p {
    color: #adadad;
}

a.last-post-img p {
    color: #adadad;
}

div.content blockquote {
    background-color: #141414;
    border-style: dashed;
    border-width: 2px;
    border-color: #cccccc;
}

html.no-touch.js {
    background-color: #00161c;
}

#copyright p {
    color: #cccccc;
}

h2.forumtabs a {
    font-family: Helvetica;
    font-weight: bold;
}

#container {
    background-color: #060606;
}

a.profile-name {
    color: #076880;
    font-family: Helvetica;
    font-weight: bold;
    font-size: 14px;
}

li.rightside a:hover {
    color: #858585;
}

li.rightside a:visited {
    color: #858585;
}

li.rightside a {
    font-family: Helvetica;
}

ul.linklist li a {
    font-family: Helvetica;
}

ul.linklist li a:hover {
    color: #858585;
}

ul.linklist li a:visited {
    color: #858585;
}

#dashboard {
    color: #d6cbd6;
}

h1 a img {
    content: url(http://oi68.tinypic.com/k3q5g7.jpg);
    width: 398px;
    height: 97px;
}

body.section-index.ltr {
    background-color: #242424;
}

p.dtbanner-text {
    background-color: #060606;
}

p.left-box a {
    font-family: Helvetica;
}

p.left-box a:hover {
    color: #858585;
}

p.left-box a:visited {
    color: #858585;
}

input.inputbox {
    background-color: #292929;
    border-color: #454545;
    color: #a1a1a1;
}

textarea.inputbox {
    background-color: #292929;
    color: #a1a1a1;
}

div.editor-tab-content {
    background-color: #292929;
}

body.section-posting.ltr {
    background-color: #242424;
}

span.corners-top span {
    display: none;
}

span.corners-top {
    display: none;
}

dl.codebox {
    background-color: #242424;
}

div.panel {
    background-color: #060606;
}

span.corners-bottom span {
    display: none;
}

span.corners-bottom {
    display: none;
}
Consider this "work in progress". Feel free to contribute if you like or express your opinion.
Way to introduce myself by complaining about this site...

User avatar
Redmaus
Gotta start somewhere

04 Mar 2016, 21:24

I notice some of the text is blue, how would I change this to white?

LuX

04 Mar 2016, 21:29

Change all the "#076880" to "#FFFFFF" in the code.

User avatar
Redmaus
Gotta start somewhere

04 Mar 2016, 21:57

Ty

User avatar
gogusrl

13 Mar 2016, 11:02

What if I just want it to scale the website and keep the color theme ?

It's a clear improvement at 2560x1440 but that contrast isn't that easy on the eyes. Maybe a dark gray would do better.

old
Spoiler:
Image
new
Spoiler:
Image

User avatar
Spikebolt
√(4) != -2

14 Mar 2016, 15:02

I would really like a proper dark theme. This workaround is a step in the right direction, that's for sure.

Personally not a fan of the empty space in the main page, white buttons/icons and some random blurriness.
Sample:

Image

LuX

14 Mar 2016, 20:07

Thanks for the feedback guys. As I said, I'm only a novice when it comes to the editor, so my skills are lacking. And even if I could improve this mod if I took the time to study how to use the editor properly, I don't visit this site often enough to care too much about the details. Maybe one day.

gogusrl: Go through the code, and remove everything, except that which has to do with "width" and it should work. You can edit the width values to better suit your monitor as well. I used a very dark background since I like it more that way and wanted to minimize brightness for when the gf is sleeping. I also wanted to make sure it's different enough from Geekhack. I think the black looks also a little more 'authoritative'.
I like the coincidence with the banners being the same though.

Spikebolt: I would appreciate an official dark theme as well as better scaling for wide monitors myself as well. If you want dark icons, sketch some for me and I'll add them. As for the blurry text and empty space in the main page, I haven't found a proper way around them yet as they require a little more advanced editing apparently.

User avatar
Redmaus
Gotta start somewhere

14 Mar 2016, 21:50

Actually even though we already have an irc, real time chat would be kickass.

I could waste the whole day away, just chatting here. :)

User avatar
scottc

14 Mar 2016, 21:54

What's the point? Why not just waste the whole day away using Freenode webchat?

LuX

14 Mar 2016, 22:12

I wonder how hard it would be to embed that irc on the main page. Should essentially do the same thing.

User avatar
Redmaus
Gotta start somewhere

14 Mar 2016, 23:03

scottc wrote: What's the point? Why not just waste the whole day away using Freenode webchat?
But its soooo convenient right there on the front page! :)

Not to mention one can go for months on this site without even paying attention to the irc. It took me awhile.

User avatar
Spikebolt
√(4) != -2

16 Mar 2016, 14:48

People actually use the IRC?...

andrewjoy

16 Mar 2016, 14:59

I have been on a few times , there is NEVER anyone on!

User avatar
Spikebolt
√(4) != -2

16 Mar 2016, 16:53

Been there for a couple of hours now, no one said a thing. Myth is busted!

LuX

16 Mar 2016, 20:56

That's just more of a reason to put it on the front page. First time I heard about the irc was from scott.
Having it more visible would bring more people not only to the irc, but give people more of a reason to come to DT in the first place.
"Ask the experts in real time" and what not.

User avatar
gogusrl

16 Mar 2016, 21:00

got a question for the experts on irc
Spoiler:
!w

User avatar
Redmaus
Gotta start somewhere

16 Mar 2016, 21:07

Lets make it happen! If it doesn't work we can always take it down.

Post Reply

Return to “Deskthority talk”