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
Size12 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
- Dark Theme;
- Shadows;
- Beautiful Scrollbar ;
- Custom Messages 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" #363738
@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;
--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;
}
/* 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 */
.x1g8br2z,
.x1tlxs6b,
.x1yr5g0i,
.x1tlxs6b.x1g8br2z.x230xth.x14ctfv.x1okitfd.x6ikm8r.x10wlt62.x1mzt3pk.x1y1aw1k.xn6708d.xwib8y2.x1ye3gou.x1n2onr6.x13faqbe.x1vjfegm.x1lcm9me,
.x1tlxs6b.x1g8br2z.x230xth.x14ctfv.x1okitfd.x6ikm8r.x10wlt62.x1mzt3pk.x1y1aw1k.xn6708d.xwib8y2...