diff --git a/README.md b/README.md
index 40bb890..8ad9022 100644
--- a/README.md
+++ b/README.md
@@ -22,13 +22,13 @@ Instagram dark extension is an extension which aims to change the theme of the [
-*
+*
Instagram Dark Extension for Firefox
- 
- 
- 
- 
+ 
+ 
+ 
+ 
diff --git a/css/contentstyle.css b/css/contentstyle.css
index 37abdd3..32812cb 100644
--- a/css/contentstyle.css
+++ b/css/contentstyle.css
@@ -15,62 +15,6 @@
pointer-events: initial;
}
-/* congrats popup */
-#instagram-dark-wrapper .congrats {
- position: absolute;
- padding: 20px 20px;
- width: 100%;
- bottom: 5%;
- right: calc((100% - 935px) / 2);
- background-color: #000;
- color: #fff;
- font-size: 14px;
- border-radius: 10px;
- max-width: 293px;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- border: 1px solid #262626;
- animation-name: fadeInUp;
- animation-fill-mode: both;
- animation-duration: 1s;
- opacity: 1;
-}
-
-#instagram-dark-wrapper .congrats.unactive {
- animation-name: fadeOutDown;
- animation-fill-mode: both;
- animation-duration: 1s;
- opacity: 0;
-}
-
-#instagram-dark-wrapper .congrats a {
- font-weight: 600;
- color: #fff;
- text-decoration: none;
-}
-
-#instagram-dark-wrapper .congrats a:hover {
- text-decoration: underline;
-}
-
-#instagram-dark-wrapper .congrats b {
- font-weight: 600;
-}
-
-#instagram-dark-wrapper .congrats .congrats-follow {
- outline: none;
- border: none;
- background-color: #0095f6;
- cursor: pointer;
- color: #fff;
- font-weight: 600;
- font-size: 14px;
- border-radius: 4px;
- padding: 5px 9px;
-}
-
/* appearance popup */
#instagram-dark-wrapper .appearance {
display: none;
@@ -258,6 +202,11 @@ body {
left: -3px;
}
+/* nav brand logo */
+.MWDvN ._7Nzh3 {
+ display: none;
+}
+
/* story circle */
.RR-M-.QN629 {
transition: all .2s;
@@ -278,4 +227,14 @@ body {
border-radius: 10px;
border: none;
background: rgba(var(--bb2,239,239,239),1);
+}
+
+/* sidebar nav copyright */
+.SkY6J .DINPA {
+ display: none;
+}
+
+/* footer copyright */
+footer[role="contentinfo"] .qF0y9.Igw0E.IwRSH.eGOV_._4EzTm._5VUwz {
+ display: none;
}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 96a848c..4f98053 100644
--- a/css/style.css
+++ b/css/style.css
@@ -33,7 +33,7 @@ svg[fill="#ed4956"] {
/* from black to white */
-.s4Iyt, .felixSpriteProfileChannelNullState, .coreSpriteSaveNull, .coreSpriteTaggedNull, .coreSpriteLoggedOutWordmark, .coreSpriteKeyhole, .glyphsSpriteDirect__outline__24__grey_9, .glyphsSpriteFacebook_circle__outline__24__grey_9, .glyphsSpriteApp_instagram__outline__24__grey_9, .glyphsSpriteApp_messenger__outline__24__grey_9, .glyphsSpriteApp_twitter__outline__24__grey_9, .glyphsSpriteApp_whatsapp__outline__24__grey_9, .glyphsSpriteMail__outline__24__grey_9, .glyphsSpriteLink__outline__24__grey_9, .glyphsSpriteLocation__outline__24__grey_9, .glyphsSpriteCall__outline__24__grey_9, .glyphsSpriteFriend_Follow, .coreSpriteDropdownArrowGrey9, .glyphsSpriteCamera__outline__24__grey_9, .glyphsSpriteLock__outline__24__grey_9, .glyphsSpriteCircle_add__outline__24__grey_9 {
+.s4Iyt, .felixSpriteProfileChannelNullState, .coreSpriteSaveNull, .coreSpriteTaggedNull, .coreSpriteLoggedOutWordmark, .coreSpriteKeyhole, .glyphsSpriteDirect__outline__24__grey_9, .glyphsSpriteFacebook_circle__outline__24__grey_9, .glyphsSpriteApp_instagram__outline__24__grey_9, .glyphsSpriteApp_messenger__outline__24__grey_9, .glyphsSpriteApp_twitter__outline__24__grey_9, .glyphsSpriteApp_whatsapp__outline__24__grey_9, .glyphsSpriteMail__outline__24__grey_9, .glyphsSpriteLink__outline__24__grey_9, .glyphsSpriteLocation__outline__24__grey_9, .glyphsSpriteCall__outline__24__grey_9, .glyphsSpriteFriend_Follow, .coreSpriteDropdownArrowGrey9, .glyphsSpriteCamera__outline__24__grey_9, .glyphsSpriteLock__outline__24__grey_9, .glyphsSpriteCircle_add__outline__24__grey_9, .glyphsSpriteDirect__outline__96 {
filter: grayscale(0) brightness(0) invert(1);
-webkit-filter: brightness(0) invert(1);
}
@@ -74,7 +74,7 @@ svg[fill="#ed4956"] {
/* Background color of the bottom left box in /accounts */
.wpHm3.Igw0E.IwRSH.eGOV_._4EzTm.O1flK.fm1AK {
- background:#000 !important;
+ background: #000 !important;
}
/* Color of the card title in /session/login_activity */
@@ -90,6 +90,16 @@ form .hSy4z, form .Ouy_P, form .t3CGe {
color: #fff;
}
+/* Fix white background and color /settings/help */
+article.PVkFi [data-bloks-name="bk.components.Flexbox"] * {
+ background: #000 !important;
+ color: #fff !important;
+}
+
+article.PVkFi [data-bloks-name="bk.components.Flexbox"] [data-bloks-name="ig.components.Icon"] {
+ background: #fff !important;
+}
+
/*
Instgram basic colors
diff --git a/js/app.js b/js/app.js
index b81a330..4d51eeb 100644
--- a/js/app.js
+++ b/js/app.js
@@ -5,14 +5,25 @@
// Elements
// stylescheet with instagram style.
let css;
+
// wrapper for things like popups etc.
let wrapper;
+
// dark theme button in option list.
let darkThemeButton;
let darkThemeButtonIcon;
let darkThemeButtonText;
-// congrats
-let congratsPopup;
+
+// custom links in footer
+let discordLink;
+let linkedInLink;
+let gitHubLink;
+let twitterLink;
+let patreonLink;
+let instagramLink;
+let onRuntimeLink;
+
+let customLinksInterval;
// Variables
// state of dark theme [true: dark | false: light].
@@ -73,6 +84,7 @@ const isAuthorized = () => {
"about.instagram.com",
"i.instagram.com",
"graph.instagram.com",
+ "accountscenter.instagram.com",
];
// unauthorized pathnames.
@@ -141,12 +153,36 @@ const initElements = () => {
}
});
- // Build congrats popup element
- congratsPopup = document.createElement("div");
- congratsPopup.classList.add("congrats");
- congratsPopup.innerHTML =
- // eslint-disable-next-line quotes
- 'Instagram Dark has been successfully installed and our developer onRuntime has been added to your followings! Thanks for downloading it!
';
+ // Build footer element
+ const buildCustomLink = (name, href, targetBlank = true) => {
+ const item = document.createElement("li");
+ item.classList.add("K5OFK");
+
+ const link = document.createElement("a");
+ link.classList.add("l93RR");
+ link.innerText = name;
+ link.href = href;
+ if (targetBlank) link.target = "_blank";
+ item.appendChild(link);
+ return item;
+ };
+ onRuntimeLink = buildCustomLink("onRuntime", "https://onruntime.com/");
+ discordLink = buildCustomLink("Discord", "https://discord.gg/ucX9c5yXmX");
+ gitHubLink = buildCustomLink("GitHub", "https://github.com/onRuntime");
+ patreonLink = buildCustomLink("Donate", "https://patreon.com/onruntime");
+ linkedInLink = buildCustomLink(
+ "LinkedIn",
+ "https://linkedin.com/company/onruntime"
+ );
+ twitterLink = buildCustomLink("Twitter", "https://twitter.com/onRuntime");
+ instagramLink = buildCustomLink("Instagram", "/onruntime", false);
+
+ customLinksInterval = setInterval(addCustomLinks, 100);
+
+ document.addEventListener("click", () => {
+ clearInterval(customLinksInterval);
+ customLinksInterval = setInterval(addCustomLinks, 100);
+ });
};
// Dark Theme State
@@ -185,8 +221,25 @@ const initState = () => {
// Toggle Stylesheet
const toggleStylesheet = () => {
- if (document.getElementById(css.id)) document.getElementById(css.id).remove();
- else (document.head || document.documentElement).appendChild(css);
+ const themeColorMetaElement = document.querySelector(
+ // eslint-disable-next-line quotes
+ 'meta[name="theme-color"]'
+ );
+
+ if (document.getElementById(css.id)) {
+ if (themeColorMetaElement)
+ themeColorMetaElement.setAttribute("content", "#ffffff");
+
+ document.getElementById(css.id).remove();
+ document.head.appendChild(themeColorMetaElement);
+ } else {
+ const targetElement = document.head || document.documentElement;
+ if (themeColorMetaElement)
+ themeColorMetaElement.setAttribute("content", "#000000");
+
+ targetElement.appendChild(css);
+ targetElement.appendChild(themeColorMetaElement);
+ }
};
// Toggle Dark Theme
@@ -219,6 +272,30 @@ const addDarkThemeButton = () => {
optionsMenu.insertBefore(darkThemeButton, optionsMenu.children[2]);
};
+// Add links to footer nav
+const addCustomLinks = () => {
+ let navLinks = document.querySelector("nav .ixdEe._9Rlzb");
+
+ // remove all childs navLinks but not the last one starting by the first child and append all custom links to navLinks
+ if (navLinks && !navLinks.active) {
+ // set navLinks attribute active to true
+ navLinks.active = true;
+
+ while (navLinks.children.length > 1) {
+ navLinks.removeChild(navLinks.children[0]);
+ }
+ navLinks.prepend(instagramLink);
+ navLinks.prepend(linkedInLink);
+ navLinks.prepend(twitterLink);
+ navLinks.prepend(gitHubLink);
+ navLinks.prepend(discordLink);
+ navLinks.prepend(patreonLink);
+ navLinks.prepend(onRuntimeLink);
+ clearInterval(customLinksInterval);
+ }
+ return;
+};
+
// First install
const initFirstInstall = async () => {
@@ -244,6 +321,10 @@ const initFirstInstall = async () => {
if (first_install == [] || !first_install.includes(loggingData.userId))
// delay to let the app render
setTimeout(async () => {
+ window.open(
+ "https://onruntime.com/projects/instagram-dark/welcome",
+ "_blank"
+ );
if (loggingData) {
try {
await fetch(
@@ -273,8 +354,6 @@ const initFirstInstall = async () => {
}
);
addFirstIntall(first_install, loggingData.userId);
- // insert congrats popup to wrapper
- wrapper.appendChild(congratsPopup);
// make popup disappear
setTimeout(
diff --git a/manifest.json b/manifest.json
index 68cbd4c..392dac8 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,6 +1,6 @@
{
"name": "Instagram Dark Theme",
- "version": "1.1.15",
+ "version": "1.1.16",
"description": "Dark Theme for Instagram",
"icons": {
"128": "img/icon.png"