Danbooru

Dark theme for Danbooru

Posted under General

MatthewCoccon

Last update: 16/01/2017 (dd/mm/yyyy)
EN:

    • Important fixes: spoiler section now have a gray background so you will need to select the text to read it.
  • Some texts in black color were replaced by gray.

P.S. If you find an issue, please attach an image and a link where the screenshot has been taken so I can take a look.

ES:

    • Correcciones importante: Sección spoiler, ahora tiene fondo gris, tendrás que seleccionar el texto para leerlo.
  • Algunos textos en color negro fueron reemplazados por gris.

PD: Si encuentra un problema, por favor adjunte una imagen y un enlace donde se ha tomado la imagen para que pueda echar un vistazo.

------how works spoiler now-------
No text selected: https://k61.kn3.net/5/4/7/2/2/9/2E3.png
Text selected: https://k61.kn3.net/8/B/D/6/0/8/A68.png
--------------------------------------------------

Addon Stylish
This code applies on account settings

How? Go to my account -> Settings -> Advanced Settings -> Custom CSS style. Copy and paste the code below.

div#news-updates
{
    background: #000;
    border-bottom: 1px solid #666;
    color: #b5b5b5;
}
 #top
{
    background-color: #181818;
}
body
{
    background-color: #040001;
}
#page
{
    background-color: rgba(0, 0, 0, 0);
}
header#top menu
{
    background: #191919;
    border-top: 1px solid #2f2e2e;
}
header#top menu.main li.current a
{
    background: #2f2e2e;
}
h1
{
    color: #FB4B2B;
}
h2
{
    color: #06c1c1;
}
p
{
	color:gray;
}

div#c-comments div#a-index div.header span.info
{
	color: #8a8a8a;
}

div#page {
    margin: 0 20px;
    padding: 0;
}

aside#sidebar
{
	    background: #181818;
    padding-left: 10px;
}

div#posts
{
	background: #181818;
    margin-left: 10px;
	padding-top: 10px;
}

a:focus {
    outline: none;
}
menu#post-sections
{
    background: #181818;
    margin-left: 10px;
    padding-top: 10px;
    margin-bottom: 0px;
	padding-left: 10px;
}
div#c-posts div#a-index menu#post-sections {
    margin-bottom: 0em;
}
li.active 
{
	padding-left: 22px;
}
/*--comments--*/
div#c-comments div#a-index div.post, div#c-comments div#a-show div.post
{
    margin-bottom: 10px;
    padding-top: 10px;
    background-color: #14171A;
}
div.body.prose
{
	color:#808080;
}
blockquote
{
	background: #292929;
}
time
{
	color: #505050;
}
/*--paginator--*/
menu li
{
    color: #4c4c4c;
}
div.paginator li a
{
	border: 1px solid #243138;
}
/*--artist--*/
table.striped tr.even
{
    background-color: #181D20;
}
table.striped tbody tr
{
    border-bottom: 1px solid #384248;
	background: #14171A;
    color: #9c9c9c;
}
table.striped td:hover,table.striped th:hover
{
	background:#222222;
}
label
{
	color:#808080;
}
/*--??-*/
table.striped tr.even:hover
{
	background:transparent;
}
table.striped tbody tr:hover
{
	background:transparent;
}
div.prose li
{
    list-style-type: disc;
    color: #556079;
}
table {
    color: #808080;
}
/*--settings--*/
div#c-users div#a-edit .active
{
    color: #b12727;
}
/*--footer--*/
footer#page-footer
{
    border-top: 1px solid #242a2f;
}
 #page-footer
{
    background-color: #14171a;
    color: #808080;
}
/*-fixes-*/
div.prose div.expandable
{
    border: 1px inset #0073ff;
}
div.prose div.expandable-header span
{
    color: #f00;
}
div#c-posts div#a-show #artist-commentary
{
    border: 0px solid #CCC;
    border-left: 3px solid #80b9ff;
    border-radius: 0px;
    background-color: #1b1b1b;
}
h3
{
    color: #ce3b3b;
}
div#c-posts div.nav-notice
{
    background: #1b1b1b;
    border: 0px solid red;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 0px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0px;
}
 div#c-posts div#a-show #search-seq-nav li:hover
{
    background: rgba(0, 0, 0, 0);
}
span.search-name
{
	color: #27a25f;
}
div#c-posts aside#sidebar>section>ul li
{
    color: #903636;
}
div.prose h4
{
    color: #19b77e;
}
input
{
    background-color: transparent;
	border: 0px solid red;
	border-left: 3px solid #0073ff;
	padding-left: 3px;
        color: #12a59f;
}
header#top menu form input
{
    color: #00fdff;
}
button, input[type="button"], input[type="reset"], input[type="submit"]
{
    color: #00fff5;
}
/*-spoiler-*/
.spoiler a {
    color: #946802;
}
.spoiler {
    color: #808080;
}
.spoiler {
    background: #808080 !important;
}
/*-new-*/
strong,li,h3, h4, h5, h6 {
    color: #909090;
}
div.prose h6,div.prose h5
{
    color: #00945f;
}
This code applies on Stylish (for firefox)
@-moz-document domain("donmai.us") {
div#news-updates
{
    background: #000;
    border-bottom: 1px solid #666;
    color: #b5b5b5;
}
 #top
{
    background-color: #181818;
}
body
{
    background-color: #040001;
}
#page
{
    background-color: rgba(0, 0, 0, 0);
}
header#top menu
{
    background: #191919;
    border-top: 1px solid #2f2e2e;
}
header#top menu.main li.current a
{
    background: #2f2e2e;
}
h1
{
    color: #FB4B2B;
}
h2
{
    color: #06c1c1;
}
p
{
	color:gray;
}

div#c-comments div#a-index div.header span.info
{
	color: #8a8a8a;
}

div#page {
    margin: 0 20px;
    padding: 0;
}

aside#sidebar
{
	    background: #181818;
    padding-left: 10px;
}

div#posts
{
	background: #181818;
    margin-left: 10px;
	padding-top: 10px;
}

a:focus {
    outline: none;
}
menu#post-sections
{
    background: #181818;
    margin-left: 10px;
    padding-top: 10px;
    margin-bottom: 0px;
	padding-left: 10px;
}
div#c-posts div#a-index menu#post-sections {
    margin-bottom: 0em;
}
li.active 
{
	padding-left: 22px;
}
/*--comments--*/
div#c-comments div#a-index div.post, div#c-comments div#a-show div.post
{
    margin-bottom: 10px;
    padding-top: 10px;
    background-color: #14171A;
}
div.body.prose
{
	color:#808080;
}
blockquote
{
	background: #292929;
}
time
{
	color: #505050;
}
/*--paginator--*/
menu li
{
    color: #4c4c4c;
}
div.paginator li a
{
	border: 1px solid #243138;
}
/*--artist--*/
table.striped tr.even
{
    background-color: #181D20;
}
table.striped tbody tr
{
    border-bottom: 1px solid #384248;
	background: #14171A;
    color: #9c9c9c;
}
table.striped td:hover,table.striped th:hover
{
	background:#222222;
}
label
{
	color:#808080;
}
/*--??-*/
table.striped tr.even:hover
{
	background:transparent;
}
table.striped tbody tr:hover
{
	background:transparent;
}
div.prose li
{
    list-style-type: disc;
    color: #556079;
}
table {
    color: #808080;
}
/*--settings--*/
div#c-users div#a-edit .active
{
    color: #b12727;
}
/*--footer--*/
footer#page-footer
{
    border-top: 1px solid #242a2f;
}
 #page-footer
{
    background-color: #14171a;
    color: #808080;
}
/*-fixes-*/
div.prose div.expandable
{
    border: 1px inset #0073ff;
}
div.prose div.expandable-header span
{
    color: #f00;
}
div#c-posts div#a-show #artist-commentary
{
    border: 0px solid #CCC;
    border-left: 3px solid #80b9ff;
    border-radius: 0px;
    background-color: #1b1b1b;
}
h3
{
    color: #ce3b3b;
}
div#c-posts div.nav-notice
{
    background: #1b1b1b;
    border: 0px solid red;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 0px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0px;
}
 div#c-posts div#a-show #search-seq-nav li:hover
{
    background: rgba(0, 0, 0, 0);
}
span.search-name
{
	color: #27a25f;
}
div#c-posts aside#sidebar>section>ul li
{
    color: #903636;
}
div.prose h4
{
    color: #19b77e;
}
input
{
    background-color: transparent;
	border: 0px solid red;
	border-left: 3px solid #0073ff;
	padding-left: 3px;
        color: #12a59f;
}
header#top menu form input
{
    color: #00fdff;
}
button, input[type="button"], input[type="reset"], input[type="submit"]
{
    color: #00fff5;
}
/*-spoiler-*/
.spoiler a {
    color: #946802;
}
.spoiler {
    color: #808080;
}
.spoiler {
    background: #808080 !important;
}
/*-new-*/
strong,li,h3, h4, h5, h6 {
    color: #909090;
}
div.prose h6,div.prose h5
{
    color: #00945f;
}
}
This code applies on Stylish (for chrome)
div#news-updates
{
    background: #000;
    border-bottom: 1px solid #666;
    color: #b5b5b5;
}
 #top
{
    background-color: #181818;
}
body
{
    background-color: #040001;
}
#page
{
    background-color: rgba(0, 0, 0, 0);
}
header#top menu
{
    background: #191919;
    border-top: 1px solid #2f2e2e;
}
header#top menu.main li.current a
{
    background: #2f2e2e;
}
h1
{
    color: #FB4B2B;
}
h2
{
    color: #06c1c1;
}
p
{
	color:gray;
}

div#c-comments div#a-index div.header span.info
{
	color: #8a8a8a;
}

div#page {
    margin: 0 20px;
    padding: 0;
}

aside#sidebar
{
	    background: #181818;
    padding-left: 10px;
}

div#posts
{
	background: #181818;
    margin-left: 10px;
	padding-top: 10px;
}

a:focus {
    outline: none;
}
menu#post-sections
{
    background: #181818;
    margin-left: 10px;
    padding-top: 10px;
    margin-bottom: 0px;
	padding-left: 10px;
}
div#c-posts div#a-index menu#post-sections {
    margin-bottom: 0em;
}
li.active 
{
	padding-left: 22px;
}
/*--comments--*/
div#c-comments div#a-index div.post, div#c-comments div#a-show div.post
{
    margin-bottom: 10px;
    padding-top: 10px;
    background-color: #14171A;
}
div.body.prose
{
	color:#808080;
}
blockquote
{
	background: #292929;
}
time
{
	color: #505050;
}
/*--paginator--*/
menu li
{
    color: #4c4c4c;
}
div.paginator li a
{
	border: 1px solid #243138;
}
/*--artist--*/
table.striped tr.even
{
    background-color: #181D20;
}
table.striped tbody tr
{
    border-bottom: 1px solid #384248;
	background: #14171A;
    color: #9c9c9c;
}
table.striped td:hover,table.striped th:hover
{
	background:#222222;
}
label
{
	color:#808080;
}
/*--??-*/
table.striped tr.even:hover
{
	background:transparent;
}
table.striped tbody tr:hover
{
	background:transparent;
}
div.prose li
{
    list-style-type: disc;
    color: #556079;
}
table {
    color: #808080;
}
/*--settings--*/
div#c-users div#a-edit .active
{
    color: #b12727;
}
/*--footer--*/
footer#page-footer
{
    border-top: 1px solid #242a2f;
}
 #page-footer
{
    background-color: #14171a;
    color: #808080;
}
/*-fixes-*/
div.prose div.expandable
{
    border: 1px inset #0073ff;
}
div.prose div.expandable-header span
{
    color: #f00;
}
div#c-posts div#a-show #artist-commentary
{
    border: 0px solid #CCC;
    border-left: 3px solid #80b9ff;
    border-radius: 0px;
    background-color: #1b1b1b;
}
h3
{
    color: #ce3b3b;
}
div#c-posts div.nav-notice
{
    background: #1b1b1b;
    border: 0px solid red;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 0px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0px;
}
 div#c-posts div#a-show #search-seq-nav li:hover
{
    background: rgba(0, 0, 0, 0);
}
span.search-name
{
	color: #27a25f;
}
div#c-posts aside#sidebar>section>ul li
{
    color: #903636;
}
div.prose h4
{
    color: #19b77e;
}
input
{
    background-color: transparent;
	border: 0px solid red;
	border-left: 3px solid #0073ff;
	padding-left: 3px;
        color: #12a59f;
}
header#top menu form input
{
    color: #00fdff;
}
button, input[type="button"], input[type="reset"], input[type="submit"]
{
    color: #00fff5;
}
/*-spoiler-*/
.spoiler a {
    color: #946802;
}
.spoiler {
    color: #808080;
}
.spoiler {
    background: #808080 !important;
}
/*-new-*/
strong,li,h3, h4, h5, h6 {
    color: #909090;
}
div.prose h6,div.prose h5
{
    color: #00945f;
}

EN:
Hi, I do a style for this website but "Userstyles" don't accept this website so I put it here.
I do it as a request from a user who has contacted to my in another website, so the idea is share this with all.
Hope you like it.

ES: Hola, Hice un estilo para este sitio web pero "userstyles" no acepta este sitio web, así que lo pongo aquí.
Lo hice como una petición de un usuario que me contacto de otro sitio web, así que la idea es compartirlo con todos.
Espero te guste.

Last edit: 25/10/2016 (dd/mm/yyyy)

Updated

Reply
MatthewCoccon

OOZ662 said:

An issue with this setup that's common when dark CSS themes come around is that it turns off the image borders that tell you whether a post has a child, a parent, is flagged or is pending.

See also topic #9588.

sorry, i wasn't here for long time.
I updated the code, but I still can't understand which is the issue that you mentioned, if you can send me a image with the issue I will check it out.

If the issue was for the "spoiler/hide" it's fixed now.

Reply
OOZ662

The borders have returned, but I notice that the background color doesn't change when switching modes on a tag search, which can cause a lot of unintentional actions. Unfortunately that's a feature that accounts below Gold level don't have access to. It also makes h4. headings in the wiki blend in to the background, i.e. on help:users.

Reply
MatthewCoccon

OOZ662 said:

The borders have returned, but I notice that the background color doesn't change when switching modes on a tag search, which can cause a lot of unintentional actions. Unfortunately that's a feature that accounts below Gold level don't have access to. It also makes h4. headings in the wiki blend in to the background, i.e. on help:users.

I think it's all fixed now.
P.S: I really don't speak english so i'm trying to understand what are you saying, so if you can provide me an screenshot with a red circle would be more easy for me to understand.

Reply
DeusExCalamus

talonbr said:

Hi, I'm guessing "Stylish" is an add-on for the browsers? Or is there a way to implement it without the add-on? Thanks (in-advance)

There are ways to implement it without, I believe; but stylish is the easiest.

Reply
Type-kun

talonbr said:

Hi, I'm guessing "Stylish" is an add-on for the browsers? Or is there a way to implement it without the add-on? Thanks (in-advance)

First post has section that says "This code applies on account settings". You can copy what's inside, go to your account settings, advanced, custom CSS, and paste it there. As a bonus, it will work on any machine/browser once you login.

Reply
talonbr

Type-kun said:

First post has section that says "This code applies on account settings". You can copy what's inside, go to your account settings, advanced, custom CSS, and paste it there. As a bonus, it will work on any machine/browser once you login.

Thank you so much for clarifying that. The "account settings" bit didn't click the first time I read it.

To Matthew, my eyes thank you, sir!

Reply
MatthewCoccon

EN: Theme updated, copy and paste the new code to updated.
I forgot to mention that "stylish" is a addon, I leave the links now at the top of the topic.
Thanks for your comments.

ES: Theme actualizado, copia y pega el código nuevo para actualizar.
Me olvidé de mencionar que "stylish" es un complemento, les dejo los enlaces ahora en la parte superior del tema.
Gracias por tus comentarios.

Reply
Super Dick

@MatthewCoccon there's a few other problems Mathhew...the color codes for the forums, different leveled users, & the search bar are missing...for example type-kun's name is normally red and OOZ662's is normally yellow...wheres with this new background theme all of their names are now gray as default...same thing with the links that are provided when using the search bar...is there anyway you can fix this?

Updated

Reply
1 2