Donmai

Darkbooru CSS style

Posted under General

Gollgagh

I know there were some people that used a dark theme back on Danbooru 1; I kind of liked having it that way. This thing also reduces the font size to the old one. Posting this here since userstyles.org doesn't like "adult" sites any more. Here is the result of my efforts:

Show
/*      Main content darkening      */

    header,
    .main {
        color: #333 !important;
        background-color: #1b1b1b !important;
    }

    body,
    section,
    #page,
    .new-comment p,
    .related-tags,
    .row.notices {
        color: #777 !important;
        background-color: #1b1b1b !important;
    }

    /*   "mobile" paginator    */

    @media screen and (max-width: 660px) {
        .paginator,
        .paginator a,
        .paginator menu {
            background-color: #2b2b2b !important;
            border-color: #2b2b2b !important;
        }
	    .forum-post .author {
			background-color: #111 !important;
			border: none;
			border-radius: 6px 6px 0px 0px;
		}
    }

    blockquote,
    #dmail-notice {
        color: #888 !important;
        background: #222 !important;
        border-style: none !important;
        border-radius: 3px;
    }

    /*      Nested quote coloring       */

    blockquote{
        border-left: solid medium #0073ff !important;
    }

    blockquote > blockquote {
        border-left: solid medium #FA0 !important;
        background-color: #1e1e1e !important;
    }

    blockquote > blockquote > blockquote{
        border-left: solid medium #0F5 !important;
        background-color: #191919 !important;
    }

    .current a,
    .paginator a {
        border-style: none !important;
        background: #272727 !important;
    }

    footer,
    nav menu,
    .expandable,
    .nav-notice,
	.prose pre,
    .ui-dialog,  /* pop-out dialogs */
    .ui-dialog-content,
    .ui-dialog-buttonpane,
    #edit-dialog {
        color: #777;
        border-style: none !important;
        background: #272727 !important;
    }

    .ui-widget-header{
        color: #777;
        border-style: none !important;
        background: #777 url("http://i.imgur.com/32BVwYb.png");
    }

    #news-updates {
        color: #888 !important;
        background: #272727 !important;
    }

    .note-body {
        color: black;
    }

    article:target {
        background-color: #30301b !important;
        color: #aaa !important;
    }
	
    /*    Buttons, textboxes    */

    button,
    input,
    select,
    textarea {
        border-style: none !important;
        background:#111111 !important;
        color:#eee !important;
        padding: 0.2em;
    }

    /*   FORUM POST BACKGROUND    */

    .comment,
    div.list-of-forum-posts article {
        background-color: #151515;
        border: none;
        border-radius: 6px;
        box-shadow: none;
        max-width: 800px;
    }

    /*  Text sizing  */

    header h1 {
        font-size: 200% !important;
    }

    h1, h2, h3  {
        font-size: 120% !important;
    }

    body,
    #page menu,
    .new-comment p,
    .row.notices {
        font-size: 83% !important;
    }


/*    Stickied Comment Styling    */

    article.comment[data-is-sticky="true"] {
        background:#600 !important;
        color:#ccc !important;
        width: 780px;
        border-radius: 5px;
    }


/*      Post Modes       */

    .mode-edit       { background-color: #1b5b1b !important; }
    .mode-tag-script { background-color: #6b1b5b !important; }
    .mode-add-fav,
    .mode-remove-fav { background-color: #772    !important; }
    .mode-rating-s   { background-color: #1b8b1b !important; }
    .mode-rating-q   { background-color: #444    !important; }
    .mode-rating-e   { background-color: #8b1b1b !important; }
    .mode-vote-up    { background-color: #2b5b2b !important; }
    .mode-vote-down  { background-color: #5b2b2b !important; }
    .mode-approve    { background-color: #0A9    !important; }

/*  Styles forum and other lists with alternating colors    */


    .striped tr:nth-child(even),
	.feedback-category-neutral td:nth-child(even) {
        background: #282828 !important;
    }
    .striped,
	.feedback-category-neutral td {
        background: #1b1b1b !important;
    }
    .striped tr:hover {
        background: #444 !important;
    }

    .feedback-category-positive td {
        background: #003300 !important;
    }

    .feedback-category-positive td:nth-child(even) {
        background: #003800 !important;
    }

    .feedback-category-negative td {
        background: #330000 !important;
    }

    .feedback-category-negative td:nth-child(even) {
        background: #380000 !important;
    }

    table {
        border-collapse: separate;
    }


/*    Hover spoilers     */

    .spoiler:hover {
        background: #121212 !important;
        color: #777 !important;
    }


/*  Artist Commentary Bubble  */

    #artist-commentary,
    #artist-commentary menu,
    #notice,
    #original-artist-commentary,
    #translated-artist-commentary {
        background-color: #222 !important;
        border-style: none !important;
        max-width: 780px;
        color: #777 !important;
    }


/*  Terms of Service Bubble  */

    #tos-notice,
    #tos-notice a,
    #tos-notice h1 {
        background-color: #443 !important;
        border-style: none !important;
        color: #07F !important;
    }


/*      General Navigation Bars      */

    #nav-links,
    #nav-links li:hover {
        background-color: #222 !important;
        border-color: #333 !important;
    }


/*      Post Status Notices      */

    .notice-parent {
        background-color: #242 !important;
        color: #272;
        border-style: none !important;
        display: inline-block;
        min-width: 335px;
    }

    .notice-child {
        background-color: #585020 !important;
        color: #872;
        border-style: none !important;
        display: inline-block;
        min-width: 335px;
    }

    .notice-resized,
    .notice-pending {
        background-color: #224 !important;
        border-style: none !important;
        max-width: 335px;
        color: #44C !important;
    }

    .notice-appealed {
        background-color: #446 !important;
        border-style: none !important;
        max-width: 335px;
        color: #88F !important;
    }

    .notice-flagged,
    .notice-deleted {
        background-color: #622 !important;
        border-style: none !important;
        color: #F00;
        display: inline-block;
        min-width: 335px;
        max-width: 600px;
    }

/*        Limit Comment width          */
/* Remove if you want full width stuff */

    blockquote,
    pre,
    .comment .content {
        max-width: 600px;
    }

    .expandable {
        width: 620px;
    }

/*      Username Alternate Colors       */

    a.user-gold.with-style,       /* Gold users are gold */
    a.user-gold                   { color:gold    }
    a.user-platinum.with-style,
    a.user-platinum               { color:#D0D0F5 }
    a.user-builder.with-style,
    a.user-builder                { color:#00D000 }
    a.user-moderator.with-style,
    a.user-moderator              { color:#CC005B }
    a.user-admin.with-style,
    a.user-admin                  { color:#F00    }

/*         Hover Color        */

    a.user-gold.with-style:hover,
    a.user-gold:hover             { color:#FFF09E }
    a.user-platinum.with-style:hover,
    a.user-platinum:hover         { color:#EEEEFF }
    a.user-builder.with-style:hover,
    a.user-builder:hover          { color:#49FF49 }
    a.user-moderator.with-style:hover,
    a.user-moderator:hover        { color:#F92D88 }
    a.user-admin.with-style:hover,
    a.user-admin:hover            { color:#F77    }

I don't hardly know what I'm doing, so things are broken, I'm sure. Feel free to do whatever with it, I'm mostly posting this since I couldn't find anyone else doing it. Suggestions are welcomed and encouraged enthusiastically.

2016 edit: took out some useless sections and simplified a couple other lines
2017 edit: further style maturation:

  • more notices styled
    • parent/child notices now grow to fit number of siblings
  • hover-highlighting on usernames
  • buttons and input boxes
  • borders removed from most everything (I like the way that it looks, but I can provide a version that restores them if people want)
  • pop-out dialogs

May-2017:

  • added nested quote-box colorization: blue -> yellow -> green
  • bg image for widget header now points to imgur image instead of embedded (which doesn't work for on-site CSS)
  • removed Janitor type and changed Builder to green
  • overwrote tag count gradient background color

September-2017:

  • Completed ui-dialog boxes so that text would actually be legible
  • Re-added color for user-feedback
  • Cleaned up trailing whitespace and stray tab characters

7-27-2018:

  • Forum and comment borders tweaked

8-23-2018:

  • Tables fixed

Apparently !important declarations are redundant when using the built in styler, but I'm going to leave them in for userstyles users.

Updated

Reply
Fred1515

Gollgagh said:
Posting this here since userstyles.org doesn't like "adult" sites any more.

Really? The Misc Tweaks script and a whole bunch of other scripts for sites from Danbooru to 4chan are still hosted there.

Edit: derp, never mind, it seems the heat is getting to me.

Updated

Reply
kounishin

There's a similar style as part of my Small Modo style set in topic #9037; you can use it on its own or with the other components. (You may have missed it because the threads here tend to refer to them as "styles" rather than "themes".)

I hadn't updated it in some time, though; your post caused me to check and discover that it needed tweaking for the current Danbooru CSS, so thanks. There was also a separate "Darkbooru" style, which I could have sworn was updated for Danbooru 2 - but I may be delusional, since I can no longer find any trace of the style or its author.

Reply
Gollgagh

Alright, I've refined this quite a bit since last year; I think I've got almost everything covered now. The updated CSS is in the first post, and nearly everything is commented, so anyone can use this as a base and tweak it as needed.

Things I still haven't figured out: post previews with multiple statuses (i.e. Parent and Pending), the fancy gradient in the tag-count cell for the tag list, the p in a comment preview.

Reply
Jarlath

I love this dark theme, especially when I browse the site late at night and without a lot of light.

About the only thing I'd like to change is how some of the text in popup boxes like the artist commentary blends in with the background due to being dark grey on darker grey.

Reply
user 460797

@Gollgagh
It seems that there is a bug when favoriting a post: You see on the left bar, that there is the option to "Favorite" a post. But when you have done it, then this option should change to "Unfavorite". But if using the Dark CSS, then this option will be hidden and I can't click "Unfavorite". Is this known or is that only for me the case?

Reply
Gollgagh

sweetpeɐ said:

o on the mod queue there are these spaces that are colored different and brighter:

I don't have access to the modqueue, so you're going to have to try this for me:
Pop this onto the bottom of your CSS:

.post-pos-score {background: rgb(27, 40, 27);}

.post-neg-score {background: rgb(40, 27, 27);}

Also if you have colored usernames turned on the coloring is often incorrect.

I changed those more or less arbitrarily because I didn't like how at least three user classes were similar shades of blue, so I picked colors that were largely identifiable at a glance. If you want the standard colors, take out the two sections near the bottom named "Username Alternate Colors" and "Hover Color".

Reply
紫希貴

Table colors are broken. I used this code to bring it back 

    table.striped tr:nth-child(2n) {background-color: #2c2c2c;}
    table.striped tr:hover {background-color: #2b2b2b;}
    table.striped tr:nth-child(2n):hover {background-color: #3c3c3c;}

I dunno if you can optimize it further, I believe this is just a bandaid solution to the problem...
Also I think I have the colors wrong

Edit: I also want to restore the taglist gradient I mentioned before in forum #131889, is it still possible?
Edit2: Apparently the user feedback tables are also affected. Now that I see it the tables no longer use even and odd, instead even is replaced by nth-child(2n)

Updated

Reply
Gollgagh

紫希貴 said:

Table colors are broken. I used this code to bring it back

Thanks, I hadn't had time to look at it yet. Fixed.

Edit: I also want to restore the taglist gradient I mentioned before in forum #131889, is it still possible?

I'm about 95% certain that fixing that is going to require some kind of Javascript solution. The gradient numbers are generated entirely server-side and afaik (I would welcome being wrong) there is no way of obtaining that value in CSS and also dynamically creating a gradient with it in CSS.

Reply
AyayaAyaya

Thanks so much for creating and maintaining great style! It's made browsing Danbooru much easier on the eyes since I've had it installed.

I have two modifications I'd like to suggest.

The first is an insertion of a single character: changing that Imgur link to use HTTPS. When it's hardcoded as plain HTTP, it causes an issue with mixed content loading in an otherwise secure webpage.

The second is a bit broader: making the table headers lighter. On places like the tag search and upload tag changes report pages, the table header text is so dark (#333, which is unmodified from vanilla Danbooru) that it's quite difficult to read against the #1B1B1B background. I targeted it very naïvely with this snippet, making it a tad darker than the #777 used elsewhere (e.g. the "Upload tag changes report for [username]" on the aforementioned page):

    table.striped thead th {
        color: #666
}

This did the trick in those two locations where I noticed the problem, but a more general approach might be more appropriate; I don't know the first thing about CSS, and I'm not too sure where else this issue of dark text may appear.

Thank you for your consideration!

Reply
1