Skip to content

Instantly share code, notes, and snippets.

@hamed-farag

hamed-farag/Twitter High Contrast Theme

Last active January 17, 2019 15:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hamed-farag/c93864b96dee373b7b8dc0d85135a90f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hamed-farag/c93864b96dee373b7b8dc0d85135a90f to your computer and use it in GitHub Desktop.
Download ZIP
A High Contrast Theme For Twitter - deprecated
Raw
Twitter High Contrast Theme
.js-global-actions li#global-nav-home a {
border-bottom-color: #e8e800;
}
.global-nav-inner {
background: black;
}
.global-nav {
border-bottom-color: #e8e800;
}
.u-textUserColor,
.u-textUserColorHover:hover,
.u-textUserColorHover:hover .ProfileTweet-actionCount,
.u-textUserColorHover:focus {
color: #e8e800 !important;
}
#global-actions > li:hover > a,
#global-actions > li > a:focus,
#global-actions > li.active .text,
.DashUserDropdown.dropdown-menu .nightmode-toggle .Icon,
.nav.right-actions > li > a:hover,
.nav.right-actions > li > a:focus {
color: #e8e800;
}
.DashboardProfileCard.module {
border-color: #e8e800;
background: black;
}
a.DashboardProfileCard-avatarLink.u-inlineBlock {
background-color: black;
}
img.DashboardProfileCard-avatarImage.js-action-profile-avatar {
border-color: black;
}
.account-group .username,
.time,
.time a,
.created-via {
color: #d0c4c4;
}
span.ProfileCardStats-statLabel.u-block {
color: #fff;
}
.module .flex-module {
background-color: black;
border-color: #e8e800;
}
a,
.btn-link,
.btn-link:focus,
.icon-btn,
.pretty-link b,
.pretty-link:hover s,
.pretty-link:hover b,
.pretty-link:focus s,
.pretty-link:focus b,
.metadata a:hover,
.metadata a:focus,
a.account-group:hover .fullname,
a.account-group:focus .fullname,
.account-summary:focus .fullname,
.message .message-text a,
.message .message-text button,
.stats a strong,
.plain-btn:hover,
.plain-btn:focus,
.dropdown.open .user-dropdown.plain-btn,
.open > .plain-btn,
#global-actions .new:before,
.module .list-link:hover,
.module .list-link:focus,
.stats a:hover,
.stats a:hover strong,
.stats a:focus,
.stats a:focus strong,
.find-friends-sources li:hover .source,
.stream-item a:hover .fullname,
.stream-item a:focus .fullname,
.stream-item .view-all-supplements:hover,
.stream-item .view-all-supplements:focus,
.tweet .time a:hover,
.tweet .time a:focus,
.tweet .details.with-icn b,
.tweet .details.with-icn .Icon,
.stream-item:hover .original-tweet .details b,
.stream-item .original-tweet.focus .details b,
.stream-item.open .original-tweet .details b,
.client-and-actions a:hover,
.client-and-actions a:focus,
.dismiss-btn:hover b,
.tweet .context .pretty-link:hover s,
.tweet .context .pretty-link:hover b,
.tweet .context .pretty-link:focus s,
.tweet .context .pretty-link:focus b,
.list .username a:hover,
.list .username a:focus,
.list-membership-container .create-a-list,
.list-membership-container .create-a-list:hover,
.new-tweets-bar,
.card .list-details a:hover,
.card .list-details a:focus,
.card .card-body:hover .attribution,
.card .card-body .attribution:focus {
color: #e8e800;
}
.EdgeButton--secondary,
.EdgeButton--secondary:hover,
.EdgeButton--secondary:focus,
.EdgeButton--secondary:active {
border-color: #e8e800;
color: #e8e800;
background-color: black;
}
.module.Trends.trends {
border-color: #e8e800;
background-color: black;
}
a,
a:hover,
a:focus,
a:active {
color: #e8e800;
}
body {
background-color: black;
}
.timeline-tweet-box {
border-color: #e7e700 !important;
}
.home-tweet-box.tweet-box.component.tweet-user {
background-color: black;
}
.stream-item.js-new-items-bar-container.new-tweets-bar-visible {
border-color: #e8e800;
}
.tweet-box textarea:focus,
.tweet-box input[type=text],
.currently-dragging .tweet-form.is-droppable .tweet-drag-help,
.tweet-box[contenteditable="true"]:focus,
.RichEditor.is-fakeFocus,
.RichEditor.is-fakeFocus ~ .TweetBoxAttachments {
border-color: #e8e800;
box-shadow: none;
}
.stream-item:not(.no-header-background-module) {
background-color: black;
border-color: #e8e800;
}
.tweet {
border-color: #e8e800;
}
.tweet:hover {
background-color: #0c0c0c;
}
.top-timeline-tweetbox .timeline-tweet-box .tweet-form.condensed .tweet-box {
color: #e8e800;
}
.MomentGuideNavigation {
background-color: black;
border-bottom: 1px solid #e8e80085;
}
.MomentsPage.MomentsPermalinkPage,
.MomentsPage.MomentsGuidePage {
background-color: black !important;
}
.MomentCapsuleSummary--hero:hover,
.MomentCapsuleSummary--portrait:hover {
background: black;
border: 1px solid #e8e800;
}
.MomentCapsuleItemTweet.MomentCapsuleItemTweet--withText.js-stream-tweet.js-actionable-tweet {
background-color: black;
border: 1px dashed yellow;
}
.MomentFormatLink-anchor {
border: 1px solid yellow;
}
.MomentFloatingMenu {
background-color: black;
border: 1px solid yellow;
}
.MomentFloatingMenu .MomentButton {
color: yellow;
outline: none;
}
.MomentMediaItem {
background-color: black;
}
#global-actions > li > a {
border-bottom-color: #e8e800;
}
.global-nav .people .count .count-inner {
background: #e8e800;
color: black;
}
.global-dm-nav.new.with-count .dm-new .count-inner {
background: #e8e800;
color: black;
}
.EdgeButton--primary,
.EdgeButton--primary:focus {
background: #e8e800;
color: black;
}
.EdgeButton--primary:hover,
.EdgeButton--primary:active {
background-color: #e8e800d1;
border-color: #e8e800d1;
color: black;
}
.EdgeButton--primary:active {
box-shadow: 0 0 0 2px #000000, 0 0 0 4px #e8e800a1;
}
.ProfileCard {
background-color: black;
border: 1px solid #e8e800;
}
.ProfileHeading-content {
background-color: black;
border-color: #e8e800;
}
.ProfileCanopy-navBar {
background-color: black;
border-bottom: 1px solid #E8E800;
}
.ProfileAvatar {
background-color: black;
border-color: #E8E800;
}
.ProfileNav-item--userActions {
background-color: black;
}
.u-borderUserColor,
.u-borderUserColorHover:hover,
.u-borderUserColorHover:focus {
border-color: #e8e800 !important;
}
.ProfilePage.is-editing .ProfilePage-editingOverlay {
background-color: black;
}
.new-tweets-bar {
background-color: black;
border: 1px solid #e8e800;
}
.new-tweets-bar:hover {
background-color: black;
border: 1px solid #e8e800;
}
.PermalinkOverlay-with-background {
background: rgba(0, 0, 0, 0.90);
}
.permalink-tweet:hover,
.permalink-tweet.focus {
background-color: black;
border: 1px solid #e8e800;
box-sizing: border-box;
}
.PermalinkOverlay .permalink-tweet {
background: black;
border: 1px solid #e8e800;
}
.permalink .inline-reply-tweetbox-container {
background-color: black;
}
.permalink .inline-reply-tweetbox {
background-color: black;
border: 1px solid #e8e800;
}
.RichEditor.RichEditor--emojiPicker div[contenteditable],
.RichEditor.RichEditor--emojiPicker div[contenteditable]:focus,
.RichEditor.RichEditor--emojiPicker div[contenteditable].fake-focus {
border-color: #e8e800 !important;
}
.RichEditor,
.TweetBoxAttachments {
border-color: #e8e800;
}
.NotificationsHeadingContent {
background-color: black;
border: 1px solid yellow;
}
.ActivityItem {
border-color: #e8e800;
}
.QuoteTweet {
border-color: #e8e80080;
}
.ActivityItem:not(.has-clickAction) .QuoteTweet--slim:hover {
background: black;
border-color: #e8e800;
}
.ActivityItem.has-clickAction:hover {
background: black;
}
.modal-container {
background: rgba(0, 0, 0, 0.90);
}
.DMActivity-header {
background-color: black;
border-color: #e8e800;
}
.DMInboxItem {
border-bottom: 1px solid #e8e800;
background-color: black;
color: black;
}
.DMInboxItem.is-unread {
background-color: #1d1d1d;
}
.DMInboxItem:hover {
background-color: #3c3c3c !important;
}
.DMActivity-body {
background-color: black;
border: 1px solid #e8e800;
}
.DirectMessage--sent .DirectMessage-text {
background-color: #3c3c3c;
}
.DirectMessage--received .DirectMessage-text {
background-color: #636363;
}
.u-bgUserColorLightest {
background-color: black !important;
border: 1px solid #e8e800;
}
.DMButtonBar {
background-color: black;
border: 1px solid #e8e800;
}
.u-bgUserColor,
.u-bgUserColorHover:hover,
.u-bgUserColorHover:focus {
background: black !important;
border-bottom: 1px solid #e8e800;
}
.u-bgUserColor,
.u-bgUserColorHover:hover,
.u-bgUserColorHover:focus {
background: black !important;
border-bottom: 1px solid #e8e800;
}
.dropdown-menu {
background: black;
border: 1px solid #e8e800;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu .dropdown-link:hover,
.dropdown-menu .dropdown-link:focus,
.dropdown-menu .dropdown-link.is-focused,
.dropdown-menu li:hover .dropdown-link,
.dropdown-menu li:focus .dropdown-link,
.dropdown-menu .selected a,
.dropdown-menu .dropdown-link.selected {
background: #e8e800 !important;
color: black !important;
}
.conversation-module .conversation-tweet-item .tweet:hover {
background: #0C0C0C;
}
@hamed-farag
Copy link
Author

hamed-farag commented Sep 7, 2018 •
edited
Loading

You can use it via Chrome Extension called Stylus
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en

But first, use the Night Mode of Twitter then apply this High Contrast Theme

@hamed-farag
Copy link
Author

hamed-farag commented Sep 7, 2018

image

@NonStopMan
Copy link

NonStopMan commented Sep 10, 2018

nice work Hamed Keep it up , but i think you should add style to the search bar.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment