I created an amazing Dark theme for Instagram web with many more features. Sharing it now for everyone to enjoy. Your support fuels future themes.
Thanks! 😊
Instgram Dark Theme v2.0 by siam395
Details
Authorsiam395
LicenseSalman Farsi
Categoryinstagram
Created
Updated
Size11 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Works Best If You Enable Basic Darkmode From Settings
- Dark Theme;
- New Scrollbar ;
- Custom Message Background With Color Picker;
( Also Adding Many Advanced Options Soon But If You Want To Get a Fully Customized Inbox Check This Out https://userstyles.world/style/11249/custom-inbox-for-instagram . Thanks! )
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 v2.0
@version 2.0
@namespace userstyles.world/user/siam395
@description I Made this Dark theme for Instagram web version for myself with bunch of other features because Instagram app has dark theme but the Instagram web version doesn’t and I thought I should publish this so that many people can enjoy this theme.
If you liked my theme then please give me a little review which will help me to create more awesome themes in the future.
Thank you for reading 😊
@author Salman Farsi
@license Salman Farsi
@preprocessor stylus
@var select theme "Chat Background" {
"System default" : "system",
"Custom (Single Color)" : "custom",
"Custom (Gradient Color)" : "custom-2",
}
@var color _chat "Message Color" #3797f0
@var color _chat-2 "Gradient msg Color-1" #363738
@var color _chat-3 "Gradient msg Color-2" #363738
@var text deg_ "Gradient degree" 60
==/UserStyle== */
@-moz-document url-prefix("https://www.instagram.com/") {
html,
body,
div,
nav,
article,
section {
color: #ddd !important;
--hscc-collapse-transition-duration: .3s;
--post-separator: 15, 15, 15;
--ig-badge: 220, 220, 220;
--ig-badge-back: 56, 54, 55;
--ig-close-friends-refreshed: 28, 209, 79;
--ig-elevated-background: 15, 15, 15;
--ig-elevated-separator: 45, 45, 45;
--ig-error-or-destructive: 237, 73, 86;
--ig-facebook-blue: 53, 121, 234;
--ig-focus-stroke: 168, 168, 168;
--ig-full-screen-background: 54, 54, 54;
--ig-highlight-background: 58, 59, 60;
--ig-link: 0, 110, 214;
--ig-live-badge: 255, 1, 105;
--ig-banner-background: 36, 37, 38;
--ig-primary-background: 36, 37, 38;
--ig-primary-button: 0, 149, 246;
--ig-primary-text: 200, 200, 200;
--ig-secondary-background: 24, 25, 26;
--ig-secondary-button: 200, 200, 200;
--ig-secondary-button-background: 36, 37, 38;
--ig-secondary-button-hover: 40, 39, 38;
--ig-secondary-text: 180, 180, 180;
--ig-separator: 44, 45, 46;
--ig-stroke: 219, 219, 219;
--ig-subscribers-only: 118, 56, 250;
--ig-success: 88, 195, 34;
--ig-temporary-highlight: 245, 251, 255;
--ig-tertiary-text: 199, 199, 199;
--ig-text-on-color: 255, 255, 255;
--ig-bubble-background: 54, 54, 54;
--modal-backdrop-dark: rgba(0, 0, 0, .85);
--modal-backdrop-default: rgba(0, 0, 0, .65);
--modal-border-radius: 12px;
--modal-padding: 16px;
--modal-z-index: 100;
--orange-5: #fd8d32;
--photo: 600px;
--pink-5: #d10869;
--post-step-indicator: 168, 168, 168;
--purple-5: #a307ba;
--red-4: #ff6874;
--red-5: #ed4956;
--red-6: #c62330;
--red-7: #a70311;
--tos-box-shadow: 0, 0, 0;
--web-always-black: 200, 200, 200;
--web-always-white: 255, 255, 255;
--web-overlay-on-media: 38, 38, 38;
--web-secondary-action: 224, 241, 255;
--yellow-5: #fdcb5c;
--text-primary: 221, 221, 221;
--text-secondary: #B0B3B8;
--text: #fff;
--direct-message-max-width: 55vw;
--nav-wide-width: 220px;
/* Username links */
--fe0: 0, 155, 255 !important;
/* Follow Button */
--d69: 0, 149, 246 !important;
--b86: 88, 195, 34 !important;
--i30: 237, 73, 86 !important;
--c37: 237, 73, 86 !important;
--f24: 0, 149, 246 !important;
--fa7: 224, 241, 50 !important;
--jbb: 53, 121, 234 !important;
--eac: 237, 73, 86 !important;
--e62: 245, 251, 50 !important;
--b2f: 168, 60, 221 !important;
/* Message interaction DMs */
--jb7: 50, 50, 50 !important;
--jd9: 255, 255, 255 !important;
--cdd: 217, 217, 217 !important;
/* Text and Usernames */
--i1d: 255, 255, 255 !important;
--d20: 190, 190, 190 !important;
--eca: 30, 30, 30 !important;
/* Username and Like count */
--f75: 190, 190, 190 !important;
--j64: 201, 201, 201 !important;
/* Link Color and Time Labels */
--f52: 113, 113, 113 !important;
--ie3: 113, 113, 113 !important;
--ba8: 87, 87, 87 !important;
--c8c: 87, 87, 87 !important;
--e22: 46, 46, 46 !important;
--edc: 46, 46, 46 !important;
/* Borders */
--b38: 100, 100, 100 !important;
--b6a: 100, 100, 100 !important;
--ca6: 100, 100, 100 !important;
/* Spacerbar */
--ce3: 100, 100, 100 !important;
--bb2: 21, 21, 21 !important;
--a97: 7, 7, 7 !important;
/* Main Background */
--b3f: 25, 25, 25 !important;
--d62: 25, 25, 25 !important;
--a72: 25, 25, 25 !important;
--h1d: 25, 25, 25 !important;
--de5: 25, 25, 25 !important;
/* Header Backgrounds */
--d87: 25, 25, 25 !important;
--f23: 25, 25, 25 !important;
/* Message interaction */
--jb7: 50, 50, 50 !important;
--jd9: 255, 255, 255 !important;
--cdd: 217, 217, 217 !important;
}
/* Buttons */
.Fifk5 a[href="/"] [fill="#262626"],
[fill="#262626"],
.XrOey path {
fill: var(--text-secondary)
}
[fill="#262626"] {
color: var(--text-secondary)
}
/* logo */
.sp_jY02qVAhKr8.sx_98e64d,
.sp_j88osDFh7lo.sx_385bf7,
.sx_7d646c {
filter: invert(1);
}
.s4Iyt,
.glyphsSpriteBirthday_cake/*Instagram logo Sign*/
{
filter: invert(1)
}
._a3gq ._aad3 {
filter: invert(1);
}
/*badge*/
._abw9 {
background: var(--ig-badge-back);
}
._ac0x {
filter: invert(1);
}
/*general messages*/
._a3gq ._aa5a {
filter: invert(1);
}
/*log out divider*/
._a3gq ._aa1g {
background-color: var(--none);
}
/*messages max width*/
._ab8j._ab8l._ab8w._ab94._ab99._ab9h._ab9k._ab9o._ab9s._abcm {
max-width: 999999999px !important;
border: none;
}
/*translucent fix*/
._a3gq ._ab5x {
padding-top: 0
}
/*Profile*/
/*Fix Border*/
._a3gq ._aa-g {
border-top: none;
}
textarea {
background-color: var(--ig-secondary-text);
}
/*slide*/
/*.xvbhtw8 {
background-color: var(--ig-primary-background);
} */
._aav7,
._aav8,
._aav9,
._aava/*border removal*/
{
border-top: none;
border-right: none;
border-left: none;
border-bottom: none;
}
._ab5x/*translucent fix*/
{
padding-top: 0
}
/* Dark Scrollbar*/
::-webkit-scrollbar,
::-webkit-scrollbar-corner,
::-webkit-scrollbar,
::-webkit-scrollbar-corner {
background: #1c1e21 !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;
}
/* Special Effects */
.xnwf7zb {
background-color: red;
}
.x1lliihq.x1n2onr6[aria-label="Like"] {
fill: red !important;
}
.x1lliihq.x1n2onr6[aria-label="Choose an emoji"],
.x1lliihq.x1n2onr6[aria-label="Emoji"] {
fill: #fff500 !important;
filter: drop-shadow(0 0 5px #fef500d0)!important;
}
.x1lliihq.x1n2onr6[aria-label="Toggle selection"] {
fill: #0095f6 !important;
filter: drop-shadow(0 0 5px #0095f6d0)!important;
}
.x1lliihq.x1n2onr6[aria-label="Verified"] {
fill: #0095f6 !important;
filter: drop-shadow(0 0 0px #fff0)!important;
}
.x1lliihq.x1n2onr6[aria-label="Muted"] {
fill: #fff500 !important;
}
.x1lliihq.x1n2onr6[aria-label="Save"],
.x1lliihq.x1n2onr6[aria-label="Remove"] {
color: #0f0 !important;
fill: #0f0 !important;
filter: drop-shadow(0 0 5px #00ff00d0)!important;
}
.x1lliihq.x1n2onr6[aria-label="Unlike"],
.x1lliihq.x1n2onr6[aria-label="Notifications"],
.x1lliihq.x1n2onr6[aria-label="Liked"] {
fill: #e42c3a !important;
filter: drop-shadow(0 0 5px #fe0000d0)!important;
}
svg.x1lliihq.x1n2onr6,
svg._ab6-,
path.x19hqcy {
fill: #fff !important;
color: #fff !important;
filter: drop-shadow(0 0 5px #ffffffd0)!important;
}
/* .xqui205 {
background-color: rgb(54, 54, 54) !important;
} */
.xnz67gz {
background-color: rgb(54, 54, 54) !important;
}
/* Other Styles */
.xyzq4qe {
background-color: #000!important;
}
.xk5f4mz {
background-color: #0095f6 !important;
}
.x1i10hfl.xjqpnuy.xa49m3k.xqeqjp1.x2hbi6w.xdl72j9.x2lah0s.xe8uvvx.xdj266r.x11i5rnm.xat24cr.x1mh8g0r.x2lwn1j.xeuugli.x1hl2dhg.xggy1nq.x1ja2u2z.x1t137rt.x1q0g3np.x1lku1pv.x1a2a7pz.x6s0dn4.xjyslct.x1ejq31n.xd10rxx.x1sy0etr.x17r0tee.x9f619.x1ypdohk.x1i0vuye.x1f6kntn.xwhw2v2.xl56j7k.x17ydfre.x2b8uid.xlyipyv.x87ps6o.x14atkfc.xcdnw81.xjbqb8w.xm3z3ea.x1x8b98j.x131883w.x16mih1h.x972fbf.xcfux6l.x1qhh985.xm0m39n.xt0psk2.xt7dq6l.xexx8yu.x4uap5.x18d9i69.xkhd6sd.x1n2onr6.x1n5bzlp.x173jzuc.x1yc6y37,
._aacl._aacn._aacw._aad6,
span.x1lliihq.x1plvlek.xryxfnj.x1n2onr6.x193iq5w.xeuugli.x1fj9vlw.x13faqbe.x1vvkbs.x1s928wv.xhkezso.x1gmr53x.x1cpjm7i.x1fgarty.x1943h6x.x1i0vuye.x1fhwpqd.x1s688f.x5n08af.x1s3etm8.x676frb.x10wh9bi.x1wdrske.x8viiok.x18hxmgj {
color: #0095f6 !important;
}
button._acat,
.x1gjpkn9:hover {
background-color: #4a4b4c!important;
}
div#splash-screen {
background: rgb(36, 37, 38) !important;
}
i {
background-position: 0px 0px !important;
}
.xseo6mj {
position: fixed !important;
width: -webkit-fill-available !important;
max-width: 25% !important;
right: 2% !important;
}
/*
*Under Test*
div[role="button"] > canvas {
color: #ffffff50 !important;
}
*/
}
@-moz-document url-prefix("https://www.instagram.com/direct/t") {
if theme=="system" {
/* Theme: System Default */
.xpmdkuv {
background-color: _chat;
}
}
else if theme=="custom" {
/* Theme: Custom (Sing...