Tumblr - Black Theme by LadyJay56

Imported and mirrored from https://raw.githubusercontent.com/uso-archive/data/flomaster/data/usercss/106799.user.css

Details

AuthorLadyJay56

LicenseNO-REDISTRIBUTION

Categorytumblr

Created1 year, 4 months ago

Updated1 year, 4 months ago

Size20 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

I painstakingly went through every menu I could find on this hellsite to make sure there was nothing left of the original color. It also has some additional coding to work with some New-XKit addons!

If I did happen to miss anything… please do not hesitate to let me know at my tumblr.

Notes

8/24/21

Fixes after a small update to Tumblr's code

6/10/21

Missed greyscaling some hover items in the activity page
Returned the colored small icons with some slight desaturation to try and match the changed colors
Note) I was not thinking about accessibility when I made them the same grey color so I apologize for that.

5/26/21

Made the icon colors more accurate to the old tumblr colors
Made the activity page graph grey
Made the small icons (like/reblog/mention/etc) on the activity page grey
Note) It was irritating me that they didn't match the new colors I had set so now we get no color thanks tumblr
Fixed the overlay in the Edit Post menu to have to proper opacity
Fixed the overly bright highlight color when using tumblr's own dark mode

4/21/21

Tumblr stop changing your div ids for no reason challenge
Userstyles takes way too long to load for me to update this theme every time tumblr changes one (1) thing so stop I beg you
Anyway fixed blue background fade in the Edit Post/New Post menus

2/21/21

Fixed the scrollbar
Fixed the mutual highlight in the activity feed
Fixed the background of the inbox

2/18/21

Somehow the world's smallest tumblr update managed to break most of this so it's fixed now

7/7/20

People keep asking me about bugs related to XKit's "Old Blue" extension so I added a small line of code to hopefully put an end to that

7/6/20

General fixes and cleaning

7/2/20

Fixed the background from turning back to blue when reblogging/editing posts on the (now forced) beta preview
Other fixes

3/30/20

Fixes for the new dashboard beta
Note) It only works on the "True Blue" palette setting, and kind of the "Dark Mode" one. Every other palette setting will look funny with this script.

8/17/19

Fixes

5/11/19

Desaturated the like/reblog icons on the toaster notes
Fixes

4/22/19

Desaturated the post type and like/reblog icons to original colors prior to the update
Also desaturated the theme editor because I was going blind
Removed some unused code

3/18/19

Fixed some tiny things that I missed

2/18/19

Tumblr changed their coding yet again so I had to fix it
Fixed the blue background when blogs have transparent icons

2/11/19

Made some changes to Post Archiver (XKit)
Tweaked the user drop menu so the whole blog tab is no longer highlighted when hovering
Minor fixes to the blue post buttons

2/1/19

Forgot to fix some things...

1/30/19

Rewrote basically everything to work with the new blue update

7/11/18

Just some tweaks to the Activity Page

7/6/18

Almost a full year later, I finally made all the notifications black
Made the background on the Iconified Notifications black (XKit)

8/7/17

Small fixes

10/24/16

Fixed the side column width

9/24/16

~~Notifications are black for real now (I think)~~
Edit) Ok so the first notification is black, any after are blue but I don't get enough notifications to be able to try and fix it. Plus they don't stay for very long whenever I do get more than one.

11/11/15

Made the pop-up menus grey
Made the pop-up menu for quick tags grey (XKit)
Other fixes

9/7/15

Finally fixed the blue notifications

5/2/15

Fixed the colour for Tumblr's post recommendation thing and audio posts
Began adding XKit CSS

4/16/15

Minor fixes
Disabled some broken code

2/3/15

Yet another update fix

12/10/14

Update fix

11/2/14

Touched up some colours on pop-up menus
Removed the rest of the blue from the search page
Cleaned the coding up a bit

11/1/14

Removed (hopefully) all the blue, minus the search page
Fixed background issue that caused there to be a black box around the follow button on blogs

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name           Tumblr - Black Theme
@namespace      USO Archive
@author         outsiders-void
@description    `I painstakingly went through every menu I could find on this hellsite to make sure there was nothing left of the original color. It also has some additional coding to work with some New-XKit addons!If I did happen to miss anything… please do not hesitate to let me know at <a href="https://vault21.tumblr.com/message" target="_blank">my tumblr</a>.`
@version        20210825.1.35
@license        NO-REDISTRIBUTION
@preprocessor   uso
==/UserStyle== */
@-moz-document url-prefix("https://www.tumblr.com"), url-prefix("http://www.tumblr.com") {
/* --- MAIN / OLD DASHBOARD --- */
:root,
.xkit--react {
    --rgb-navy: 22, 22, 22;
    /* background - rgb only! */
    --navy: var(--rgb-navy);
    --transparent-navy-95: rgba(var(--rgb-navy), 0.95);
    --transparent-navy-50: rgba(var(--rgb-navy), 0.50);
    --navy-light: #212121;
    /* header */
    --accent: 186, 186, 186;
    --xkit-checkbox: #f2f2f2;
    --xkit-checkbox-selected: #f8f8f8;
    --xkit-checkbox-selected-hover: #f2f2f2;
    --xkit-extension-selected: rgba(153, 153, 153, 0.18);
}

/* header */
.l-header-container--refresh {
    background-color: var(--navy-light);
}

.tab-bar-container .tab_notice,
.tab_notice .tab_notice_value {
    color: var(--navy-light);
}

.tab-notice--outlined {
    border-color: var(--navy-light);
}

.tab_notice {
    background-color: rgba(var(--accent));
}

.compose-button {
    fill: rgba(var(--accent));
}

.selected .tab_notice {
    background: #fff;
}

.ui_search .search_query {
    background: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.65);
}

.reblog_follow_button .follow-text,
.worded-follow-button .follow-text {
    color: rgba(var(--accent));
}

/* body */
.l-container.l-container--two-column-dashboard .left_column {
    background: var(--navy);
}

.identity,
.l-container.l-container--two-column-dashboard .l-content,
.l-container.l-container--two-column .l-content,
.l-container.l-container--two-column-dashboard .right_column,
.l-container.l-container--two-column .right_column,
.l-container.l-container--flex .l-content,
.post_avatar,
.post_avatar .post_avatar_link,
.discover_actions_discover .elevator,
.search_actions_search .elevator,
.buttons-page .buttons-header {
    background-color: rgba(var(--navy));
}

.blue#glass_overlay,
.blue#hello_glass,
.blue.glass,
.post-forms-glass,
.body.flag--always-opaque-peepr .ui_peepr_glass,
.ui_dialog_lock.opaque,
.ui_peepr_glass {
    background: var(--transparent-navy-95);
}

.identity .right_column:after {
    background: linear-gradient(180deg, var(--navy), transparent);
}

.identity-refresh .search_results_container .tumblelog_mask_item {
    background-color: var(--transparent-navy-50);
}

.identity .controls_section .open_blog .open_blog_link,
.identity .controls_section a .count,
.identity .controls_section .sub_control {
    color: rgba(255, 255, 255, 0.65);
}

.well,
.identity .controls_section.user_list li .follow_list_item_blog .tumblelog_title,
.identity .controls_section li.account_header,
.identity .controls_section li.contributors_header,
.identity .controls_section li.editors_header,
.identity .controls_section li.section_header,
.discover .discover-section-title,
.radar .radar_tumblelog_label .name,
.controls_section .controls_item_anchor,
.identity .controls_section .delete_all_messages {
    color: hsla(0, 0%, 100%, 0.8);
}

.l-footer {
    color: rgba(var(--accent));
}

.notes .note:hover .block,
.ui_notes .ui_note:hover .block,
.notification:hover .block {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

.notification {
    border-top: none;
}

.identity .controls_section .open_blog .currently_selected_blog,
.identity .controls_section .control-anchor {
    color: hsla(0, 0%, 100%, 0.8);
}

/* recommended blogs */
.radar .radar_footer .radar_avatar:before {
    background-image: linear-gradient(to right, transparent, var(--navy));
}

.identity .controls_section.user_list li .follow_list_item_blog:before {
    background-image: linear-gradient(90deg, transparent, var(--navy));
    border-right: 5px solid var(--navy);
}

.identity .controls_section.user_list li:active .follow_list_item_blog:before,
.identity .controls_section.user_list li:hover .follow_list_item_blog:before {
    background-image: linear-gradient(90deg, transparent, #262626);
    border-right: 5px solid #262626;
}

.plus-follow-button {
    color: var(--navy);
}

.identity .controls_section .item:hover .follow:hover,
.plus-follow-button:hover {
    background: rgba(var(--accent));
    color: rgba(255, 255, 255, 0.07);
}

/* trending */
.discover .discover-search-term-item:nth-child(6n+1) .discover-search-term,
.discover .discover-search-term-item:nth-child(6n+2) .discover-search-term,
.discover .discover-search-term-item:nth-child(6n+3) .discover-search-term,
.discover .discover-search-term-item:nth-child(6n+4) .discover-search-term,
.discover .discover-search-term-item:nth-child(6n+5) .discover-search-term,
.discover .discover-search-term-item:nth-child(6n+6) .discover-search-term,
.discover .discover-search-term-item:nth-child(6n+1) .discover-search-term:active,
.discover .discover-search-term-item:nth-child(6n+2) .discover-search-term:active,
.discover .discover-search-term-item:nth-child(6n+3) .discover-search-term:active,
.discover .discover-search-term-item:nth-child(6n+4) .discover-search-term:active,
.discover .discover-search-term-item:nth-child(6n+5) .discover-search-term:active,
.discover .discover-search-term-item:nth-child(6n+6) .discover-search-term:active {
    background-color: rgba(var(--accent));
}

.discover .discover-search-term {
    color: #fff;
}

/* activity */
.notifications_page .section.divider {
    background: none;
}

.is-followed.without-commentary.post-activity-note,
.ui_notes .activity-notification.note_mention .activity-notification__activity .activity-notification__activity_message.conversational,
.ui_notes .activity-notification.user_mention .activity-notification__activity .activity-notification__activity_message.conversational {
    background-color: rgba(var(--follow));
}

.ui_notes .activity-notification.is_friend {
    color: #000;
    background-color: rgba(var(--follow));
}

.ui_notes .activity-notification:hover.is_friend {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

.ui_notes .activity-notification.is_friend .activity-notification__activity,
.ui_notes .activity-notification.user_mention .activity-notification__activity .activity-notification__activity_message.conversational .activity-notification__activity_main .activity a,
.ui_notes .activity-notification.is_friend .activity-notification__activity_main .activity,
.ui_notes .activity-notification.is_friend .activity-notification__activity_main .activity a,
.ui_notes .activity-notification.note_mention .activity-notification__activity .activity-notification__activity_message.conversational .activity-notification__activity_main .activity,
.ui_notes .activity-notification.note_mention .activity-notification__activity .activity-notification__activity_message.conversational .activity-notification__activity_main .activity a,
.ui_notes .activity-notification.user_mention .activity-notification__activity .activity-notification__activity_message.conversational .activity-notification__activity_main .activity {
    color: #000;
}

/* notifications */
#toaster .toast .toast_inner .anchor,
.toastr .toast-kit,
.toastr .toast strong,
.toastr .toast .toast-bread,
.toastr .toast-kit .multi-toasts .toast,
.toastr.show-toast .toast-kit,
.toastr .toast-kit .multi-toasts .toast:last-child {
    background-color: var(--navy);
    border-top: 1px var(--navy);
}

/* posts */
.post .dock_video_button {
    background-color: rgba(var(--accent));
}

.post-form--tag-editor .tag-label.hover-style {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    color: #000;
}

.post-form--tag-editor .tag-label.selected {
    background-color: rgba(var(--accent));
    color: #fff;
}

/* menus */
.pop-menu .item-option:hover,
.blog-list-item.blog-list-item--on-light:hover {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

.popover--account-popover .popover .popover_menu_item .popover_menu_item_anchor:hover {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

.popover_menu_item.keyboard_focus,
.image_picker .menu_option:hover,
.search_control_items .menu_item:hover,
.info_popover li:hover,
.popover_menu_item:hover {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

.blog-sub-nav-details .blog-sub-nav-item:hover,
.blog-sub-nav-details .blog-sub-nav-item.currentItem,
.blog-sub-nav-details .blog-sub-nav-item.selected:hover {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

.popover--account-popover .popover .popover_menu_item:not(.popover_menu_item_blog):active,
.popover--account-popover .popover .blog-list-item:active,
.popover--account-popover .popover .blog-sub-nav-item:active {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

.popover--mention-dropdown .item-option.cycled,
.popover--mention-dropdown .item-option.cycled:hover {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    color: #000;
}

.popover--account-popover .popover .popover_menu_item_blog:hover:not(:first-child) {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

.search_control_items .post_type_filter_menu .post_type:hover,
.search_control_items .post_type_filter_menu .post_type:hover .icon {
    color: #000;
}

.blog-sub-nav-details .blog-sub-nav-item.selected {
    box-shadow: -4px 0 0 #fff, 10px 0 0 #fff;
  ...

Reviews

No reviews yet.