Instagram Dark Theme (+Widescreen DM Fix) by daniel55555d

Screenshot of Instagram Dark Theme (+Widescreen DM Fix)

Details

Authordaniel55555d

LicenseCC BY

CategoryInstagram

Created2 years, 6 months ago

Updated2 weeks, 3 days ago

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.