☰

Instagram dark and responsive

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

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址