Danbooru

Custom CSS Thread

Posted under General

jhs master

Nameless_Contributor said:

@jhs_master something like this? It will be bad for very tall images.

/* Single-column full-width post thumbnails regardless of size */
@media screen and (max-width: 660px) {
    #c-posts .post-preview-image {
        width: 100vw;
        max-height: unset;
    }
    #c-posts .posts-container {
        grid-template-columns: unset;
    }
}

Yes, that's it! Thank you very much for the help!

Reply
Sibyl
Add animation to preview images border

Add blink animation or flow animation to any preview images with a colored border.
Compatible with Chrome. May be compatible with Safari 16.4+.
At least preview images with a single colored border work on both Firefox and Safari.
Some animaiton needs hover to show except pending and flagged posts.
Find and replace all :hover to make animation always show.

Show
:root {
    --angle: 0deg;
    --flow-animation: rotate 4s linear infinite;
    --current-flagged-color: var(--preview-pending-color);
}

body[data-current-user-is-approver=true] {
    --current-flagged-color: var(--preview-flagged-color);
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes blink {
    to {
        border-color: transparent;
    }
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

.post-status-has-children img:hover,
.post-status-has-parent img:hover,
.post-status-deleted img:hover,
.post-status-pending img,
.post-status-flagged img {
    animation: blink 1.0s infinite alternate;
}

/* CSS Specificity: https://www.w3schools.com/css/css_specificity.asp */
article[data-tags~="loli"] img.post-preview-image,
article[data-tags~="shota"] img.post-preview-image {
    border-color: pink;
}

article[data-tags~="loli"] img:hover,
article[data-tags~="shota"] img:hover {
    border-image: conic-gradient(from var(--angle), transparent 50%, pink) 1;
    animation: var(--flow-animation);
}

/* 2 colors */
.post-status-pending[data-tags~="loli"] img.post-preview-image,
.post-status-pending[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--preview-pending-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged[data-tags~="loli"] img.post-preview-image,
.post-status-flagged[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--current-flagged-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-pending.post-status-has-parent img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 12% 38%, transparent, var(--preview-pending-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-parent img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 12% 38%, transparent, var(--current-flagged-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-pending.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 12% 38%, transparent, var(--preview-pending-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 12% 38%, transparent, var(--current-flagged-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-has-parent.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 12% 38%, transparent, var(--preview-has-children-color) 62% 88%, transparent) 1;
}

.post-status-deleted.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 12% 38%, transparent, var(--preview-deleted-color) 62% 88%, transparent) 1;
}

.post-status-deleted.post-status-has-parent img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 12% 38%, transparent, var(--preview-deleted-color) 62% 88%, transparent) 1;
}

.post-status-has-parent[data-tags~="loli"] img.post-preview-image,
.post-status-has-parent[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--preview-has-parent-color) 62% 88%, transparent) 1;
}

.post-status-has-children[data-tags~="loli"] img.post-preview-image,
.post-status-has-children[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--preview-has-children-color) 62% 88%, transparent) 1;
}

.post-status-deleted[data-tags~="loli"] img.post-preview-image,
.post-status-deleted[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--preview-deleted-color) 62% 88%, transparent) 1;
}

/* 3 colors */
.post-status-pending.post-status-has-parent.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--preview-pending-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-parent.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--current-flagged-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-pending.post-status-has-children[data-tags~="loli"] img,
.post-status-pending.post-status-has-children[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-children-color) 30% 45%, transparent, var(--preview-pending-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-children[data-tags~="loli"] img,
.post-status-flagged.post-status-has-children[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-children-color) 30% 45%, transparent, var(--current-flagged-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-pending.post-status-has-parent[data-tags~="loli"] img,
.post-status-pending.post-status-has-parent[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--preview-pending-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-parent[data-tags~="loli"] img,
.post-status-flagged.post-status-has-parent[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--current-flagged-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-has-parent.post-status-has-children[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children[data-tags~="shota"] img {
    /* Shorter loli/shota border?
     * 5% 32.5%, 42.5% 70%, 80% 95% */
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, pink 55% 95%, transparent) 1;
}

.post-status-deleted.post-status-has-parent.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--preview-deleted-color) 55% 95%, transparent) 1;
}

.post-status-deleted.post-status-has-children[data-tags~="loli"] img,
.post-status-deleted.post-status-has-children[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, pink 30% 45%, transparent, var(--preview-deleted-color) 55% 95%, transparent) 1;
}

.post-status-deleted.post-status-has-parent[data-tags~="loli"] img,
.post-status-deleted.post-status-has-parent[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 5% 20%, transparent, pink 30% 45%, transparent, var(--preview-deleted-color) 55% 95%, transparent) 1;
}

/* 4 colors */
.post-status-has-parent.post-status-has-children.post-status-pending[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-pending[data-tags~="shota"] img {
    /* Longer pending/flagged border?
     * 10% 22.5%, 32.5% 42.5%, 52.5% 65%, 80% 95% */
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 5% 20%, transparent, pink 30% 45%, transparent, var(--preview-has-children-color) 55% 70%, transparent, var(--preview-pending-color) 80% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-has-parent.post-status-has-children.post-status-flagged[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-flagged[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, pink 30% 45%, transparent, var(--preview-has-parent-color) 55% 70%, transparent, var(--current-flagged-color) 80% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--preview-has-children-color) 55% 70%, transparent, var(--preview-deleted-color) 80% 95%, transparent) 1;
}

.post-status-has-parent.post-status-has-children img:hover,
.post-status-deleted.post-status-has-children img:hover,
.post-status-deleted.post-status-has-parent img:hover,
.post-status-has-parent[data-tags~="loli"] img:hover,
.post-status-has-parent[data-tags~="shota"] img:hover,
.post-status-has-children[data-tags~="loli"] img:hover,
.post-status-has-children[data-tags~="shota"] img:hover,
.post-status-deleted[data-tags~="loli"] img:hover,
.post-status-deleted[data-tags~="shota"] img:hover,
.post-status-has-parent.post-status-has-children[data-tags~="loli"] img:hover,
.post-status-has-parent.post-status-has-children[data-tags~="shota"] img:hover,
.post-status-deleted.post-status-has-parent.post-status-has-children img:hover,
.post-status-deleted.post-status-has-children[data-tags~="loli"] img:hover,
.post-status-deleted.post-status-has-children[data-tags~="shota"] img:hover,
.post-status-deleted.post-status-has-parent[data-tags~="loli"] img:hover,
.post-status-deleted.post-status-has-parent[data-tags~="shota"] img:hover,
.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="loli"] img:hover,
.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="shota"] img:hover {
    animation: var(--flow-animation);
}
Only blink animation + gradient border

Works on Chrome. Gradient border only snippet is here: forum #239804

Show
:root {
  --current-flagged-color: var(--preview-pending-color);
}

body[data-current-user-is-approver=true] {
  --current-flagged-color: var(--preview-flagged-color);
}

/* Border settings */
article[data-tags~="loli"] img.post-preview-image,
article[data-tags~="shota"] img.post-preview-image {
  border-color: pink;
}

/* 2 colors */
.post-status-pending.post-status-has-children img {
  border-image: linear-gradient(to right, var(--preview-has-children-color), var(--preview-pending-color)) 1;
}

.post-status-flagged.post-status-has-children img {
  border-image: linear-gradient(to right, var(--preview-has-children-color), var(--current-flagged-color)) 1;
}

.post-status-pending.post-status-has-parent img {
  border-image: linear-gradient(to right, var(--preview-has-parent-color), var(--preview-pending-color)) 1;
}

.post-status-flagged.post-status-has-parent img {
  border-image: linear-gradient(to right, var(--preview-has-parent-color), var(--current-flagged-color)) 1;
}

.post-status-has-parent.post-status-has-children img,
.post-status-has-parent.post-status-has-children img {
  border-image: linear-gradient(to right, var(--preview-has-parent-color), var(--preview-has-children-color)) 1;
}

.post-status-deleted.post-status-has-children img {
  border-image: linear-gradient(to right, var(--preview-has-children-color), var(--preview-deleted-color)) 1;
}

.post-status-deleted.post-status-has-parent img {
  border-image: linear-gradient(to right, var(--preview-has-parent-color), var(--preview-deleted-color)) 1;
}

.post-status-has-children[data-tags~="loli"] img,
.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--preview-has-children-color)) 1;
}

.post-status-has-parent[data-tags~="loli"] img,
.post-status-has-parent[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--preview-has-parent-color)) 1;
}

.post-status-pending[data-tags~="loli"] img,
.post-status-pending[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--preview-pending-color)) 1;
}

.post-status-flagged[data-tags~="loli"] img,
.post-status-flagged[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--current-flagged-color)) 1;
}

.post-status-deleted[data-tags~="loli"] img,
.post-status-deleted[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--preview-deleted-color)) 1;
}

/* 3 colors */
.post-status-has-parent.post-status-has-children[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 30% 70%, var(--preview-has-children-color) 90%) 1;
}

.post-status-pending.post-status-has-parent.post-status-has-children img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, var(--preview-has-parent-color) 30% 70%, var(--preview-pending-color) 90%) 1;
}

.post-status-flagged.post-status-has-parent.post-status-has-children img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, var(--preview-has-parent-color) 30% 70%, var(--current-flagged-color) 90%) 1;
}

.post-status-pending.post-status-has-children[data-tags~="loli"] img,
.post-status-pending.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, pink 30% 70%, var(--preview-pending-color) 90%) 1;
}

.post-status-flagged.post-status-has-children[data-tags~="loli"] img,
.post-status-flagged.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, pink 30% 70%, var(--current-flagged-color) 90%) 1;
}

.post-status-pending.post-status-has-parent[data-tags~="loli"] img,
.post-status-pending.post-status-has-parent[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 30% 70%, var(--preview-pending-color) 90%) 1;
}

.post-status-flagged.post-status-has-parent[data-tags~="loli"] img,
.post-status-flagged.post-status-has-parent[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 30% 70%, var(--current-flagged-color) 90%) 1;
}

.post-status-deleted.post-status-has-children[data-tags~="loli"] img,
.post-status-deleted.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, pink 30% 70%, var(--preview-deleted-color) 90%) 1;
}

.post-status-deleted.post-status-has-parent[data-tags~="loli"] img,
.post-status-deleted.post-status-has-parent[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 30% 70%, var(--preview-deleted-color) 90%) 1;
}

.post-status-deleted.post-status-has-parent.post-status-has-children img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, var(--preview-has-parent-color) 30% 70%, var(--preview-deleted-color) 90%) 1;
}

/* 4 colors */
.post-status-has-parent.post-status-has-children.post-status-pending[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-pending[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 20% 45%, var(--preview-has-children-color) 55% 70%, var(--preview-pending-color) 90%) 1;
}

.post-status-has-parent.post-status-has-children.post-status-flagged[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-flagged[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 20% 45%, var(--preview-has-children-color) 55% 70%, var(--current-flagged-color) 90%) 1;
}

.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 20% 45%, var(--preview-has-children-color) 55% 70%, var(--preview-deleted-color) 90%) 1;
}

@keyframes blinkColor {
  to {
    border-color: transparent;
  }
}

article[data-tags~="loli"] img:hover,
article[data-tags~="shota"] img:hover,
.post-status-has-children img:hover,
.post-status-has-parent img:hover,
.post-status-deleted img:hover,
.post-status-pending img,
.post-status-flagged img {
  animation: blinkColor 1.0s infinite alternate;
}

@keyframes blink {
  to {
    border-image: linear-gradient(to right, transparent, transparent) 1;
  }
}

.post-status-pending.post-status-has-children img,
.post-status-pending.post-status-has-parent img,
.post-status-flagged.post-status-has-children img,
.post-status-flagged.post-status-has-parent img,
.post-status-has-parent.post-status-has-children img:hover,
.post-status-deleted.post-status-has-children img:hover,
.post-status-deleted.post-status-has-parent img:hover,
.post-status-has-parent[data-tags~="loli"] img:hover,
.post-status-has-parent[data-tags~="shota"] img:hover,
.post-status-has-children[data-tags~="loli"] img:hover,
.post-status-has-children[data-tags~="shota"] img:hover,
.post-status-deleted[data-tags~="loli"] img:hover,
.post-status-deleted[data-tags~="shota"] img:hover {
  animation: blink 1.0s infinite alternate;
}
Reply
Samsara Kama

I use shades of pink to discern Contributors and Approvers without making the site too colorful on dark mode. Simple and kinda pointless, but sharing it anyway.

.user-contributor {color: #e684e9 !important}
.user-approver {color: #f5cdf6 !important}

Additionaly, I highlight my username a tiny bit with a glowing effect:

a[href="/users/825936"] {animation: glow 1s ease-in-out infinite alternate !important;}

@keyframes glow {
  from {text-shadow: 0 0 2px var(--user-member-color), 0 0 3px var(--user-builder-color);}
  to {text-shadow: 0 0 3px #f5cdf6, 0 0 2px #e684e9;}
}
Reply
hdk5

Maiden_in_Orange said:

Hello there. Is there any CSS code that removes the forum activity indicator (as in, makes it not italicize when there's unread forum posts) for me?

    .forum-updated a {
        font-style: unset !important;
    }
Reply
Samsara Kama

Sharing for dumbos like me. If someone didn't use the wiki tab before the recent change and/or won't use it now, this can remove it:

.current-tag-wiki {display: none}

I only use the related, translated, suggested and frequent tabs when I tag posts, so additionaly, this is to remove the recent tags tab:

.recent-related-tags-column {display: none}
Reply
Samsara Kama

I wanted the "highlight posts with dangerous tags in the modqueue grid view" to work in the list view. I wanted the entire card to be red, but you know the drill, Idk how and if it's possible with CSS only. This is what I've been using for months now:

#c-modqueue .post-preview[data-tags~='md5_mismatch']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='third-party_edit']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='screenshot']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='anime_screencap']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='duplicate']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='image_sample']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='resized']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='ai-generated']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='ai-assisted']  .mod-queue-preview{
   background-color: var(--modqueue-tag-warning-color)
}

I also tried using an edit of the "blur E and Q rated posts" CSS before that was somewhat like this:

#c-modqueue .post-preview[data-tags~='anime_screencap']  .post-preview-image{
   filter: invert(9%) sepia(93%) saturate(3822%) hue-rotate(6deg) brightness(35%) contrast(122%) opacity(0.2) blur(10px)
}
#c-modqueue .post-preview[data-tags~='anime_screencap']  .post-preview-image:hover{
   filter: none
}

It works on every page with a post preview if you remove #c-modqueue and it can be used along with the other code, but it was obviously bad to look at the thumbnails on mobile.

EDIT: I love you, thanks!

Updated

Reply
hdk5

Sessyoin_Kiara said:

...I wanted the entire card to be red...

Try:

#c-modqueue div.mod-queue-preview[data-tags~='third-party_edit'],
#c-modqueue div.mod-queue-preview[data-tags~='screenshot'],
#c-modqueue div.mod-queue-preview[data-tags~='anime_screencap'],
#c-modqueue div.mod-queue-preview[data-tags~='duplicate'],
#c-modqueue div.mod-queue-preview[data-tags~='image_sample'],
#c-modqueue div.mod-queue-preview[data-tags~='md5_mismatch'],
#c-modqueue div.mod-queue-preview[data-tags~='resized'],
#c-modqueue div.mod-queue-preview[data-tags~='ai-generated']
{
    background-color: var(--modqueue-tag-warning-color) !important;
}
Reply
alphashitlord

Not sure if this is the right place to ask but I can't seem to get the OLED black theme (from the about:custom css style page) to work:

/* Custom theme. OLED dark-mode theme */
body.dark, body[data-current-user-theme="dark"] {
    --grey-0: #e8e8e8;
    --grey-1: #d1d1d1;
    --grey-2: #ababab;
    --grey-3: #919191;
    --grey-4: #777777;
    --grey-5: #5b5b5b;
    --grey-6: #3f3f3f;
    --grey-7: #2c2c2c;
    --grey-8: #191919;
    --grey-9: #000000;
    
    --link-color: #ff4500;
    --link-hover-color: #f47464;

    --collection-pool-color: var(--link-color);
    --collection-pool-hover-color: var(--link-hover-color);
    
    --text-color: var(--grey-2);
    --header-color: var(--grey-1);
    
    --post-resized-notice-background: var(--post-search-notice-background);
    --notice-info-background: var(--post-search-notice-background);
    --post-child-notice-background: var(--post-search-notice-background);
    --post-parent-notice-background: var(--post-search-notice-background);

    --notice-info-border-color: var(--grey-5);
    
    --form-input-background: var(--grey-8);
    --form-input-text-color: var(--grey-3);
    --form-input-border-color: var(--grey-6);
    
    --form-button-background: var(--grey-3);
    --form-button-border-color: var(--grey-5);
}
Reply
Nameless Contributor

alphashitlord said:

Not sure if this is the right place to ask but I can't seem to get the OLED black theme (from the about:custom css style page) to work:

You have to set the site theme to dark in user settings, this CSS replaces the regular dark theme.

Reply
dbfan1163

light mode but changing (most) blue text to black text.

minor edits

Show

/* Custom theme. light-mode theme */
body.light, body[data-current-user-theme="light"] {

--link-color: #ff4500;
--link-hover-color: #f47464;

--collection-pool-color: var(--link-color);
--collection-pool-hover-color: var(--link-hover-color);

--text-color: var(--black-2);
--header-color: var(--black-1);

the blue text is changed to red instead of black text. idk why

Reply
dbfan1163

from: forum #274391

dbfan1163 said:

light mode but changing (most) blue text to black text.

minor edits

Show

/* Custom theme. light-mode theme */
body.light, body[data-current-user-theme="light"] {

--link-color: #ff4500;
--link-hover-color: #f47464;

--collection-pool-color: var(--link-color);
--collection-pool-hover-color: var(--link-hover-color);

--text-color: var(--black-2);
--header-color: var(--black-1);

the blue text is changed to red instead of black text. idk why

fixed it text color to > #0000 black

Show

/* Custom theme. light-mode theme */
body.light, body[data-current-user-theme="light"] {

--link-color: #0000;
--link-hover-color: #0000;

--collection-pool-color: var(--link-color);
--collection-pool-hover-color: var(--link-hover-color);

--text-color: var(--black-1);
--header-color: var(--black-1);

now text is black on white background.

Reply
1 15 16 17 18 19