Donmai

Dark CSS

Posted under Bugs & Features

user 474264

I'm searching for a Dark styled CSS for Danbooru.
I've seen a lot across the web but nothing of them really worked out.
Nearly all of my often visited websites are dark styled. Danbooru is the only one with white layout.
As I am a total beginner with CSS, I'd like to ask you for your assistance.

sorry for my bad english. I tried my best.

Reply
OOZ662

For me, #C0C0C0 works much nicer than grey. A version of that which doesn't change search boxes, the popups ("post was favorited," etc), and especially the note boxes and their contents would make me a very happy camper.

Reply
Gollgagh

@OOZ662 try this

    header,
    .main {
        background-color: #CCC !important;
    }
   
    #page,
    section,
    .related-tags,
    body,
    .new-comment p,
    .row.notices {
        background-color: #CCC !important;
    }

    nav menu,
    footer,
    .current a {
        background: #BBB !important;
    }

      
    .even {
        background: #AAA !important;
    }

    .even:hover,
    .odd:hover
    {
        background: #EEE !important;
    }

    .post-count { color: #000; }

It's slightly more fine-tuned than slathering everything with the same color.

If you need colors for modes, you can add this to restore them:

Show
/*      Modes       */
    
    .mode-edit       { background-color: #55CC55 !important; }
    .mode-tag-script { background-color: #DD66DD !important; }
    .mode-add-fav,
    .mode-remove-fav { background-color: #FFFFAA !important; }
    .mode-rating-s   { background-color: #66FF66 !important; }
    .mode-rating-q   { background-color: #AAA    !important; }
    .mode-rating-e   { background-color: #FF6666 !important; }
    .mode-vote-up    { background-color: #AAFFAA !important; }
    .mode-vote-down  { background-color: #FFAAAA !important; }

Updated

Reply
OOZ662

Looks wonderful so far. I slapped a

    .mode-approve    { background-color: #00F    !important; }

in there just for the heck of it; it'd be like me to leave that set and start accidentally approving everything.

EDIT: I just noticed the post counts next to tags are exactly the same as the background color...oh well.

Updated

Reply
MyrMindservant

@Gollgagh
You forgot about Artist Commentary section, it now has partially white background. Partially because the background of the commentary text is changed but the frame, header, and original/translated menu is white with your CSS code.

On another note, what I like in

*:not(body), body.mode-view, body:not([class]) { background-color: grey; }

(I've used #dfdfdf instead of grey)
is that it recolors pretty much everything. I like that it also changes background of search and input fields, drop-down lists, check boxes, and mouseover background in lists (tag search results, forum, post's tag history, etc).
What I do not like though, is that it messes up translation notes and you lose some specific non-white backgrounds, like the ones in user records.

Would it be possible to get something like it but without those problems?

Reply
Gollgagh

I do cover most everything in topic #9588, which Type-kun already linked. I merely cut it down and recolored it for the main sections in the snippet above. If you want further refinement, everything that I've tweaked is more or less commented in that topic, so you can cherry-pick parts of that as necessary.

Regarding the second, I'm no CSS genius, so take this with a healthy dose of salt. I believe the problem is thus: you can do two things with CSS:
1. You can style everything with the broad stroke of a simple one-line command
2. You can style lots of little things

Dumping the same color paint all over everything at once is fine in itself -especially if you're happy with the result- but one should not be surprised that you have to go back and repaint little details that were lost in the dumpage.

Reply
1