ParanoidGram by verticablets

Details
Authorverticablets
LicenseGPLv3
Created
Updated
CategoryInstagram
Description
A customizable dark theme with a few animations and effects for Instagram. Right click is enabled in posts and stories.
Notes
To use a background image:
Send the image you want to use as the background to a contact on Instagram or use the picture of an Instagram post. right click then open image in new tab and copy the link to that image. you can paste that link in the field "Background Image" in the customization menu. Make sure to add single/double quotes at the start and end of the link.
Source code
/* ==UserStyle==
@name ParanoidGram
@namespace Verticablets
@version 2.2.1
@description A customizable dark Instagram theme with a few animations and effects.
@author Verticablets (https://linktr.ee/verticablets)
@homepageURL https://github.com/Verticablets/ParanoidGram
@supportURL https://github.com/Verticablets/ParanoidGram/issues
@updateURL https://github.com/Verticablets/ParanoidGram/edit/main/ParanoidGram.user.css
@license GPLv3
@preprocessor stylus
@var color main 'main colour' #8080B3
@var color accent 'accent colour' #CCCCE0
@var color message 'your message bubble colour' #8080B3
@var color message2 'their message bubble colour' #2e2e42
@var color text 'text colour' #FFFFFF
@var color text2 'secondary text colour' #CCCCCC
@var color text3 'tertiary text colour' #cdd1fb
@var color bbg 'main background colour' #1f2131
@var color bg 'secondary background colour' #181926
@var color bgt 'transparent background colour' #181926bd
@var color mentions 'mentions colour' #7E7CF9
@var color tags 'tags colour' #BF5AF2
@var color hover 'main hover colour' #cfcfe6
@var color hover2 'secondary hover colour' #242539
@var text url "Background image" "'https:null'"
==/UserStyle== */
@-moz-document domain("instagram.com") {
/*
I encourage you to take whatever you need from here if you plan on making your own theme.
It's going to be messy since I'm very new at this.
//Verticablets
*/
/*--------------------------HOME-------------------------*/
/*bg*/
.R4HNP,
.SCxLW,
.oYYFH,
.L1C6I
{
/*--------------------------BACKGROUND URL-------------------------*/
background: url(url) no-repeat center center fixed;
/*--------------------------BACKGROUND URL-------------------------*/
background-color: var(--bbg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Header*/
._lz6s,
.Hz2lF
{
border-radius: 0 0 50px 50px !important;
border: 0;
background-color: rgba(24, 25, 38, .80) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
/*Header Icons*/
.s4Iyt
{
filter: invert(1);
transition: all 0.25s !important;
}
.s4Iyt:hover
{
transform: scale(1.2);
}
/*search*/
.x3qfX,
.LWmhU,
._0aCwM,
.eyXLr,
.wUAXj
{
background: #d2252500 !important;
border-radius: 30px 30px 30px 30px !important;
}
.x3qfX,
._0aCwM
{
border: 0px solid var(--main);
}
/*search idle*/
.pbgfb
{
background: #fff0;
border: 0;
border-radius: 30px 30px 30px 30px !important;
}
/*account popup menu*/
.uo5MA
{
background: #fff0!important;
}
/*emoji picker/noti popup*/
.f7Bj3{
background: var(--bgt) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 0px 0px 30px 30px !important;
}
.uo5MA._2ciX.WNrPq{
background: var(--bgt) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 30px 30px 0px 0px !important;
}
/*emoji picker bg and acc popup*/
._01UL2 {
background: var(--bgt) !important;
border-radius: 0px 0px 30px 30px !important;
}
.AvhYw,
.nLL4f
{
background: rgba(50, 50, 50, .20) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 0;
bottom: 0;
top: -6px;
}
.TOh1s
{
background: #e1000000;
color: #e1000000;
}
/*new Likes, followers etc*/
.nHGTw,
.q9xVd::after
{
background: var(--main);
}
.iMofo
{
border-radius: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100%;
}
.H9zXO::after
{
background: var(--main);
}
/*post blur or bg*/
.j9XKR
{
max-width: 70% !important;
right: 10px;
}
/*stories main*/
.VideM
{
border-radius: 30px 30px 30px 30px !important;
background: var(--bg);
border: 0;
width: 104% !important;
padding: 16px 10px;
}
.Fd_fQ {
height: 2px !important;
padding: 1px 4px;
top: 0px;
}
.eebAO.h_uhZ{
color: var(--accent) !important;
}
/*---------------------------------recommended for you------------------------- */
/*recommended panel*/
.YT6rB
{
left: 76vw !important;
border-radius: 20px 20px 20px 20px !important;
}
.gmFkV
{
color: var(--main) !important;
}
._8UZ6e
{
background: var(--bg) !important;
border-radius: 30px 30px 30px 30px !important;
}
/* also acc popup, suggested follow n post text bg*/
.HVWg4
{
background: transparent !important;
border-radius: 30px 30px 30px 30px !important;
}
.xrWdL
{
background: var(--bg) !important;
border-radius: 30px 30px 30px 30px !important;
}
.yWX7d
{
margin-right: 20px;
}
._8UZ6e
{
width: 100% !important;
}
.xrWdL
{
width: 90% !important;
}
/*---------------------------------posts------------------------- */
/*---------post profile hover menu----------*/
.ZwOlu
{
transition: all 0.25s !important;
}
.ZwOlu:hover
{
transform: scale(1.01);
}
/*play button*/
.FGFB7
{
filter: invert(100) drop-shadow(3px 3px 20px #fff);
opacity: 0.7;
}
._8Rm4L
{
border-radius: 30px 30px 30px 30px !important;
background: var(--bg);
border: 0;
}
/*pics */
.FFVAD
{
transition: all 0.25s !important;
}
.FFVAD:hover
{
transform: scale(1.05)
}
/*Video views popup */
.vJRqr{
background: var(--main) !important;
border: 0;
border-radius: 30px 30px 30px 30px !important;
}
.t3fjj{
border-color: var(--main) transparent transparent transparent;
}
._690y5{
background: var(--main) !important;
}
/*Tagged person bg*/
.JYWcJ,
.G_hoz{
background: var(--main) !important;
}
.Vj5NV {
border-color: transparent transparent var(--main) ;
border-width: 0 6px 6px;
top: -5px;
}
/*----------------------------DM------------------------------ */
/* input bar*/
.X3a-9
{
border: 2px solid var(--main) !important;
background: var(--bg);
}
/* your message*/
._8_yLp.RQUXn {
background: var(--message) !important;
}
.CMoMH
{
border: 0px solid var(--message) !important;
border-radius: 30px !important;
}
/* their message*/
.CMoMH._8_yLp {
background: var(--message2);
}
.TGYkm
{
border-bottom: 2px solid #2e2e2e;
}
/*bg*/
.S-mcP
{
background-color: var(--bg);
border-bottom: 2px solid #2f2f2f00;
}
.QOqBd
{
background-color: var(--main) !important;
}
.-qQT3:hover
{
background-color: var(--hover2) !important;
}
.oNO81
{
border-right: 2px solid #000;
}
.y3zKF:not(.yWX7d),
a.y3zKF:not(.yWX7d),
a.y3zKF:not(.yWX7d):visited
{
background-color: var(--main);
}
._7zBYT
{
border-bottom: 2px solid #ffffff4a;
}
.emXTk::before
{
border-bottom: 1px solid var(--main);
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}
a.k8Vux:visited
{
border-bottom: 1px solid var(--accent);
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}
.frMpI
{
background: var(--bg) !important;
}
.oNO81
{
background: var(--bg);
}
.DPiy6,
.N9abW
{
background: var(--bg);
}
.pV7Qt
{
border: 1px solid #ea0c0c00;
border-radius: 30px 30px 30px 30px !important;
background: var(--bg);
}
.JLbVX
{
color: var(--main);
}
/* switch accounts*/
._1XyCr
{
background: var(--bgt) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 30px !important;
}
/*--------------------------------PROFILE--------------------------------*/
/*suggestiosn for you*/
.GZkEI
{
background: var(--bg) !important;
border-radius: 30px;
border: 0 !important;
}
._41KYi
{
background: var(--main) !important;
border-radius: 30px;
border: 4px solid var(--main) !important;
transition: all 0.25s !important;
margin: 2px;
}
._41KYi:hover
{
transform: scale(1.02);
}
/*following bg*/
.-fzfL
{
background: var(--main) !important;
border-color: var(--main) !important;
color: var(--main);
}
.m4t9r.-fzfL {
opacity: 1 !important;
}
.mt3GC:only-child
{
border-radius: 30px;
}
/*3 dot menu*/
.aOOlW
{
border-top: 1px solid #d2d2d247;
}
.fx7hk
{
border-top: 2px solid var(--main);
}
.T-jvg
{
border-top: 2px solid var(--accent);
}
/*profile post hover*/
._32eiM,
._32eiM:visited
{
color: var(--mentions);
}
.mediatypesSpriteIgtv__filled__32,
.mediatypesSpriteVideo__filled__32
{
filter: invert(0) !important;
border-radius: 0px 30px 0px 30px;
}
/* V badge*/
.coreSpriteVerifiedBadgeSmall,
.coreSpriteVerifiedBadge
{
filter: hue-rotate(50deg) !important;
}
/*--------------------------------prof settings--------------------------------*/
._9MPbZ,
.sxIVS,
.PLphk,
.h-aRd,
.h-aRd:visited,
.h-aRd:hover,
.h-aRd:active
{
color: var(--text);
}
.h-aRd:visited,
.h-aRd:hover,
.h-aRd:active
{
background: var(--main);
}
._0PwGv
{
color: var(--text2);
}
.BvMHM
{
background: var(--bg);
}
.F0B8Y,
.p7vTm,
.JLJ-B
{
border: 2px solid var(--main);
border-radius: 3px;
}
.tlZCJ:checked ~ .mwD2G::before
{
color: var(--main);
}
/*--------------------------------post mixed--------------------------------*/
.JyscU ._97aPb.wKWK0
{
background-color: #000;
border-radius: 30px !important;
}
.JyscU.ePUX4 .UE9AK,
.JyscU.ePUX4 .eo2As,
.JyscU .Slqrh
{
border: 1px solid #db272700;
}
.sH9wk
{
border-top: 1px solid var(--main);
}
.s2MYR,
.ltEKP .QBXjJ
{
background: var(--bg) !important;
border-radius: 30px !important;
border: 1px solid #06060600;
}
._4l6NB
{
background: var(--main)!important;
border-radius: 50px;
}
.glyphsSpriteCircle_add__outline__24__grey_9
{
filter: invert(1);
}
/* menu (report, cancel)*/
.aOOlW
{
border-top: 1px solid var(--main);
}
/*--------------------------------MISC--------------------------------*/
/* footer*/
.pC2e0
{
/*--------------------------BACKGROUND URL-------------------------*/
background: url(url) no-repeat center center fixed;
/*--------------------------BACKGROUND URL-------------------------*/
background-color: var(--bbg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* msg counter*/
.TKi86
{
background: var(--main) !important;
}
/* chevrons and others*/
.glyphsSpriteDirect__outline__96,
.glyphsSpriteDownload_2FAC,
.coreSpritePagingChevron
{
filter: invert(1);
}
.glyphsSpriteForward__outline__24__grey_9,
.glyphsSpriteFriend_Follow,
._5fEvj
{
filter: invert(1);
}
/* Text 1*/
.vJRqr,
.KV-D4,
a._9VEo1,
.HoLwm,
body,
input,
textarea,
.TNiR1,
.m7ETg,
.zwlfE,
.TqC_a,
.XTCLo,
.eebAO,
._81NM2,
._4BSuu,
.M9sTE
{
color: var(--text) !important;
}
/* Text 2*/
.Fy4o8,
._9nyy2,
._0PwGv,
.c-Yi7,
.c-Yi7:visited,
.sXUSN,
a.r8ZrO
{
color: var(--text2) !important;
}
/* Text 3*/
.gtFbE,
.Ap253,
.vcOH2,
._0imsa,
._0imsa:visited,
.rhpdm,
.gmFkV,
.g47SY,
a.FPmhX.MBL3Z,
.yWX7d._8A5w5,
a.yWX7d._8A5w5,
a.yWX7d._8A5w5:visited
{
color: var(--main) !important;
}
/* Text idle (dm primary/general tab)*/
.k8Vux
{
color: var(--main) !important;
opacity: 1;
}
/* Text2/ visited*/
.fDxYl,
a.T-jvg:visited,
a.k8Vux.snXeX
{
color: var(--accent) !important;
}
/*Icons*/
span._2dbep.qNELH,
svg
{
fill: var(--main) !important;
transition: all 0.25s !important;
}
span._2dbep.qNELH:hover,
svg:hover
{
fill: var(--accent) !important;
transform: scale(1.2);
}
/*custom srollbar*/
::-webkit-scrollbar
{
width: 8px;
}
::-webkit-scrollbar-track
{
background: var(--bg);
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
background: var(--main);
}
/*hashtags, tags, etc*/
a,
a:visited
{
color: var(--tags);
}
/*move, message text and bg*/
.L3NKy,
a.L3NKy,
a.L3NKy:visited
{
background-color: var(--main);
border: 1px solid var(--main);
color: var(--text);
}
/*button hover*/
.y3zKF[disabled]:not(.yWX7d):not(.A086a), a.y3zKF[disabled]:not(.yWX7d):not(.A086a), a.y3zKF[disabled]:not(.yWX7d):not(.A086a):visited,
.jIbKX,
.L3NKy,
.-fzfL
{
transition: all 0.15s !important;
background: var(--main);
border: 0px;
}
.jIbKX:hover,
.L3NKy:hover,
.-fzfL:hover
{
background: var(--main);
transform: scale(1.1);
border: 0px;
}
.yUEEX
{
color: var(--main) !important;
font-weight: 600;
}
/*Mentions*/
.cqXBL,
.cqXBL:visited,
.notranslate
{
color: var(--mentions);
}
/*pop up acc names*/
.yrJyr,
.yrJyr:visited
{
color: var(--main);
}
.YFq-A
{
color: var(--text);
}
/*pop up acc separator*/
.PUHRj::after
{
border-bottom: 1px solid #ffffff2e;
}
/*Stories, pfpic, post pic and highlights hover*/
._bz0w,
.D1yaK,
.aoVrC,
.Ckrof,
.Fd_fQ,
.RR-M-
{
filter: contrast(100%);
transition: all 0.25s !important;
}
._bz0w:hover,
.D1yaK:hover,
.aoVrC:hover,
.Ckrof:hover,
.Fd_fQ:hover,
.RR-M-:hover
{
filter: contrast(110%) saturate(110%);
transform: scale(1.07)
}
.eLAPa
{
background-color: #000;
display: block;
width: 100%;
}
.qn-0x
{
background-color: #db020200 !important;
}
/*backdrop settings*/
.RnEpo
{
background-color: rgba(0, 0, 0, .19);
backdrop-filter: blur(3px) !important;
-webkit-backdrop-filter: blur(3px) !important;
}
/*loaders*/
.jdnLC,
.bCRRR,
.c0Dmy,
.HaS-3
{
background-color: var(--bg) !important;
}
/*account preview*/
.DPiy6
{
border-radius: 30px 30px 30px 30px !important;
border: 0px !important;
background-color: #18192626 !important;
}
.GdeD6
{
border-radius: 30px 30px 30px 30px !important;
border: 0px !important;
-webkit-box-shadow: 0 2px 16px 0 rgba(0,0,0,.2), 0 0 0 2px var(--main);
box-shadow: 0 2px 16px 0 rgba(0,0,0,.2), 0 0 0 2px var(--main);
background-color: var(--bgt) !important;
backdrop-filter: blur(3px) !important;
-webkit-backdrop-filter: blur(3px) !important;
}
.Dw_ki
{
border-bottom: 1px solid #0000;
}
._4Kbb_
{
background-color: var(--bg) !important;
border-radius: 30px;
border: 0px;
}
.Nd_Rl
{
border-top: 1px solid #DBDBDB00;
}
.VIsJD,
.rkEop
{
color: var(--text);
}
/* suggestions for you bg n request dms*/
.tHaIX
{
background: #00FF3C00;
}
/* suggestions for you text*/
span.notranslate._7cyhW,
a.FPmhX.notranslate.Qj3-a
{
color: #121235 !important;
}
/* followers/following menu fix*/
._6xe7A
{
background: #F210EE00 !important;
}
/* feed fix*/
._8Rm4L
{
width: 100% !important;
display: flex;
}
div.zGtbP.IPQK5.VideM
{
width: 20cm !important;
margin-left: -10% !important;
}
/*change account login*/
.gr27e {
border-radius: 30px 30px 30px 30px !important;
border: 0px !important;
background-color: var(--bg) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
._9GP1n,
input._2hvTZ.pexuQ.zyHYP{
border-radius: 30px 30px 30px 30px !important;
background-color: var(--bg)!important;
border:0;
}
.l9hKg{
color: var(--main) !important;
}
.izU2O{
color: var(--text3) !important;
}
/*login screen*/
.yOZjD {
background-image: url(https:null);
}
.RP4i1 {
visibility: hidden;
}
.rgFsT {
color: #d91212;
margin-top: 12px;
max-width: 350px;
right:200px;
}
.yWX7d, .yWX7d:visited, a.yWX7d, a.yWX7d:visited {
color: var(--main);
}
.x3qfX:placeholder-shown {
font-size: 24px;
fill: #b31515;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #fff0 !important;
}
/* Search results*/
.drKGC{
border-radius: 0 0 50px 50px !important;
border: 0;
background-color: rgba(0, 0, 0, .70) !important;
margin-top: 22px;
}
.VR6_Q {
background: #fff0 !important;
border: solid 1px #dbdbdb00;
}
.JvDyy {
background: var(--hover2);
}
.yCE8d {
border-bottom: solid 1px #0000;
}
.drKGC::after {
border-color: transparent transparent transparent transparent;
}
/*online status*/
.rSxHQ {
background: var(--accent);
border-color: var(--main);
border-radius: 50%;
}
/*new message*/
.Sapc9 {
background-color: var(--accent);
}
/*feed ver*/
.SkY6J:after {
content: var(--ver);
color: var(--main);
background: var(--bg);
border-radius: 30px;
border: solid 8px;
border-color: var(--bg);
margin: 50px;
text-align: center;
margin-top: 5px;
}
/*footer ver*/
body footer > div::after {
content: var(--ver);
color: var(--main);
text-align: center;
margin-top: 2rem;
}
/*Startup background*/
body[style *= 'background: white'] {
background-color: var(--bbg) !important;
}
/*Loading bar*/
.BHkOG {
height: 3px;
background: #8080B3 -webkit-gradient(linear,left top,right top,from(#8080B3),color-stop(#a480b3),color-stop(#b380a5),color-stop(#b3808c),to(#8091b3));
background: #8080B3 -webkit-linear-gradient(left,#8080B3,#a480b3,#b380a5,#b3808c,#8091b3);
background: #8080B3 linear-gradient(to right,#8080B3,#a480b3,#b380a5,#b3808c,#8091b3);
background-size: 500%;
-webkit-animation: 2s linear infinite LoadingBarProgress,.5s ease-out LoadingBarEnter;
animation: 2s linear infinite LoadingBarProgress,.5s ease-out LoadingBarEnter;
-webkit-transform-origin: left;
transform-origin: left;
width: 100%;
}
/*Line in profile menu logout*/
.W4P49 {
background-color: var(--main);
border: 0;
height: 1px;
margin: 0;
width: 100%;
}
/*Loading placeholders*/
.WidCF, .HaS-3 {
border-right: 1px solid var(--bbg);
background: var(--bbg) !important;
background-color: var(--bbg) !important;
}
.pOb2E{
border: 1px solid var(--bbg);
background: var(--bbg) !important;
background-color: var(--bbg) !important;
}
._3MPWk, ._8Rm4L, .zMhqu, .KQA-S, ._1MzIy {
border-radius: 30px !important;
border: 3px solid var(--bbg) !important;
background: var(--bbg) !important;
background-color: var(--bbg) !important;
}
.OzqB_,
.u9F97,
._8VIOK {
background-color: var(--main) !important;
}
._7JZQt {
background: var(--main) !important;
}
/*add a comment colour fix*/
textarea.Ypffh {
color: var(--accent) !important;
border: 3px solid #8080b342;
background: #8080b342 !important;
border-radius: 10px;
margin-right: 10px;
}
/*arrows*/
.glyphsSpriteDirect__outline__96, .glyphsSpriteDownload_2FAC, .coreSpritePagingChevron{
filter: invert(1) opacity(100%) drop-shadow(0px 0px 0px #00f);
}
.coreSpriteRightChevron,
.coreSpriteLeftChevron{
filter: invert(1%) opacity(100%) drop-shadow(0px 0px 0px #00f);
}
.glyphsSpriteChevron_circle_shadow_left,
.glyphsSpriteChevron_circle_shadow_right{
filter: invert(1%) opacity(50%) drop-shadow(0px 0px 0px #00f);
}
/*3 dot in story*/
.glyphsSpriteMore_horizontal__filled__24__grey_0 {
filter: invert(1%) opacity(100%) drop-shadow(0px 0px 0px #00f);
}
/*location in posts*/
a.O4GlU, a.O4GlU:visited {
color: var(--accent);
}
/*brand on profile*/
._8FvLi {
color: var(--tags);
}
/*about text and "followes, posts etc" on profile*/
span,
.-nal3, .-nal3:active, .-nal3:visited, .-nal3:hover {
color: var(--text3);
}
/*facebook account center on settings*/
.fm1AK {
background: var(--accent) !important;
}
div.eXle2 {
color: var(--text3) !important;
}
/*new posts*/
.tCibT {
color: var(--text3) !important;
background: var(--main) !important;
}
/*more text*/
div._7UhW9.PIoXz.qyrsm.KV-D4.uL8Hv {
color: var(--main) !important;
}
div._7UhW9.xLCgt.qyrsm._0PwGv.uL8Hv {
color: var(--main) !important;
}
.SkY6J .K5OFK, .SkY6J .l93RR {
color: var(--main) !important;
font-size: 11px;
font-weight: 500;
margin-left: 2px;
}
.SkY6J .DINPA {
color: var(--main) !important;
font-size: 11px;
font-weight: 500;
margin-left: 30px;
}
label {
color: var(--main) !important;
}
/*settings paget*/
.EzUlV, .PVkFi{
border-radius: 0px 30px 30px 0px!important;
border: var(--main) 0px solid;
}
.wW1cu{
border-right: 1px solid var(--main);
}
.BvMHM.EzUlV.XfvCs{
border-radius: 30px !important;
}
/*--------------------------------Rclick--------------------------------*/
/*posts*/
._9AhH0
{
display: none !important;
}
/*stories*/
div.Igw0E.rBNOH.YBx95._4EzTm.i0EQd.O1flK.D8xaz.TxciK.yiMZG
{
height: 0% !important;
}
:root
{
--main: main;
--accent: accent;
--message: message;
--message2: message2;
--text: text;
--text2: text2;
--text3: text3;
--bg: bg;
--bbg: bbg;
--bgt: bgt;
--mentions: mentions;
--tags: tags;
--hover: hover;
--hover2: hover2;
--url: url;
--ver: '✔ ParanoidGram 2.2.1';
}
}