'Darkness' theme

[LuX]

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:


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...

[Redmaus]

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

[LuX]

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

[Redmaus]

Ty

[gogusrl]

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:

new

Spoiler:

[Spikebolt]

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:

[LuX]

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.

[Redmaus]

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

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

[scottc]

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

[LuX]

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

[Redmaus]

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.

[Spikebolt]

People actually use the IRC?...

[andrewjoy]

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

[Spikebolt]

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

[LuX]

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.

[gogusrl]

got a question for the experts on irc

Spoiler:

!w

[Redmaus]

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