Change the colors of your Tumblr dashboard.
/* ==UserStyle==
@name Tumblr - Old / Custom Colors
@namespace https://greasyfork.org/users/673307
@version 2.3.0
@description Change the colors of your Tumblr dashboard.
@author BabblingFishes
@license CC-BY-4.0
@namespace https://greasyfork.org/users/673307
@homepageURL https://greasyfork.org/en/scripts/421966-tumblr-old-custom-colors
@preprocessor stylus
@var color mainBg "Background (Navy)" rgb(54, 70, 93)
@var color postBg "Post Background (White)" rgb(255, 255, 255)
@var color postText "Post Text Color (Black)" rgb(0, 0, 0)
@var color menuText "Menu Text, Icons, & Scrollbar (White)" rgb(255, 255, 255)
@var color brightButton "Bright Buttons (Blue)" rgb(82, 158, 204)
@var color dullButton "Dull Buttons (Gray)" rgb(157, 166, 175)
@var color textPost "Text Post (Gray/Black)" rgb(68, 68, 68)
@var color photoPost "Photo Post & Likes (Red)" rgb(217, 94, 64)
@var color quotePost "Quote Post (Gold)" rgb(242, 153, 46)
@var color linkPost "Link Post & Reblogs (Green)" rgb(86, 188, 138)
@var color chatPost "Chat Post & Notifs (Blue)" rgb(82, 158, 204)
@var color audioPost "Audio Post (Purple)" rgb(167, 125, 194)
@var color videoPost "Video Post (Gray/Pink)" rgb(116, 128, 137)
@var color miscColor "Misc Color (Yellow)" rgb(232, 215, 56)
@var color highlight "Notes Highlight (Blue-white)" rgb(243, 248, 251)
@var select fontFamily "Font Face" {
"Helvetica Neue (Old Font)":"'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif",
"Favorit (New Font)":"Favorit, 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif",
"Dyslexic-friendly":"'open dyslexic', opendyslexic, dyslexie, 'comic sans ms', sans-serif",
"Custom (enter below)":"customFontFamily"
}
@var text customFontFamily "Custom Font Face (if selected above)" "Font name here"
@var number baseFontSize "Base Text Size" 14px
@var text backgroundImage 'Background image URL (in "quotes")' '""'
@var select backgroundSettings "Background image arrangement" {
"Corner":"1",
"Center & fit":"2",
"Cover whole page":"3",
"Tile":"4"
}
==/UserStyle== */
@-moz-document domain("www.tumblr.com"){
/* Default settings reference:
navy/mainBg | NEW: #001935 OLD: #36465d | main background
white/postBg | NEW: #ffffff OLD: #ffffff | post background
black/postText | NEW: #000000 OLD: #000000 | post text
white-on-dark/menuText | NEW: #ffffff OLD: #ffffff | header and sidebar text/icons
accent/brightButton | NEW: #00b8ff OLD: #529ecc | buttons, notifications, other accents
secondary-accent/dullButton | NEW: #9da6af OLD: #9da6af | gray buttons
red/photoPost | NEW: #ff492f OLD: #d95e40 | likes, photo posts
orange/quotePost | NEW: #ff8a00 OLD: #f2992e | quote posts
yellow/miscColor | NEW: #e8d738 OLD: n/a | misc rainbow stuff
green/linkPost | NEW: #00cf35 OLD: #56bc8a | reblogs, link posts, some checkboxes
blue/chatPost | NEW: #00b8ff OLD: #529ecc | replies, chat posts, follows
purple/audioPost | NEW: #7c5cff OLD: #a77dc2 | mentions, audio posts
pink/videoPost | NEW: #ff62ce OLD: #748089 | video posts
follow/highlight | NEW: #f3f8fb OLD: n/a | highlights notes from people you follow
base-font-size/baseFontSize | NEW: 16 OLD: 14 | scales most text on the site (measured in px)
*/
:root {
--navy: red(mainBg), green(mainBg), blue(mainBg);
--white: red(postBg), green(postBg), blue(postBg);
--black: red(postText), green(postText), blue(postText);
--white-on-dark: red(menuText), green(menuText), blue(menuText);
--red: red(photoPost), green(photoPost), blue(photoPost);
--orange: red(quotePost), green(quotePost), blue(quotePost);
--yellow: red(miscColor), green(miscColor), blue(miscColor);
--green: red(linkPost), green(linkPost), blue(linkPost);
--blue: red(chatPost), green(chatPost), blue(chatPost);
--purple: red(audioPost), green(audioPost), blue(audioPost);
--pink: red(videoPost), green(videoPost), blue(videoPost);
--accent: red(brightButton), green(brightButton), blue(brightButton);
--secondary-accent: red(dullButton), green(dullButton), blue(dullButton);
--follow: red(highlight), green(highlight), blue(highlight);
--font-family: fontFamily;
--base-font-size: baseFontSize px;
}
/* background image setup */
if backgroundImage != "" {
if backgroundSettings == 1 {
body#tumblr, body#dashboard_messages_inbox, body#settings_actions_account {
background-image: url(backgroundImage);
background-repeat: no-repeat;
background-position: bottom right;
background-size: auto;
background-attachment: fixed;
}
} else if backgroundSettings == 2 {
body#tumblr, body#dashboard_messages_inbox, body#settings_actions_account {
background-image: url(backgroundImage);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-attachment: fixed;
}
} else if backgroundSettings == 3 {
body#tumblr, body#dashboard_messages_inbox, body#settings_actions_account {
background-image: url(backgroundImage);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
} else if backgroundSettings == 4 {
body#tumblr, body#dashboard_messages_inbox, body#settings_actions_account {
background-image: url(backgroundImage);
background-repeat: repeat;
background-position: bottom right;
background-size: auto;
background-attachment: fixed;
}
}
/* some quick hacks to make image backgrounds look better */
body#tumblr, body#dashboard_messages_inbox, body#settings_actions_account {
background-color: mainBg !important;
}
._3hOxd, .identity, .l-container.l-container--two-column-dashboard {
background-color: #FF00FF00 !important;
}
._2vuYz, .fMT1l, ._2ejt5 {
background-color: mainBg;
padding:0.75em 0.5em;
border-radius: 3px;
}
._2tcGG {
background-color:mainBg;
/*padding:0.2em 0.5em;*/
border-radius: 3px;
border: mainBg 0.5em solid;
margin-left: 0;
margin-right: 0;
}
._1dYAZ, ._3RuXz, ._2N5O1._2n0Ak {
background-color:mainBg !important;
}
.l-container.l-container--two-column-dashboard .l-content {
padding: 14px;
}
}
/* 2021 font resizing */
if not Favorit in fontFamily {
._3QBiZ, /* poster url */
._1l1OO, /* reblogged-from url */
.r_IvO, /* content author url */
._2fO31, /* url "Follow" button */
._1beMk ._1vRw3 ._3mTpj, /* asker/answerer urls */
._1beMk ._1vRw3 .Q1_t9, /* "asked"/"answered" */
._3KQTj, /* post type labels for new posts */
.cEdz4, /* next/previous buttons */
._3_A9F, /* timestamp on max_post_id pages*/
._1isbh ._2cw2D ._26wZT, /* post editor default text ("Go ahead, put anything") */
.Ja1vd, /* suggested tags */
._3ntl_, /* account dropdown */
.vBcUK, /* activity dropdown */
._2jE0P ._28V1j, /* chat dropdown your url */
._3TBjk ._1SqPY ._313XD, /* chat dropdown their url */
._1JRe2 ._1l88I, /* notes popup likes/reblogs count */
._3UKjj, /* notes popup poster/reblogged-from urls */
._9qOMn, /* queue page instructions */
._9qOMn select, /* queue page selection dropdowns */
.R3Iuc, /* queue page shuffle button*/
._3QTu2, /* sidebar followed tags */
._35J-K /* sidebar suggested blogs */
._3dTPo._2MvlR.M58hZ /* dashboard suggested blogs follow button */
{
font-size: 1rem;
}
._3TBjk ._1SqPY ._28T7I, /* chat dropdown last message preview */
._2RHa3, /* hamburger menu "about/apps/legal/privacy" */
._1boKQ /* "sponsored" text */
{
font-size: 0.9rem;
}
}
/* this one is in a hardcoded-size box so let's just hardcode like a sane person: */
._22l9r._2grvP._3MY-Y /* header notification count */
{
font-size: 12.5px;
}
/* obfuscated adjustments */
._2vAlC, /* reblog editor bg */
._3EFbU /* "Discard this post?" and other warning dialogue bgs (change when active?) */
{
background-color: alpha(mainBg, 0.80) !important;
}
.HZh8H._3fkvF /* pinned post footer text */
{
color: linkPost !important;
}
.HZh8H._3fkvF svg, /* pinned post footer icon */
._1Fg_n svg[fill="#00cf35"] /* avatar stamp reblog */
{
fill: linkPost;
}
._1Fg_n svg[fill="#ff492f"] /* avatar stamp like */
{
fill: photoPost;
}
._1Fg_n svg[fill="#00b8ff"] /* avatar stamp reply */
{
fill: chatPost;
}
._1Fg_n svg[fill="#7c5cff"] /* avatar stamp mention */
{
fill: audioPost;
}
/* beta post options */
.-Hj9- {
background: rgb(audioPost);
}
._1LdA1._2Ll-6 {
background: rgb(linkPost) !important;
}
._1F1cG._1iUPY {
background: rgb(mainBg) !important;
}
/* antique code still used on the settings page for some reason */
/* Main Background */
.l-container.l-container--two-column-dashboard .l-content,
.l-container.l-container--two-column .l-content,
.post_avatar,
.l-container.l-container--two-column-dashboard .left_column,
.l-container.l-container--two-column,
.l-container.l-container--two-column-dashboard,
.l-header-container--refresh,
.identity,
.identity,
.l-container.l-container--two-column-dashboard .right_column,
.l-container.l-container--two-column .right_column,
.post_avatar .post_avatar_link,
.toastr .toast,
.l-container.l-container--flex .l-content,
.search_results_container .tumblelog_mask_item {
background-color: mainBg;
}
.identity .right_column::after {
background: linear-gradient(180deg, mainBg, rgba(0, 0, 0, 0));
}
.radar .radar_footer .radar_avatar::before {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), mainBg);
}
.rapid-recs-container .rapid-recs {
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, mainBg 15%, mainBg 85%, rgba(0, 0, 0, 0));
}
.identity .controls_section.user_list li .follow_list_item_blog::before {
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), mainBg);
border-right: 5px solid mainBg;
}
#left_column .post_full .post_permalink,
#search_posts .post_full .post_permalink {
border-top-color: mainBg !important;
border-right-color: mainBg !important;
}
.tab-bar-container .tab_notice,
.tab_notice .tab_notice_value,
.plus-follow-button {
color: mainBg;
}
.tab-notice--outlined {
border-color: mainBg;
}
/* Transparent overlay background */
.blue#glass_overlay,
.blue#hello_glass,
.blue.glass,
body.flag--always-opaque-peepr .ui_peepr_glass,
.ui_peepr_glass,
.ui_dialog_lock {
background: alpha(mainBg, 0.80);
}
.blue#glass_overlay,
.blue#hello_glass,
.blue.glass {
transition: background-color .2s linear;
background: alpha(mainBg, 0.80);
z-index: 160;
}
.post-forms-glass,
.discover_actions_discover .elevator,
.search_actions_search .elevator {
background-color: alpha(mainBg, 0.80);
}
/* Likes */
.post_controls .post_control.like.liked::before,
.post .post_animated_heart,
.standalone-ad-container .post_animated_heart {
color: photoPost;
}
.notification_like .avatar_frame::before,
.notes .note.like .avatar_frame::before,
.ui_avatar .frame.like::before {
background: photoPost;
}
.like .post-activity-note-avatar .post-activity-avatar-link::after {
background-color: photoPost;
}
/* Cancel/Remove Buttons */
.control-reblog-trail .remove-button,
.editor .media-holder .media-killer {
background: photoPost;
border-color: photoPost;
}
/* Reblogs */
.post_controls .post_control.reblog.reblogged::before,
.post .post_reblog_poof {
color: linkPost;
}
.reblog .post-activity-note-avatar .post-activity-avatar-link::after {
background-color: linkPost;
}
.notification_reblog .avatar_frame::before,
.notes .note.reblog .avatar_frame::before,
.ui_avatar .frame.reblog::before,
.chrome.green,
.reblog-list-item .reblog-avatar.sub-icon-reblog::before {
background: linkPost;
}
/* Replies & Asks */
.notification_reply .avatar_frame::before,
.notification_photo_reply .avatar_frame::before,
.notification_answer .avatar_frame::before,
.notes .note.reply .avatar_frame::before,
.notes .note.photo .avatar_frame::before,
.notes .note.answer .avatar_frame::before,
.notes .note.user_mention .avatar_frame::before,
.ui_avatar .frame.reply::before {
background: chatPost;
}
.notification .notification_right .preview_frame.conversation,
.ui_post_badge.conversation {
background-color: chatPost;
}
.answer .post-activity-note-avatar .post-activity-avatar-link::after,
.reply .post-activity-note-avatar .post-activity-avatar-link::after {
background-color: chatPost;
}
/* Mentions */
.notification_user_mention .avatar_frame::before,
.notes .note.user_mention .avatar_frame::before,
.ui_avatar .frame.user_mention::before,
.ui_avatar .frame.note_mention::before {
background: audioPost;
}
/* Follows */
.notification_follower .avatar_frame::before,
.notification_group_member .avatar_frame::before,
.notes .note.follower .avatar_frame::before,
.ui_avatar .frame.follower::before {
background: quotePost;
}
/* Notification Flags, Buttons, and Other Bright Blue Things */
.popover--reblog-graph .reblog-graph-info-button,
.messaging-conversation--open .conversation-compose .compose-text-input-container .submit-button .submit,
.messaging-conversation--open .conversation-compose .compose-text-input-container .submit-button .submit,
.post-activity-reply .submit,
.search-follow-button .follow-text,
.worded-follow-button .follow-text,
.post-content-text .tmblr-truncated .tmblr-truncated-link,
.post-content-text .tmblr-truncated::after,
.post .post_body .tmblr-truncated .tmblr-truncated-link,
.post .post_body .tmblr-truncated::after,
.reblog-content .tmblr-truncated .tmblr-truncated-link, .reblog-content .tmblr-truncated::after,
.ui_notes .activity-notification .activity-notification__activity .activity-notification__activity_message .activity-notification__activity_reply .activity-notification__activity_reply_link,
.messaging-inbox .inbox-compose-toggle .compose-start,
.ui_notes .activity-notification .activity-notification__icon .note_follow,
.post .post_content_inner.safemode .link,
.post .post_content_inner.tagfiltering .link,
.post-form--tag-editor .tag-label.hover-style,
.post-form--tag-editor .tag-label.selected,
.reblog_follow_button .follow-text,
.worded-follow-button .follow-text,
.sidebar_link.explore_link,
.blog-selector-container .selected-blog .caret.is-open,
.messaging-inbox .inbox-conversations .is-unread.inbox-conversation .name-container {
color: brightButton;
}
.logged-out-header .signup-button,
.logged-out-header .signup-button:active,
.logged-out-header .signup-button:focus,
.tab_notice,
.post-form--controls .controls-container .post-form--save-button .split-button,
.post-form--controls .controls-container .post-form--save-button .split-button:active,
.ui_dialog .chrome.blue,
.chrome.blue:active,
.messaging-conversation--open .conversation-header:not(.has-image),
.messaging-conversation--open .conversation-header:not(.has-image),
.bubbles > div.active {
background-color: brightButton;
}
.yahoo-view-link-container .yahoo-view-link,
.selected .tab_notice,
.chrome.blue,
.blog-selector-container .selected-blog .caret.has-badge,
.tumblr_settings .blocked_blogs .tag-pill,
.binary_switch input[type="checkbox"]:checked ~ .binary_switch_track {
background: brightButton;
}
.compose-button {
fill: brightButton;
}
.chrome.blue,
.chrome.blue:active {
border-color: brightButton;
}
.chrome.blue:active {
filter: saturate(50%);
}
.post-form--controls .controls-container .post-form--save-button .split-button .button-area.disabled,
.post-form--controls .controls-container .post-form--save-button .split-button .button-area.disabled.active,
.post-form--controls .controls-container .post-form--save-button .split-button .button-area[disabled],
.post-form--controls .controls-container .post-form--save-button .split-button .button-area[disabled]:active,
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area.disabled,
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area.disabled.active,
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area[disabled],
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area[disabled]:active,
.post-form--controls .controls-container .post-form--save-button .split-button:active,
.post-form--controls .controls-container .post-form--save-button .split-button .button-area,
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area,
.post-form--controls .controls-container .post-form--save-button .split-button .button-area:focus,
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area:focus,
.post-form--controls .controls-container .post-form--save-button .split-button .button-area:active,
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area:active {
border-color: brightButton;
background-color: brightButton;
}
.field_row_shape .flat_radio input[type=radio]:checked~.flat_radio_marker {
border-color: brightButton;
background-color: lightness(brightButton, 80%);
}
.flat_radio input[type="radio"]:focus ~ .flat_radio_marker {
border-color: brightButton;
}
.editor .over-bottom:after,
.editor .over-top:before {
background-color: brightButton;
}
/* Dull (mostly used for toggles that are turned off */
.chrome {
border-color: dullButton;
border-bottom-color: dullButton;
background: dullButton;
}
.binary_switch .binary_switch_track {
background-color: dullButton;
}
.logged-out-header .login-button,
.logged-out-header .login-button:active,
.logged-out-header .login-button:focus {
background-color: dullButton;
color: mainBg;
}
/* Active Buttons */
.tumblr_settings--account .account-sessions .current .bold-copy {
color: linkPost;
}
.chrome.green {
border-color: linkPost;
}
/* Text Posts */
.new_post_label i.icon_post_text {
color: textPost;
}
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.regular,
.notification .notification_right .preview_frame.regular,
.ui_post_badge.regular,
.notification .notification_right .preview_frame.regular,
.ui_post_badge.regular,
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.ask_answer {
background-color: textPost;
}
/* Photo Posts */
.new_post_label i.icon_post_photo {
color: photoPost;
}
/* Quote Posts */
.new_post_label i.icon_post_quote {
color: quotePost;
}
.post_micro.is_quote .post_content {
background: quotePost;
}
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.quote,
.notification .notification_right .preview_frame.quote,
.ui_post_badge.quote {
background-color: quotePost;
}
/* Link Posts */
.new_post_label i.icon_post_link {
color: linkPost;
}
.post_micro.is_link .post_content {
background: linkPost;
}
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.link,
.notification .notification_right .preview_frame.link,
.ui_post_badge.link {
background-color: linkPost;
}
/* Chat Posts */
.new_post_label i.icon_post_chat {
color: chatPost;
}
.post_micro.is_chat .post_content {
background: chatPost;
}
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.conversation,
.notification .notification_right .preview_frame.conversation,
.ui_post_badge.conversation,
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.conversation {
background-color: chatPost;
}
/* Audio Posts */
.new_post_label i.icon_post_audio {
color: audioPost;
}
.audio-player,
.post_micro.is_audio .post_content {
background: audioPost;
}
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.audio,
.notification .notification_right .preview_frame.audio,
.ui_post_badge.audio {
background-color: audioPost;
}
/* Video Posts */
.new_post_label i.icon_post_video {
color: videoPost;
}
/* This is a hack on tumblr's end that I'm electing to remove instead of fix */
.identity .controls_section.user_list li:active .follow_list_item_blog::before,
.identity .controls_section.user_list li:hover .follow_list_item_blog::before,
.identity .user_list li:hover .follow_list_item_blog::before {
background-image: none;
border-right: none;
}
}