Skip to content

Instagram Dark Theme (+Widescreen DM Fix) by daniel55555d

Screenshot of Instagram Dark Theme (+Widescreen DM Fix)
Write a review Install Get Stylus

Details

Authordaniel55555d

LicenseCC BY

CategoryInstagram

Created

Updated

Size22 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

outdated

Notes

VERSION 10.2 - 20 March 2023

  • Fixed widescreen messages

VERSION 10.1 - 17 December 2022
Instagram has released an official dark theme for Instagram. It however looks terrible and still doesn't address the wonkiness of the desktop site that my theme fixes.

  • Rounded corners for selected and highlighted accounts in Messages
  • Made body text of unavailable post more visible in Messages
  • Removed border from comment text box in Reels tab
  • Fixed colour of selected names in share sheet
  • Fixed search box in Search tab

VERSION 10.0 - 29 October 2022
Now supports Instagram's stupid Sidebar layout!

  • Removed border from sidebar
  • Made sidebar thinner
  • Made the sidebar hover text box dark
  • Removed borders from profile
  • Fixed Instagram logo when switching accounts
  • Fixed text boxes when logging in
  • Fixed text area on individual posts

VERSION 9.8 - 21 October 2022

  • Fixed comment box
  • Increased blur on titlebar
  • Removed border from view insights box

VERSION 9.7 - 17 October 2022

  • Fixed the colour for pop up boxes

VERSION 9.6 - 13 September 2022

  • Fixed pop up boxes
  • Inverted loading animation when posting images

VERSION 9.5 - 19 August 2022

  • Many things broke thanks to some class changes, thanks Instagram, now it's fixed
  • Added a slight shadow to the text in sent messages to make it easier to read
  • Fixed padding of primary and general buttons (probably a temporary problem)

VERSION 9.4 - 22 July 2022

  • Added support for account verification for when you get randomly locked out by Instagram (thanks Instagram)

VERSION 9.3 - 21 July 2022

  • Fixed broken Messages width fix
  • Fixed Instagram logo when changing accounts

VERSION 9.2.4 - 23 June 2022

  • Fixed Instagram logo

VERSION 9.2.3 - 10 June 2022

  • Fixed sliders when adjusting a post

VERSION 9.2.2 - 10 June 2022

  • Fixed individual posts which randomly became white

VERSION 9.2.1 - 9 June 2022

  • Fixed menu for adding hashtags to posts

VERSION 9.2 - 6 June 2022

  • Added support for post insights! Big thanks to Alipoodle for showing me how this is done and contributing some code
  • Fixed the text for your profile with no posts
  • Fixed colour of forgot password button when switching accounts
  • Fixed the colour of posts with music
  • Inverted the icons after a successful post (not perfect but better than before)

VERSION 9.1 - 5 June 2022
Hey guys, after re-writing the theme from scratch, there has been some stuff missing. In this update I have re-inplemented many features!

  • Added support for Add Birthday page
  • Added support for Sign In page
  • Added support for Account Directory
  • Fixed colour of hashtags and links
  • Fixed suggested accounts on profiles
  • Fixed arrows on suggested accounts on home page
  • Fixed no icon for no saves
  • Fixed "Liked by" profile icons on posts
  • Fixed language selector on footer
  • Fixed create new collection text box
  • Fixed remove follower button
  • Fixed not following hashtags icon
  • Fixed small resolution individual posts
  • Tweaked legacy header (for parts of the app that haven't updated to the new style yet
  • The caret now shows up when typing in your username and password
  • Darkened gradients on Stories
  • Removed border on account hover

VERSION 9.0.1 - 4 June 2022

  • Fixed new posts button

VERSION 9.0 - 2 June 2022

  • CODE OVERHAULED - Rewritten from scratch due to Instagram changing every variable of their website. There may be some things missing but I will work to patch them, enjoy! :)

VERSION 8.11.2 - 10 May 2022

  • Fixed New Posts button

VERSION 8.11.1 - 14 April 2022

  • Fixed text for paid sponsorship posts

VERSION 8.11 - 7 April 2022

  • Theme randomly broke, it is fixed now, the background is black again.
  • Footer has been fixed
  • The loading animation now has a black background
  • Updated cover image

VERSION 8.10.1 - 10 March 2022

  • Fixed white areas on the main app area (please stop breaking dammit)

VERSION 8.10 - 5 March 2022

  • More areas now have transparency
  • Removed white border from profile pictures of posts liked by multiple people
  • Fixed post likes list
  • Fixed followers list
  • Fixed colour of like and reply buttons on posts
  • Added padding to the top of profiles (no longer cut off on vertical resolutions)
  • Fixed icon for posts on user profile in vertical resolutions

VERSION 8.9 - 8 February 2022

  • Community Guideline Strikes have never looked better! Why you ask? Because now they are supported in this beautiful dark theme! (Thanks Instagram)

VERSION 8.8.1 - 23 January 2022

  • Fixed colour of "and" on images posted by multiple accounts
  • Improved blur effect in DMs

VERSION 8.8 - 12 January 2022

  • New Scrollbar
  • Finally removed border when hovering over account names

VERSION 8.7.2 - 6 January 2022

  • Fixed search bar which randomly turned white

VERSION 8.7.1 - 3 January 2022
Happy new year!

  • Fixed background of names when selecting multiple people to send an image to

VERSION 8.7 - 16 December 2021

  • Added a blur effect to the main header and DM header
  • Removed background from group icon in DM header
  • Fixed hover effect when moving mouse off of sent messages
  • Darkened gradients on the top and bottom of stories

VERSION 8.6 - 15 December 2021

  • Added support for embedded posts on other websites
  • Fixed hashtag icon when not following a hashtag
  • Fixed names of followed hashtags

VERSION 8.5 - 10 December 2021

  • Fixed all of the icons that have suddenly broke (my solution is absoultely genius, just trust me)
  • Fixed icons that weren't white before
  • Fixed search bar scaling (decent size, no longer covers Instagram logo)
  • Removed post scaling fix (Instagram finally did something about their crappy scaling issues)

VERSION 8.4 - 8 December 2021

  • Fixed profile bio text
  • Fixed gradient issues on "Suggestions For You"
  • Fixed dot next to name on posts
  • Fixed 3 dots on posts
  • Fixed tag button icon
  • Fixed send image icon in direct messages
  • Removed border from top of COVID-19 alert

VERSION 8.3 - 2 December 2021

  • Rounded the corners of background on messages in DMs
    This fixes the square that is visible behind sent images. This also makes emojis looks better as it has a background I cannot remove since it is tied to other parts of the website
    (Requested by Legitti)
  • Removed white backgrounds on individual posts and explore page when using the website in vertical resolutions
  • Overhauled the colours of all icons (no longer universally inverted, individually coloured now)
  • Added animation when hovering over saved posts
  • Removed white borders from saved posts

VERSION 8.2 - 18 November 2021
This theme is officially one year old now! How cool!

  • Fixed width and colour of search box
  • Fixed icons when posting images
  • Fixed text colour when adding location to a post
  • Removed dividers on final post page

VERSION 8.1 - 12 October 2021

  • Fixed white square on posts

VERSION 8.0 - 7 October 2021

  • Added support for desktop posting!
  • Fixed no posts message on profile
  • Fixed audio name under posts

VERSION 7.2 - 24 September 2021

  • Fixed broken header on posts
    (Still trying to figure out how to fix insights)

VERSION 7.1 - 21 July 2021

  • Fixed header

VERSION 7.0 - 13 July 2021

  • Added support for the new saving posts layout
  • Added support for insights (however it is somewhat incomplete as I do not know how to change it)
    === Fun fact: if you go to https://www.instagram.com/?theme=dark it will actually give you an official dark theme!

VERSION 6.0 - 7 May 2021

  • Changed colours to match mobile app
  • Rounded Search Bar in header
  • Fixed search box arrow
  • Fixed multiple posts icon on profile
  • Fixed gradient and border on Saved posts
  • Resized individual posts to be mostly comfortable to view while also being large
  • Fixed view all comments button

VERSION 5.0 - 16 March 2021

  • Removed borders from DM messages, now making them look exactly like mobile
  • Fixed hyperlinks being invisible in text bubbles
  • Fixed voice message colours
  • DM header is now darker
  • Details title is now white
  • Removed borders on DM details
  • Added support for guides
  • Fixed colours everywhere

VERSION 4.0.1 - 20 February 2021

  • Fixed colour of like count

VERSION 4.0 - 5 February 2021

  • Help page overhauled
  • About Us page overhauled
  • Location page overhauled
  • Top Accounts page overhauled
  • Background of the website is now fully black, matches appearance on mobile for OLED screens
  • Loading screen is now black
  • Hovering over posts on profile has an animation now
  • White divider removed when clicking profile
  • Fixed Facebook logo at the bottom of settings

VERSION 3.1.1 - 11 January 2021

  • Fixed the Audio text on the tops of reels posts

VERSION 3.1 - 9 January 2021

  • Fixed 'Suggestions For You' box
  • Tweaked the IGTV upload screen
  • Fixed Sign in text fields

VERSION 3.0 - 28 December 2020
Merry (Belated) Christmas!

  • Individual Posts now scale properly! (FINALLY)

VERSION 2.1 - 17 December 2020

  • DM Messages are a little bit shorter to make them scale on smaller resolutions easier

VERSION 2.0 - 17 December 2020

  • DM MESSAGES NOW SCALE TO YOUR SCREEN SIZE!!!
  • The toolbar now scales properly to the width of your screen size
  • Fixed random visual glitch where users in DM list would turn white when clicking and dragging
  • Added scrolling to images cut off by the widescreen support... so you can see them now I guess lol
  • Fixed icon for empty saved collections
  • Individual posts at small resolutions are no longer white
  • Play / Pause buttons are white in Stories
  • Instagram logo is white in stories
  • No audio icon is now dark grey
  • Updated Stylish icon
    I hate coding for this website, it's so badly designed

VERSION 1.4 - 12 November 2020

  • DMs change colour when hovered over, acts as a semi fix to links blending into the chat bubble colours
  • Mute icon on videos is now white (and red when muted)
  • Renaming groups is visible now
  • Page for deleted accounts appears correctly now
  • Dropdown icon for the follow button is white
  • Recoloured IGTV Upload page
  • Icons on share menu are now white

VERSION 1.3 - 6 November 2020

  • DMs now fill the full screen on larger resolutions (instead of constrained in a box)
  • Fixed weird fake scrollbars in DMs (it looks so clean now!)
  • Reels icon is now white on posts
  • Left icon is now white in stories
  • Switch accounts check mark is blue again

VERSION 1.2 - 3 November 2020

  • THE LIKE BUTTON IS RED AGAIN!
  • Widened the icons on the toolbar
  • Widened search on toolbar and darkened the results
  • Fixed suggested accounts colours
  • Fixed random black bars on home screen
  • Fixed icons in sign in history
  • Fixed election notice thing
  • Fixed icon for accounts with no posts
  • Fixed black bar behind dots on multiple photos
  • Changed background of the website to black so it doesn't flash white while loading
  • Removed white box behind 3 dots menu on comments on posts
  • Livestreaming now looks better

VERSION 1.1 - 2 November 2020

  • Profile pages are now widescreen
  • Individual posts are widescreen
  • Right click to save images and videos
  • Follower lists are long, as they should be
  • Messages in DMs are now longer (bit buggy, will be fixed soon, I hate Insta's code so much)
  • Sent posts are now grey like the mobile app
  • Fixed white bar under multiple posts
  • Post location is now visible

VERSION 1.0 - 1 November 2020

  • Release!

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         Instagram Dark Theme (+Widescreen DM Fix)
@version      20230320.00.32
@namespace    userstyles.world/user/daniel55555d
@description  This theme is designed to make the desktop version of Instagram look and feel like Instagram's Dark Theme on mobile, while also providing a widescreen fix for Direct Messages and other parts of Instagram's UI. Compatible with www.instagram.com and the Instagram "app" from the Microsoft Store.

Discord server for updates: https://discord.gg/DGbE9ESm

Want the widescreen direct messages but without the dark theme? Here is the light mode version of this theme: https://userstyles.org/styles/235938/instagram-widescreen-dm-fix

If you would like to check out my channel, it can be found here: https://www.youtube.com/daniel55555d

Also, if you do not like the white titlebar on the Instagram Desktop app, consider using this Tampermonkey script to turn it black: https://github.com/daniel55555d/Instagram-Dark-Title-Bar/blob/main/code
@author       daniel55555d
@license      CC BY
==/UserStyle== */

@-moz-document domain("instagram.com") {
/* Instagram Dark Theme v10.2*/
/* Created by frokfrdk (formerly Lexan)*/

/* Dark Scrollbar*/
::-webkit-scrollbar,
 ::-webkit-scrollbar-corner,
 ::-webkit-scrollbar,
::-webkit-scrollbar-corner {
    background: var(--bg-color) !important;
    width: 8px
  }
::-webkit-scrollbar-button,
 ::-webkit-scrollbar-button {
    display: none !important;
  }
::-webkit-scrollbar-thumb,
 ::-webkit-scrollbar-thumb {
    background: #999 !important;
    width: 8px !important;
    border-radius: 10px;
     transition: .1s !important;
  }
::-webkit-scrollbar-thumb:not(:active):hover,
 ::-webkit-scrollbar-thumb:not(:active):hover {
    background: #777 !important;
     transition: .1s !important;
  }
::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:hover:active,
 ::-webkit-scrollbar-thumb:active,
 ::-webkit-scrollbar-thumb:hover:active {
    background: #5c5c5c !important;
     transition: .1s !important;
  }

/*Variables*/
    :root {
        --bg: #000;
        --bg2: #141414;
	    --bg3: #222;
        --item: #333;
        --item-hover: #666;
        --item-active: #777;
        --text: #fff;
        --text-dark: #ddd;
        --text-dark2: #aaa;
        --none: #00000000;
        --accent: #0084ff;
        --multi-select: #1e4166;
        --ig-primary-background: 0,0,0;
        --ig-secondary-background: 0, 0, 0;
        --ig-highlight-background: 34,34,34;
        --ig-elevated-separator: 0,0,0,0;
        --ig-seperator: 0,0,0,0 !important;
        --post-separator: 0,0,0,0;
        --ig-primary-text: 255,255,255;
        --ig-secondary-button: 255,255,255;
        --ig-link: 255,255,255;
        --direct-message-max-width: 55vw;
        --ig-elevated-background: 35,35,35;
        --grey-9: 255,255,255;
        --nav-wide-width: 220px;
        --ig-banner-baclground: #141414;
        --input-border-radius: 20px !important;
    }

/*Main*/
body {
    background: var(--bg) !important;
}

input {
    background: var(--bg3) !important;
}

textarea {
    background: var(--none) !important;
}

/*Header*/
    .sp_jY02qVAhKr8.sx_98e64d,.sp_j88osDFh7lo.sx_385bf7,.sp_TNg2CZYaF1T.sx_7d646c,.sp_wTGAZ71KLpI.sx_67386d /*Instagram logo*/{
        filter: invert(1);
    }

    ._acun /*icon width*/{
        max-width: 90vw;
    }

._aawf /*search bar width*/{
    width: 35vw;
}

    ._lz6s,.Hz2lF,._acum /*Header*/{
	    backdrop-filter: blur(25px) !important;
        background-color: #000000cc !important;
        border-bottom: none !important;
    }

    ._ab6- /*UNIVERSAL ICON FIX PT2*/{
        color: #fff;
        fill: #fff;
    }

    polygon,circle,line,polyline,rect /*THE UNIVERSAL ICON FIX!!*/{
        stroke: #fff !important;
    }

._aa1g /*log out divider*/{
    background-color: var(--none);
}

/*Home*/
    ._ab6- [d="M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z"] /*Heart icon colour*/{
    fill: #ed4956 !important;
    }

._aahn, ._aaho{
    filter: invert(1)
}

textarea{
    background-color: var(--bg)
}

/*Sidebar*/
.xvb8j5{
    border-right: none;
}

._ad7x,._ad8j,._aa61{
    background: var(--bg3);
    border-bottom-style: none;
}

._aba8{
    border-bottom: none;
}

._aawf{
    width: 90%;
}

._aauy{
    border-radius: 20px;
}

/*Individual Post*/
    ._aatg ._aasi,._aasx,._ab0-._ab10 ._aepp,._ab0- ._aaz3 /*header*/{
        background-color: var(--bg);
        border: none;
    }

    ._aatg._aati ._aasi,._ab0-._ab10 ._aaz4 /*header border*/{
        border-left: none;
    }

    ._aatg._aati ._aasx{
        border-left: none;
    }

   ._aad7/*description*/{
        color: var(--text-dark2);
    }

._ae1h, ._ae2q /*background fix when looking at comments*/{
    background-color: var(--bg)
}

._ae3w{
    border-left: none;
}

._ae47,._ae3y{
    border-top: none;
}

a /*hashtags and links*/{
    color: var(--text)
}

    ._aatg ._aasi{
        border-bottom: none;
    }

    ._aatg ._aat0,._aatg._aati ._aaso,._aaoe,._ab0- ._aaz9{
        border-top: none;
    }
    .oajrlxb2.g5ia77u1.qu0x051f.esr5mh6w.e9989ue4.r7d6kgcz.rq0escxv.nhd2j8a9.nc684nl6.p7hjln8o.kvgmc6g5.cxmmr5t8.oygrvhab.hcukyx3x.jb3vyjys.rz4wbd8a.qt6c0cv9.a8nywdso.i1ao9s8h.esuyzwwr.f1sip0of.lzcic4wl._acan._acao._acat._acaw._a6hd, ._ac6f,._aacl._aaco._aacw._aad6._aade/*header text*/{
        color: var(--text);
    }

._ablz /*text area*/{
    color: var(--text-dark2);
}

._a9--:hover/*menu*/{
    background-color: var(--bg3);
    transition: .1s;
}

._a9_1 /*menu text*/{
    color: var(--text-dark)
}

._ab0q /*liked by profile icons*/{
    border-color: var(--bg)
}

._aasi,._aatk/*small resolution fix*/{
    background-color: var(--bg)
}

._aaqn,._aaqn:visited /*music in post*/{
    color: var(--text-dark);
}


/*Post Insights - With contributions from Alipoodle*/
div.rq0escxv.l9j0dhe7.du4w35lb > div > div.iqfcb0g7.tojvnm2t.a6sixzi8.k5wvi7nf.q3lfd5jv.pk4s997a.bipmatt0.cebpdrjk.qowsmv63.owwhemhu.dp1hu0rb.dhp61c6y.l9j0dhe7.iyyx5f41.a8s20v7p > div > div > div > div > div > div > div > div._ab8w._ab94._ab99._ab9f._ab9m._ab9o._ab9w > div > div > div:nth-child(2) > div > div > div:nth-child(2) > div > div /* Insight notice regarding regions */{
    background: var(--bg2) !important;
}

div.rq0escxv.l9j0dhe7.du4w35lb > div > div.iqfcb0g7.tojvnm2t.a6sixzi8.k5wvi7nf.q3lfd5jv.pk4s997a.bipmatt0.cebpdrjk.qowsmv63.owwhemhu.dp1hu0rb.dhp61c6y.l9j0dhe7.iyyx5f41.a8s20v7p > div > div > div > div > div > div > div > div._ab8w._ab94._ab99._ab9f._ab9m._ab9o._ab9w > div > div > div:nth-child(2) > div > div > div:nth-child(2) > div > div span /* Insight notice regarding regions - Text */{
    color: var(--text) !important;
}

div.rq0escxv.l9j0dhe7.du4w35lb > div > div.iqfcb0g7.tojvnm2t.a6sixzi8.k5wvi7nf.q3lfd5jv.pk4s997a.bipmatt0.cebpdrjk.qowsmv63.owwhemhu.dp1hu0rb.dhp61c6y.l9j0dhe7.iyyx5f41.a8s20v7p > div > div > div > div > div > div > div > div._ab8w._ab94._ab99._ab9f._ab9m._ab9o._ab9w > div > div > div:nth-child(2) > div > div > div:nth-child(2) > div > div > div:nth-child(2) /*remove border*/{
    background: var(--bg2) !important;
}

div.rq0escxv.l9j0dhe7.du4w35lb > div > div.iqfcb0g7.tojvnm2t.a6sixzi8.k5wvi7nf.q3lfd5jv.pk4s997a.bipmatt0.cebpdrjk.qowsmv63.owwhemhu.dp1hu0rb.dhp61c6y.l9j0dhe7.iyyx5f41.a8s20v7p > div > div > div > div > div > div > div > div._ab8w._ab94._ab99._ab9f._ab9m._ab9o._ab9w > div > div > div:nth-child(2) > div > div > div:nth-child(2) > div > div span[style*="cursor: pointer;"] /* Learn More link */ {
    color: var(--accent) !important;
}

div.rq0escxv.l9j0dhe7.du4w35lb > div > div.iqfcb0g7.tojvnm2t.a6sixzi8.k5wvi7nf.q3lfd5jv.pk4s997a.bipmatt0.cebpdrjk.qowsmv63.owwhemhu.dp1hu0rb.dhp61c6y.l9j0dhe7.iyyx5f41.a8s20v7p > div > div > div > div > div > div > div > div._ab8w._ab94._ab99._ab9f._ab9m._ab9o._ab9w [data-bloks-name="ig.components.Icon"] /* Insight Icons */ {
    background-color: var(--text-dark) !important;
}

div.rq0escxv.l9j0dhe7.du4w35lb > div > div.iqfcb0g7.tojvnm2t.a6sixzi8.k5wvi7nf.q3lfd5jv.pk4s997a.bipmatt0.cebpdrjk.qowsmv63.owwhemhu.dp1hu0rb.dhp61c6y.l9j0dhe7.iyyx5f41.a8s20v7p > div > div > div > div > div > div > div > div._ab8w._ab94._ab99._ab9f._ab9m._ab9o._ab9w [data-bloks-name="bk.components.Text"] /* Insight Text */ {
    color: var(--text) !important;
}

div.rq0escxv.l9j0dhe7.du4w35lb > div > div.iqfcb0g7.tojvnm2t.a6sixzi8.k5wvi7nf.q3lfd5jv.pk4s997a.bipmatt0.cebpdrjk.qowsmv63.owwhemhu.dp1hu0rb.dhp61c6y.l9j0dhe7.iyyx5f41.a8s20v7p > div > div > div > div > div > div > div > div._ab8w._ab94._ab99._ab9f._ab9m._ab9o._ab9w > div > div > div:nth-child(2) > div > div > div:nth-child(4) > div /*remove border*/{
    background: var(--bg2) !important;
}

div.rq0escxv.l9j0dhe7.du4w35lb > div > div.iqfcb0g7.tojvnm2t.a6sixzi8.k5wvi7nf.q3lfd5jv.pk4s997a.bipmatt0.cebpdrjk.qowsmv63.owwhemhu.dp1hu0rb.dhp61c6y.l9j0dhe7.iyyx5f41.a8s20v7p > div > div > div > div > div > div > div > div._ab8w._ab94._ab99._ab9f._ab9m._ab9o._ab9w > div > div > div:nth-child(2) > div > div > div:nth-child(6) > div /*remove border*/{
    background: var(--bg2) !important;
}

div.rq0escxv.l9j0dhe7.du4w35lb > div > div.iqfcb0g7.tojvnm2t.a6sixzi8.k5wvi7nf.q3lfd5jv.pk4s997a.bipmatt0.cebpdrjk.qowsmv63.owwhemhu.dp1hu0rb.dhp61c6y.l9j0dhe7.iyyx5f41.a8s20v7p > div > div > div > div > div > div > div > div._ab8w._ab94._ab99._ab9f._ab9m._ab9o._ab9w [data-bloks-name="bk.components.Text"][style*="color: rgb(142, 142, 142);"] /*text hierarchy*/{
    color: var(--text-dark2) !important;
}

/*Reels*/...

Reviews

No reviews yet.