Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add Vencord styles to popout windows #3080

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from

Conversation

Masterjoona
Copy link
Contributor

@Masterjoona Masterjoona commented Dec 14, 2024

Previously vencord styles and quick css was only getting added to the main window and not popout windows, this fixes it

example
before

after

Copy link
Contributor

@Sqaaakoi Sqaaakoi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm glad this finally exists. It's a long overdue feature.

For anyone else trying to make sense of this: each StyleManager operates autonomously and does not get centrally managed as they directly hook into SettingsStore

Comment on lines 138 to 163
const interval = setInterval(() => {
if (popoutWindow.document.readyState === "complete") {
clearInterval(interval);

const doc = popoutWindow.document;
const popoutWindowManager = new StyleManager(doc);

const style = doc.createElement("style");
style.id = "vencord-css-core";
style.textContent = document.getElementById("vencord-css-core")!.textContent;
doc.documentElement.appendChild(style);

popoutWindowManager.init();

toggle(Settings.useQuickCss);
SettingsStore.addChangeListener("useQuickCss", toggle);
popoutWindow.addEventListener("beforeunload", () => {
popoutWindowManager.destroy();
});
}

SettingsStore.addChangeListener("themeLinks", initThemes);
SettingsStore.addChangeListener("enabledThemes", initThemes);
ThemeStore.addChangeListener(initThemes);
if (elapsed >= maxWait) {
clearInterval(interval);
}

if (!IS_WEB)
VencordNative.quickCss.addThemeChangeListener(initThemes);
elapsed += 500;
}, 500);
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is there a loop waiting for the document to be ready? Is it not possible to use the document readystatechange event?

Copy link
Contributor Author

@Masterjoona Masterjoona Dec 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nop, if the styles get instantly added when the event is dispatched they get overwritten by the actual popout html (?) or smth

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nop, if the styles get instantly added when the event is dispatched they get overwritten by the actual popout html (?) or smth

cursed

is it not possible to inject into the head?
is using a MutationObserver a possibility?

Copy link
Contributor Author

@Masterjoona Masterjoona Dec 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

neither worked from my tests, doing sleep(300) and then adding it worked though but im not sure if its any better

src/utils/quickCss.ts Outdated Show resolved Hide resolved
@Vendicated
Copy link
Owner

don't use a class that's terrible

@Masterjoona
Copy link
Contributor Author

ill try to come up with somthing else then

@Masterjoona
Copy link
Contributor Author

i came up with something better

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants