☰

ShadeRoot Instagram

Eye-friendly magic in your browser for Instagram

  1. //
  2. // Written by Glenn Wiking
  3. // Script Version: 1.0.0a
  4. // Date of issue: 09/12/17
  5. // Date of resolution: 09/12/17
  6. //
  7. // ==UserScript==
  8. // @name        ShadeRoot Instagram
  9. // @namespace   SRIG
  10. // @description Eye-friendly magic in your browser for Instagram
  11. // @version     1.0.0a
  12. // @icon        https://i.imgur.com/YKIGT79.png
  13.  
  14. // @include        http://*.instagram.*
  15. // @include        https://*.instagram.*
  16. // ==/UserScript==
  17.  
  18. function ShadeRootIG(css) {
  19.     var head, style;
  20.     head = document.getElementsByTagName('head')[0];
  21.     if (!head) { return; }
  22.     style = document.createElement('style');
  23.     style.type = 'text/css';
  24.     style.innerHTML = css;
  25.     head.appendChild(style);
  26. }
  27.  
  28. ShadeRootIG(
  29. 	// BG 1
  30. 	'html, body, ._2v79o, ._axuw9, .-cx-PRIVATE-Page__body, .-cx-PRIVATE-Page__main, .-cx-PRIVATE-Page__root, ._io, ._1ewm, ._66ugs, ._66ugs::before, .main, .card-description, .card-description caption strong, .card-description .actions, ._q8pf2 {background-color: #1d2327 !important;}'
  31. 	+
  32. 	// TEXT COLOR 1
  33. 	'body, option, ._ph6vk, ._c59vy, h1, h2, h3, h4, h5, h6, span, p, li {color: #c1cfd5 !important;}'
  34. 	+
  35. 	'iframe {background: rgb(30, 75, 119) !important; border: 1px solid rgb(23, 64, 99) !important;}'
  36. 	+
  37. 	// BG2 
  38. 	'._f9sjj, ._7g4gl, ._nx5in, ._ouv75, ._psd08, ._s5vjd, .top-bar, .card-info, .card-info caption strong, .card-info-more, .card-info-more caption strong, .card, ._dnf8p {background-color: #172e42 !important; border: 1px solid #104b84 !important;}'
  39. 	+
  40. 	// LOGO ROUNDING
  41. 	'._68swa, .coreSpriteDesktopNavLogoAndWordmark, .coreSpriteDesktopNavProfile, .coreSpriteDesktopStoriesRing, .coreSpriteDesktopStoriesRingSeen, .coreSpriteActivityHeart, .-cx-PRIVATE-NavBar__logo, .top-bar .logo, .embedSpriteGlyph, .elSprite, .embedHideText, .embedSpriteLikesNew, .embedSpriteVerifiedBadgeSmall, .embedSpriteViewCount, .embedSpriteViewCountNew, .embedSpriteCommentsNew, ._tauyc {background-color: #91bfd5 !important; padding: .1em !important; border-radius: 1em !important;}'
  42. 	+
  43. 	'.coreSpriteNullProfile, .coreSpriteDesktopNavExplore, .coreSpriteDesktopNavActivity, .coreSpriteMobileNavSettings, .coreSpriteCloseLight, .coreSpriteComment, .coreSpriteDesktopNavActivity, .coreSpriteDesktopNavExplore, .coreSpriteHashtag, .coreSpriteHeartFull, .coreSpriteHeartOpen {background-color: #91bfd5 !important; border-radius: 2.5em;}'
  44. 	+
  45. 	// COLOR 1
  46. 	'code, ._hxmdu, ._mb54c, ._mb4af, ._o6mpc, ._h74gn, ._kx10g, ._l9ywh, ._jh9m1, ._avvq0, input, ._76v, .inputtext, ._76v, .textInput, ._1sr9, ._j0gmt, ._1cr2e, ._epyes, .espMetricText, .EmbedCaption, .EmbedTimestamp, .EmbedTimestamp:visited {color: #c9d2d7 !important;}'
  47. 	+
  48. 	// COLOR 2
  49. 	'._fd86t, ._ajwor, ._cd2n1, label {color: #3294c9 !important;}'
  50. 	+
  51. 	// FORM ITEMS BG
  52. 	'._ph6vk, ._sjplo, input, select, textarea, ._1nn6e, ._mahua, ._mi48x {background: #1d496e !important;}'
  53. 	+
  54. 	'._sjplo, select, textarea, ._1nn6e, ._mahua {border: 1px solid #1a6aa5 !important; color: #d0e4ec !important;}'
  55. 	+
  56. 	'._ngtox, imgn, .three-step ol {opacity: .85 !important;}'
  57. 	+
  58. 	// BG 3
  59. 	'._s5vm9, ._tpnch, ._28rsa, ._isucp, #subhead {background-color: #11181e !important;}'
  60. 	+
  61. 	'a, a:visited, strong {color: #257cd2 !important;}'
  62. 	+
  63. 	'._fsoey {color: #257cd2 !important; border-left: 1px solid #257cd2 !important;}'
  64. 	+
  65. 	'._6e4x5, ._9dpug, .-cx-PRIVATE-NavBar__root, ._kihls, ._r7o1l {border-bottom: solid 1px #0f4974 !important;}'
  66. 	+
  67. 	'._8oo9w, ._km7ip {border-top: solid 1px #0f4974 !important;}'
  68. 	+
  69. 	// BG 4
  70. 	'._4ae27 {background: #141a1e !important;}'
  71. 	+
  72. 	// BUTTON
  73. 	'._t78yp, ._5tsk5, ._j798k, ._72wr6 {border-color: #2e70a1 !important; color: #b7e7f8 !important; background: #0d2f50 !important;}'
  74. 	+
  75. 	'._hql7s, ._o2wxh, ._gimca, ._mahua, ._1ewn, ._brnf8 {background-color: #182029 !important; border-bottom: 1px solid #143b54 !important;}'
  76. 	+
  77. 	'._h74gn, ._dv59m {background: #233d60 !important;}'
  78. 	+
  79. 	'._h74gn:hover {background: #194571 !important;}'
  80. 	+
  81. 	'._mleeu {border-right: 1px solid #113859 !important;}'
  82. 	+
  83. 	'._28rsa, ._dv59m {border: 1px solid #0b3a59 !important;}'
  84. 	+
  85. 	'._etlo6:hover {background-color: #1b5a98 !important; border-left-color: #0e395d !important; color: #d4e0e7 !important;}'
  86. 	+
  87. 	'._jh9m1, ._avvq0, ._leqcz, ._7hhq6, ._bc1a8 {border: 1px solid #266193 !important;}'
  88. 	+
  89. 	'._leqcz, ._bc1a8 {background: #092d50 !important;}'
  90. 	+
  91. 	'._e3il2, #react-root, article, footer, header, main, nav, section, .-cx-PRIVATE-SidebarLayout__contentWrapper {background-color: #0e243b !important;}'
  92. 	+
  93. 	'._742f7 {background: #215b9399 !important; border-radius: 0 1.5em 1.5em 0 !important;}'
  94. 	+
  95. 	'._r48jm {background: #215b9399 !important; border-radius: 1.5em 0 0 1.5em !important;}'
  96. 	+
  97. 	'.-cx-PRIVATE-SidebarLayout__content {border-right: 1px solid #11436e !important;}'
  98. 	+
  99. 	'.-cx-PRIVATE-SidebarLayout__contentWrapper, ._66ugs {border: 1px solid #11283f !important;}'
  100. 	+
  101. 	'.uiBoxLightblue, article > .inner, .instagram-graph-api-platform, blockquote, code {background-color: #203760 !important; border: 1px dashed #2a85d2 !important;}'
  102. 	+
  103. 	'._4abhr, ._jlcqs, ._brnf8 {border: 1px solid #0d4287 !important;}'
  104. 	+
  105. 	'._lfwfo {background: #2363ab !important; border-bottom: solid 1px #154060 !important; color: #d9e3e9 !important;}'
  106. 	+
  107. 	'._6e4x5, ._b9n99, ._3g81g, ._gs38e {background: #102539 !important;}'
  108. 	+
  109. 	'.leaflet-container {background: #000 !important;}'
  110. 	+
  111. 	'.leaflet-tile, .leaflet-marker-icon, .leaflet-zoom-animated {filter: brightness(.8) !important;}'
  112. 	+
  113. 	'.paging ul li {border: 1px solid #165295 !important;}'
  114. 	+
  115. 	'.blog-footer {text-shadow: 0 1px 0 rgb(15, 36, 65) !important;}'
  116. 	+
  117. 	'.fcb {color: #8597a2 !important;}'
  118. 	+
  119. 	'.page-footer {border-top: 1px solid #163b5a !important; background: #214b6b !important;}'
  120. 	+
  121. 	'.sidebar-nav {background: #0b1d2a !important;}'
  122. 	+
  123. 	'.sidebar-nav, .sidebar-content {border-left: 1px solid #133e62 !important; border-right: 1px solid #143d5f !important;}'
  124. 	+
  125. 	'.sidebar-content > ul > li.active > a, .index-nav > ul > li.active > a {background-color: #223c71 !important; border-bottom-color: #215784 !important;}'
  126. 	+
  127. 	'.sidebar-content > ul > li a, .index-nav > ul > li a {border-bottom: 1px solid #1e4374 !important; background-color: #192c3e !important;}'
  128. 	+
  129. 	'.sidebar-content > ul > li a:hover, .index-nav > ul > li a:hover {box-shadow: 0 1px 0 rgb(19, 54, 89) inset, 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 1px 0px rgba(0, 0, 0, 0.02), 0px -2px 0px rgba(0, 0, 0, 0.02) !important;}'
  130. 	+
  131. 	'.quick-search {border-bottom: solid 1px #16578d !important; background-color: #16436f !important; background-image: linear-gradient(to bottom, #1f5081, #11304e) !important;}'
  132. 	+
  133. 	'.sidebar-content > ul, .index-nav > ul {border-top: 1px solid #21496b !important;}'
  134. 	+
  135. 	'.quick-search input {border-color: #2469c2 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgb(26, 69, 96) !important;}'
  136. 	+
  137. 	'.sidebar-content > ul > li a:hover, .index-nav > ul > li a:hover {background: #103968 !important;}'
  138. 	+
  139. 	'.introduction-wrapper-tall .introduction {background: none !important;}'
  140. 	+
  141. 	'.cta .button {color: #0d2b59 !important;}'
  142. 	+
  143. 	'.terms, blockquote {border: 1px solid #164771 !important;}'
  144. 	+
  145. 	'.terms {text-shadow: 0 1px 0 rgb(13, 44, 75) !important;}'
  146. 	+
  147. 	'.top-bar-actions > li > a {color: #c4dcfb !important;}'
  148. 	+
  149. 	'th, tr:last-child td, th, td {border-bottom-color: #164274 !important;}'
  150. 	+
  151. 	'.sidebar-content > ul ul, .index-nav > ul ul {background: #0d253c !important; border-top: 1px solid #134b78; border-bottom: 1px solid #134b78;}'
  152. 	+
  153. 	'.button-light, .card-info .button {background-color: #112941 !important; background-image: linear-gradient(to bottom, #1a65b0, #11355a) !important; color: #c4dcfb !important;}'
  154. 	+
  155. 	'.index-nav {border: 1px solid #114a7a !important;}'
  156. 	+
  157. 	'[type="submit"], .button, .button-light, .card-info .button, .button-disabled {border: 1px solid #0c5aa1 !important;}'
  158. 	+
  159. 	'.ButtonActive[type="submit"], .ButtonActive.button, .ButtonActive.button-light, .ButtonActive.button-disabled, .ButtonActive.button-grey, .button-active[type="submit"], .button-active.button, .button-active.button-light, .button-active.button-disabled, .button-active.button-grey, .active[type="submit"], .active.button, .active.button-light, .active.button-disabled, .active.button-grey, [type="submit"]:active, .button:active, .button-light:active, .button-disabled:active, .button-grey:active, html.touch .pressed[type="submit"], html.touch .pressed.button, html.touch .pressed.button-light, html.touch .pressed.button-disabled, html.touch .pressed.button-grey {box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08), inset 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(21, 57, 87, 0.9) !important;}'
  160. 	+
  161. 	'.-cx-PRIVATE-Navigation__navLink:hover {border-left-color: #0e559b !important;}'
  162. 	+
  163. 	'.-cx-PRIVATE-Footer__nav {background: #214b6b !important;}'
  164. 	+
  165. 	'._4rbun {opacity: .9 !important;}'
  166. 	+
  167. 	'._q8pf2 {border: 1px solid #143b68 !important;}'
  168. 	+
  169. 	'._tb97a {border-bottom: 1px solid #1e4e8d !important;}'
  170. 	+
  171. 	'._4w6q {border-top: dashed 1px #327dbc !important;}'
  172. 	+
  173. 	'._4w6q:last-child {border-bottom: dashed 1px #327dbc !important;}'
  174. 	+
  175. 	'._y5i {border-top: 1px solid #194774 !important;}'
  176. 	+
  177. 	'._4-u8 {background-color: #142e4b !important; border-color: #23599e !important;}'
  178. 	+
  179. 	'._57d8 {background-color: #114e83 !important;}'
  180. 	+
  181. 	'._ti7l3 {padding-left: 1em;}'
  182. 	+
  183. 	'._si7dy {border-bottom: 1px solid black;}'
  184. );