Twitter inexplicably changed the color purple on their website today. It seems they also changed pink/red, but I'm going to focus on purple, because that's my Twitter theme color (and my favorite color, because Prince). You can set your theme color by pressing the "More" button in the Twitter left sidebar and selecting "Display" in the popup menu.
There are six theme color options, displayed below.
The default option is blue. I've selected purple. (Yes, that's supposed to be purple.)
Many Twitter users, including myself, dislike the new color purple, because it's too bluish and bright. We would prefer to have the old purple back. As you can probably guess, I wouldn't be writing this blog post if I didn't have a way of getting the old purple back!
If you look at the Twitter "source code" in the web inspector, you can see that the new purple color is called "purple500". I believe that the old purple color is "purple600".
purple500: "#7856FF",
purple600: "#6545DB",These are also called "MediumPurple" and "DeepPurple".
case "DeepPurple":
return s.purple600;
case "MediumPurple":
return a.purple500;Deep Purple is a classic rock band, whereas Medium Purple is… I assume a terrible band that we've never heard of.
I'm the developer of a Safari extension for Mac called StopTheMadness, and one of its features is site-specific CSS. Safari itself has a style sheet feature, but any CSS rules you define in the style sheet apply to every website you visit in Safari. Whereas StopTheMadness allows you to define CSS rules that are customized for individual sites. In my testing, this Safari style sheet will switch Twitter from the new annoying purple to the old beloved purple.
@charset "UTF-8";
html[stopthemadness-href^="https://twitter.com"] a[style="background-color: rgb(120, 86, 255);"] {
background-color: #6545DB !important;
}
html[stopthemadness-href^="https://twitter.com"] .r-14ddkhy {
background-color: #6545DB !important;
}
html[stopthemadness-href^="https://twitter.com"] .r-168457u {
background-color: #6545DB !important;
}
html[stopthemadness-href^="https://twitter.com"] .r-kpws4y {
color: #6545DB !important;
}Make sure to enable the "Style sheet" website option in StopTheMadness.
If you don't use Safari, or don't have StopTheMadness, you can still use my CSS rules in whatever way your browser supports, if you remove the html part of the CSS selectors. However, the CSS would then apply to every website. This would probably be ok, you just have to hope that no other website defines .r-14ddkhy and the other classes.
a[style="background-color: rgb(120, 86, 255);"] {
background-color: #6545DB !important;
}
.r-14ddkhy {
background-color: #6545DB !important;
}
.r-168457u {
background-color: #6545DB !important;
}
.r-kpws4y {
color: #6545DB !important;
}Below are the Twitter default medium purple and the "hacked" deep purple colors side by side.
Purple, and sanity, restored. You're welcome! If you enjoy this Twitter hack, you can show your appreciation by purchasing StopTheMadness and/or Tweaks for Twitter (my browser extension for hiding annoying user interface elements on Twitter), links below.
By the way, I also figured out how to disable the new Twitter Chirp font.