🏠 Home　

Instagram dark and responsive

Instagram website is more suitable for wide screens and for our eyes.


Install as user style? 
  1. /* ==UserStyle==
  2. @name            Instagram dark and responsive
  3. @version         1.0.5
  4. @description     Instagram website is more suitable for wide screens and for our eyes.
  5. @author          BreatFR (https://breat.fr)
  6. @namespace       https://gitlab.com/breatfr
  7. @homepageURL     https://gitlab.com/breatfr/instagram
  8. @supportURL      https://discord.gg/Q8KSHzdBxs
  9. @license         AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. @preprocessor    stylus
  11. @var checkbox    darkmode            "Dark mode"            1
  12. @var checkbox    hidescrollbars      "Hide scrollbars"      1
  13. @var checkbox    widemode            "Wide mode"            1
  14. ==/UserStyle== */
  15. /* === Credits ===
  16. Website          https://breat.fr
  17. facebook         https://www.facebook.com/breatfroff
  18. mastodon         https://mastodon.social/@breat_fr
  19. telegram         https://t.me/breatfr
  20. vk               https://vk.com/breatfroff
  21. X (twitter)      https://x.com/breatfroff
  22. === Credits === */
  23. @-moz-document domain("instagram.com") {
  24. /* ===================================================================================================================================
  25. Version
  26. =================================================================================================================================== */
  27. :root {
  28. --themeversion: 'Theme v1.0.5 by BreatFR \A';
  29. --link: ' gitlab.com/breatfr/instagram ';
  30. }
  31. .x9f619.xjbqb8w.x78zum5.x168nmei.x13lgxp2.x5pf9jr.xo71vjh.xseo6mj.x1uhb9sk.x1plvlek.xryxfnj.x1c4vz4f.x2lah0s.xdt5ytf.xqjyukv.x1qjc9v5.x1oa3qoh.x1nhvcw1::after {
  32. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  33. background-clip: text;
  34. -webkit-background-clip: text;
  35. color: transparent;
  36. content: var(--themeversion) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHN0eWxlPSJ0cmFuc2Zvcm06IHNjYWxlWSgtMSk7Ij48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29we###Z2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iI2NiY2JjYiIgZD0iTTMwNyAzNC44Yy0xMS41IDUuMS0xOSAxNi42LTE5IDI5LjJ2NjRIMTc2Qzc4LjggMTI4IDAgMjA2LjggMCAzMDRDMCA0MTcuMyA4MS41IDQ2Ny45IDEwMC4yIDQ3OC4xYzIuNSAxLjQgNS4zIDEuOSA4LjEgMS45YzEwLjkgMCAxOS43LTguOSAxOS43LTE5LjdjMC03LjUtNC4zLTE0LjQtOS44LTE5LjVDMTA4LjggNDMxLjkgOTYgNDE0LjQgOTYgMzg0YzAtNTMgNDMtOTYgOTYtOTZoOTZ2NjRjMCAxMi42IDcuNCAyNC4xIDE5IDI5LjJzMjUgMyAzNC40LTUuNGwxNjAtMTQ0YzYuNy02LjEgMTAuNi0xNC43IDEwLjYtMjMuOHMtMy44LTE3LjctMTAuNi0yMy44bC0xNjAtMTQ0Yy05LjQtOC41LTIyLjktMTAuNi0zNC40LTUuNHoiLz48L3N2Zz4=") var(--link) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHRyYW5zZm9ybT0icm90YXRlKDE4MCkiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBmaWxsPSIjY2JjYmNiIiBkPSJNMzA3IDM0LjhjLTExLjUgNS4xLTE5IDE2LjYtMTkgMjkuMnY2NEgxNzZDNzguOCAxMjggMCAyMDYuOCAwIDMwNEMwIDQxNy4zIDgxLjUgNDY3LjkgMTAwLjIgNDc4LjFjMi41IDEuNCA1LjMgMS45IDguMSAxLjljMTAuOSAwIDE5LjctOC45IDE5LjctMTkuN2MwLTcuNS00LjMtMTQuNC05LjgtMTkuNUMxMDguOCA0MzEuOSA5NiA0MTQuNCA5NiAzODRjMC01MyA0My05NiA5Ni05Nmg5NnY2NGMwIDEyLjYgNy40IDI0LjEgMTkgMjkuMnMyNSAzIDM0LjQtNS40bDE2MC0xNDRjNi43LTYuMSAxMC42LTE0LjcgMTAuNi0yMy44cy0zLjgtMTcuNy0xMC42LTIzLjhsLTE2MC0xNDRjLTkuNC04LjUtMjIuOS0xMC42LTM0LjQtNS40eiIvPjwvc3ZnPg==") ;
  37. display: flex;
  38. flex-direction: column;
  39. font-size: 18px;
  40. left: 7%;
  41. position: absolute;
  42. text-align: center;
  43. top: 62%;
  44. width: max-content;
  45. white-space: pre-line;
  46. }
  47. /* ===================================================================================================================================
  48. Hide scrollbars
  49. =================================================================================================================================== */
  50. if hidescrollbars {
  51. :root ::-webkit-scrollbar {
  52. scrollbar-width: none !important;
  53. -ms-overflow-style: none !important;
  54. -moz-overflow-style: none !important;
  55. -webkit-overflow-style: none !important;
  56. width: 0px !important;
  57. }
  58. ::-webkit-scrollbar {
  59. display: none !important;
  60. width: 0px !important;
  61. }
  62. }
  63. :root {
  64. font-size: 1.2rem !important;
  65. }
  66. /* ===================================================================================================================================
  67. Dark
  68. =================================================================================================================================== */
  69. if darkmode {
  70. /* Splash screen */
  71. #splash-screen {
  72. background: #1e1e1e !important;
  73. color: #cbcbcb !important;
  74. }
  75. .xat24cr,
  76. .x12nagc.x182iqb8.x1pi30zi.x1swvt13,
  77. .x5ur3kl.x13fuv20.x178xt8z.x1roi4f4.x2lah0s.xvs91rp.xl56j7k.x17ydfre.x1n2onr6.x10b6aqq.x1yrsyyn.x1hrcb2b.x1pi30zi,
  78. .x6s0dn4.xrvj5dj.x1o61qjw.x12nagc.x1gslohp,
  79. header section {
  80. background: transparent !important;
  81. }
  82. ._aaic,
  83. ._aam1,
  84. ._abm4,
  85. ._ae1j,
  86. .xvbhtw8,
  87. .xyzq4qe,
  88. ._aak3,
  89. ._aatc ._aasi,
  90. ._aest,
  91. ._ae48,
  92. ._aa61,
  93. ._aauy,
  94. ._aa62,
  95. ._ab8s,
  96. ._ad8j ,
  97. ._aatg ._aatk._aatn,
  98. ._aatk,
  99. ._ab8q,
  100. ._ae1i,
  101. ._ae1k,
  102. .x7r02ix,
  103. ._aart,
  104. ._aart ._aaru,
  105. ._aac4._aac5._aac6._aj3f._ajdu,
  106. .x78zum5.xdt5ytf.x1iyjqo2.x5yr21d.xh8yej3,
  107. .x78zum5.xdt5ytf.x1iyjqo2.xg6iff7,
  108. .x9f619.x1n2onr6.x1ja2u2z,
  109. ._ab22,
  110. ._aasi,
  111. .xnz67gz,
  112. body,
  113. body._a3wf {
  114. background: #1e1e1e !important;
  115. background-color: #1e1e1e !important;
  116. }
  117. * {
  118. border: none !important;
  119. }
  120. body,
  121. button,
  122. div,
  123. h1,
  124. h2,
  125. h3,
  126. h4,
  127. h5,
  128. h6,
  129. label,
  130. p,
  131. svg,
  132. textarea,
  133. ._aad3,
  134. ._aaai,
  135. ._ac2a,
  136. ._alvs,
  137. ._alvs:visited,
  138. ._aacx,
  139. ._aaoe,
  140. ._aaqn,
  141. ._acao._acat,
  142. .x5n08af:not(input),
  143. .xzsf02u,
  144. .xqnirrm {
  145. color: #cbcbcb !important;
  146. fill: #cbcbcb !important;
  147. }
  148. a:hover {
  149. color: white !important;
  150. fill: white !important;
  151. }
  152. /* Links */
  153. a,
  154. a:visited,
  155. ._aaai,
  156. ._aaai:visited,
  157. ._aaqn,
  158. ._aaqn:visited,
  159. ._ap3a._aaco._aacw._aacz._aada._aade,
  160. ._aacz:visited,
  161. .x7l2uk3,
  162. .x7l2uk3:visited,
  163. .x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x193iq5w.xeuugli.x1r8uery.x1iyjqo2.xs83m0k > div > div > div > div:nth-child(4) > div,
  164. .x3nfvp2.x193iq5w > div > a > span > span {
  165. color: rgb(0, 149, 246) !important;
  166. }
  167. /* Loved */
  168. svg.x1lliihq.x1n2onr6.xxk16z8 path {
  169. fill: #fc5776;
  170. stroke: #fc5776;
  171. }
  172. /* Follow */
  173. ._ap3a._aaco._aacw._aad6._aade {
  174. color: white !important;
  175. }
  176. /* Followed */
  177. [style="display: inline-block; transform: rotate(180deg);"] > svg,
  178. ._ap3a._aaco._aacw._aad6._aade[dir="auto"] {
  179. color: #101010 !important;
  180. fill: #101010 !important;
  181. }
  182. /* Reels */
  183. .xlup9mm.x10ogl3i.x1kky2od > svg,
  184. [style="line-height: var(--base-line-clamp-line-height); --base-line-clamp-line-height: 16px;"] > .x1lliihq.x193iq5w.x6ikm8r.x10wlt62.xlyipyv.xuxw1ft {
  185. color: #1e1e1e !important;
  186. fill: #1e1e1e !important;
  187. }
  188. .x1y1aw1k.x1sxyh0.xwib8y2.xurb0ha > a > div,
  189. .x1y1aw1k.x1sxyh0.xwib8y2.xurb0ha > div > div {
  190. background: #1e1e1e !important;
  191. }
  192. /* Modal after clicking on image/video */
  193. article[class="_aatb _aate _aatg _aati"],
  194. article[class="_aatb _aate _aatg _aati"] > div {
  195. border-radius: 16px !important;
  196. }
  197. ._aaqf._aaqh,
  198. ._aaqg._aaqh {
  199. background: #1e1e1e !important;
  200. border: 1px solid;
  201. }
  202. ._aaqf._aaqh svg,
  203. ._aaqg._aaqh svg  {
  204. height: 36px;
  205. width: 36px;
  206. }
  207. .x1eu8d0j {
  208. background: #1e1e1e !important;
  209. }
  210. /* Previous/next on menu profile */
  211. ._aao_ {
  212. padding-right: 3px;
  213. }
  214. ._afxx {
  215. background: url(https://static.cdninstagram.com/rsrc.php/v3/y8/r/ZWR9C7_JdnP.png);
  216. background-position: -294px -226px;
  217. background-repeat: no-repeat;
  218. height: 45px;
  219. width: 45px;
  220. }
  221. ._afxy {
  222. background: url(https://static.cdninstagram.com/rsrc.php/v3/y8/r/ZWR9C7_JdnP.png);
  223. background-position: -294px -226px;
  224. background-repeat: no-repeat;
  225. height: 45px;
  226. width: 45px;
  227. }
  228. /* Verified icons */
  229. svg.x1lliihq.x1n2onr6:not(.x1lliihq.x1n2onr6.x5n08af,.x1lliihq.x1n2onr6.xyb1xck,[style="display: flex; flex-direction: column; padding-bottom: 0px; padding-top: 0px; position: relative;"] svg) {
  230. fill: rgb(0, 149, 246) !important;
  231. }
  232. /* Icons on profil's posts */
  233. [style="display: flex; flex-direction: column; padding-bottom: 0px; padding-top: 0px; position: relative;"] svg {
  234. fill: white !important;
  235. }
  236. }
  237. /* ===================================================================================================================================
  238. Wide
  239. =================================================================================================================================== */
  240. if widemode {
  241. .xsdox4t,
  242. .x78zum5.xdt5ytf.x1iyjqo2.xg6iff7,
  243. .x6osk4m.x6osk4m {
  244. overflow-x: hidden;
  245. width: 100% !important;
  246. }
  247. main {
  248. max-width: calc(100% - 335px) !important;
  249. }
  250. main > [class="x1iyjqo2 xdj266r xkrivgy xat24cr x1gryazu x1ykew4q x38y82z xc73u3c x18d9i69 x5ib6vp x19sv2k2 x1wfb79h x1oyxtw5 x1k4gc0v x15w28ab x10rn61k"] {
  251. margin-left: 300px !important;
  252. max-width: 100% !important;
  253. }
  254. main > div > [style="max-width:630px;width:100%"],
  255. main > div > [style="max-width: 630px; width: 100%;"] {
  256. margin-left: 300px !important;
  257. max-width: calc(100% - 335px) !important;
  258. min-width: calc(100% - 335px) !important;
  259. }
  260. .x1okitfd {
  261. max-width: none !important;
  262. }
  263. article [class="x6s0dn4 xyzq4qe x78zum5 xdt5ytf x2lah0s xl56j7k x6ikm8r x10wlt62 x1n2onr6 x5ur3kl xopu45v x1bs97v6 xmo9t06 x1lcm9me x1yr5g0i xrt01vj x10y3i5r x13fuv20 xu3j5b3 x1q0q8m5 x26u7qi x178xt8z xm81vs4 xso031l xy80clv"] > div {
  264. width: 100%;
  265. }
  266. .x6s0dn4.xyzq4qe.x78zum5.xdt5ytf.x2lah0s.xl56j7k.x6ikm8r.x10wlt62.x1n2onr6.x5ur3kl.xopu45v.x1bs97v6.xmo9t06.x1lcm9me.x1yr5g0i.xrt01vj.x10y3i5r.x13fuv20.xu3j5b3.x1q0q8m5.x26u7qi.x178xt8z.xm81vs4.xso031l.xy80clv {
  267. border-radius: 16px !important;
  268. }
  269. li[class="_acaz"],
  270. [style*="width: calc(-2px + min"] {
  271. min-width: 100% !important;
  272. width: calc(100vw - 670px) !important;
  273. }
  274. [style*="width: calc(-2px + min"] img {
  275. max-width: 100% !important;
  276. }
  277. [style*="width: calc(-2px + min"] video {
  278. height: auto !important;
  279. min-width: 100% !important;
  280. object-fit: cover !important;
  281. }
  282. .xvbhtw8.xixxii4.x13vifvy.xk3oba8.xh8yej3.x1mcj5oc,
  283. .x78zum5.x1q0g3np.xl56j7k.xh8yej3.x1xy6bms > div:nth-child(1) {
  284. max-width: calc(100% - 670px) !important;
  285. }
  286. /* Profile galery */
  287. .x1iyjqo2.xdj266r.xkrivgy.x4n8cb0.x1gryazu.x1ykew4q.x38y82z.xc73u3c.x18d9i69.x5ib6vp.x19sv2k2.x164vai7.x13ijfrp.xhwgc15.xkvl2z1.x58vhm7 {
  288. margin-left: 16.5%;
  289. max-width: calc(100% - 380px) !important;
  290. padding-top: 0;
  291. }
  292. /* Profile header */
  293. [class="x78zum5 xdt5ytf x1iyjqo2 xg6iff7"],
  294. [class="x1iyjqo2 xdj266r xkrivgy xat24cr x1gryazu x1ykew4q x38y82z xc73u3c x18d9i69 x5ib6vp x19sv2k2 x1wfb79h x1oyxtw5 x1k4gc0v x15w28ab x10rn61k"] {
  295. padding-top: 0;
  296. }
  297. header[class="xrvj5dj x1ec4g5p xl463y0 xwy3nlu xdj266r xh8yej3"] > section:nth-of-type(5):empty,
  298. header[class="xrvj5dj x1ec4g5p xl463y0 xwy3nlu xdj266r xh8yej3"] > section:nth-of-type(6):empty,
  299. header[class="xrvj5dj x1ec4g5p xl463y0 xwy3nlu xdj266r xh8yej3"] > section:nth-of-type(7):empty {
  300. display: none !important;
  301. height: 0 !important;
  302. margin-bottom: 0 !important;
  303. margin-top: 0 !important;
  304. padding: 0 !important;
  305. }
  306. header[class="xrvj5dj x1ec4g5p xl463y0 xwy3nlu xdj266r xh8yej3"] > section:nth-of-type(2) {
  307. margin-bottom: 0;
  308. }
  309. header[class="xrvj5dj x1ec4g5p xl463y0 xwy3nlu xdj266r xh8yej3"] > section:nth-of-type(1),
  310. header[class="xrvj5dj x1ec4g5p xl463y0 xwy3nlu xdj266r xh8yej3"] > section:nth-of-type(3),
  311. header[class="xrvj5dj x1ec4g5p xl463y0 xwy3nlu xdj266r xh8yej3"] > section:nth-of-type(4) {
  312. margin-bottom: 0;
  313. margin-top: 0;
  314. }
  315. header[class="xrvj5dj x1ec4g5p xl463y0 xwy3nlu xdj266r xh8yej3"] > section:nth-of-type(6) {
  316. margin-bottom: 0;
  317. margin-top: 0;
  318. padding: 0 20px !important;
  319. }
  320. /* Article content */        .x9f619.xjbqb8w.x78zum5.x168nmei.x13lgxp2.x5pf9jr.xo71vjh.x1uhb9sk.x1plvlek.xryxfnj.x1c4vz4f.x2lah0s.xdt5ytf.xqjyukv.x6s0dn4.x1oa3qoh.x1nhvcw1 > div {
  321. min-width: 100% !important;
  322. }
  323. ._aap0 {
  324. width: 100% !important;
  325. }
  326. /* Smiley */
  327. .xu96u03.xm80bdy.x10l6tqk.x13vifvy > div.x1uvtmcs.x4k7w5x.x1h91t0o.x1beo9mf.xaigb6o.x12ejxvf.x3igimt.xarpa2k.xedcshv.x1lytzrv.x1t2pt76.x7ja8zs.x1n2onr6.x1qrby5j.x1jfb8zj > div > div > div > div > div  {
  328. background: #101010;
  329. }
  330. /* Article header home page */
  331. .x6s0dn4.x78zum5.x1q0g3np.x1nhvcw1.xh8yej3 > div {
  332. padding: 0 10px;
  333. }
  334. /* Comments home page */
  335. .x1lliihq.x1n2onr6 > .xvbhtw8.x78zum5.xdt5ytf.x5yr21d.x1n2onr6 > div {
  336. padding: 0px;
  337. }
  338. /* Sidebar */
  339. .x3hkoc4 {
  340. padding-left: 0px;
  341. position: fixed;
  342. right: 0px;
  343. width: 319px;
  344. }
  345. ._aap0 {
  346. width: calc(100% - 80px);
  347. }
  348. /* Messages */
  349. .x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x193iq5w.xeuugli.x1r8uery.x1iyjqo2.xs83m0k {
  350. padding-right: 10px;
  351. }
  352. span[style="line-height: var(--base-line-clamp-line-height);--base-line-clamp-line-height: 25px;"] {
  353. line-height: 40px !important;
  354. }
  355. }
  356. /* For instagram ad blocker browser plugin */
  357. #ad-shield {
  358. background: #101010 !important;
  359. color: #cbcbcb !important;
  360. left: 156px;
  361. }
  362. #ad-shield-main {
  363. background: #101010 !important;
  364. color: #cbcbcb !important;
  365. height: auto;
  366. left: 10px;
  367. max-height: 50%;
  368. overflow-y: auto;
  369. padding: 5px 10px;
  370. position: fixed;
  371. top: 70px;
  372. width: 300px;
  373. z-index: 9999;
  374. }
  375. #ad-hid-count,
  376. #ad-hide-username {
  377. background: #1e1e1e !important;
  378. color: #cbcbcb !important;
  379. }
  380. }