[Themes] Fix themes shenanigans in latest versions (#131)
* [Themes] Hopefully fix BACKGROUND/BG semantic colors for 192.7+ * [Themes] Nvm use different alternative name system * [Themes] Fix message background not working
This commit is contained in:
parent
a86b963330
commit
3b035d537a
1 changed files with 44 additions and 9 deletions
|
@ -1,9 +1,10 @@
|
||||||
import { Theme, ThemeData } from "@types";
|
import { Theme, ThemeData } from "@types";
|
||||||
import { ReactNative as RN, chroma } from "@metro/common";
|
import { ReactNative as RN, chroma } from "@metro/common";
|
||||||
|
import { findInReactTree, safeFetch } from "@lib/utils";
|
||||||
import { findByName, findByProps } from "@metro/filters";
|
import { findByName, findByProps } from "@metro/filters";
|
||||||
import { instead, after } from "@lib/patcher";
|
import { instead, after } from "@lib/patcher";
|
||||||
import { createFileBackend, createMMKVBackend, createStorage, wrapSync, awaitSyncWrapper } from "@lib/storage";
|
import { createFileBackend, createMMKVBackend, createStorage, wrapSync, awaitSyncWrapper } from "@lib/storage";
|
||||||
import { safeFetch } from "@lib/utils";
|
import logger from "./logger";
|
||||||
|
|
||||||
//! As of 173.10, early-finding this does not work.
|
//! As of 173.10, early-finding this does not work.
|
||||||
// Somehow, this is late enough, though?
|
// Somehow, this is late enough, though?
|
||||||
|
@ -11,6 +12,19 @@ export const color = findByProps("SemanticColor");
|
||||||
|
|
||||||
export const themes = wrapSync(createStorage<Record<string, Theme>>(createMMKVBackend("VENDETTA_THEMES")));
|
export const themes = wrapSync(createStorage<Record<string, Theme>>(createMMKVBackend("VENDETTA_THEMES")));
|
||||||
|
|
||||||
|
const semanticAlternativeMap: Record<string, string> = {
|
||||||
|
"BG_BACKDROP": "BACKGROUND_FLOATING",
|
||||||
|
"BG_BASE_PRIMARY": "BACKGROUND_PRIMARY",
|
||||||
|
"BG_BASE_SECONDARY": "BACKGROUND_SECONDARY",
|
||||||
|
"BG_BASE_TERTIARY": "BACKGROUND_SECONDARY_ALT",
|
||||||
|
"BG_MOD_FAINT": "BACKGROUND_MODIFIER_ACCENT",
|
||||||
|
"BG_MOD_STRONG": "BACKGROUND_MODIFIER_ACCENT",
|
||||||
|
"BG_MOD_SUBTLE": "BACKGROUND_MODIFIER_ACCENT",
|
||||||
|
"BG_SURFACE_OVERLAY": "BACKGROUND_FLOATING",
|
||||||
|
"BG_SURFACE_OVERLAY_TMP": "BACKGROUND_FLOATING",
|
||||||
|
"BG_SURFACE_RAISED": "BACKGROUND_MOBILE_PRIMARY"
|
||||||
|
}
|
||||||
|
|
||||||
async function writeTheme(theme: Theme | {}) {
|
async function writeTheme(theme: Theme | {}) {
|
||||||
if (typeof theme !== "object") throw new Error("Theme must be an object");
|
if (typeof theme !== "object") throw new Error("Theme must be an object");
|
||||||
|
|
||||||
|
@ -25,13 +39,31 @@ export function patchChatBackground() {
|
||||||
|
|
||||||
const MessagesWrapperConnected = findByName("MessagesWrapperConnected", false);
|
const MessagesWrapperConnected = findByName("MessagesWrapperConnected", false);
|
||||||
if (!MessagesWrapperConnected) return;
|
if (!MessagesWrapperConnected) return;
|
||||||
|
const { MessagesWrapper } = findByProps("MessagesWrapper");
|
||||||
|
if (!MessagesWrapper) return;
|
||||||
|
|
||||||
return after("default", MessagesWrapperConnected, (_, ret) => React.createElement(RN.ImageBackground, {
|
const patches = [
|
||||||
style: { flex: 1, height: "100%" },
|
after("default", MessagesWrapperConnected, (_, ret) => React.createElement(RN.ImageBackground, {
|
||||||
source: { uri: currentBackground.url },
|
style: { flex: 1, height: "100%" },
|
||||||
blurRadius: typeof currentBackground.blur === "number" ? currentBackground.blur : 0,
|
source: { uri: currentBackground.url },
|
||||||
children: ret,
|
blurRadius: typeof currentBackground.blur === "number" ? currentBackground.blur : 0,
|
||||||
}));
|
children: ret,
|
||||||
|
})),
|
||||||
|
after("render", MessagesWrapper.prototype, (_, ret) => {
|
||||||
|
const Messages = findInReactTree(ret, (x) => "HACK_fixModalInteraction" in x?.props && x?.props?.style);
|
||||||
|
if (Messages)
|
||||||
|
Messages.props.style = Object.assign(
|
||||||
|
RN.StyleSheet.flatten(Messages.props.style ?? {}),
|
||||||
|
{
|
||||||
|
backgroundColor: "#0000"
|
||||||
|
}
|
||||||
|
);
|
||||||
|
else
|
||||||
|
logger.error("Didn't find Messages when patching MessagesWrapper!");
|
||||||
|
})
|
||||||
|
];
|
||||||
|
|
||||||
|
return () => patches.forEach(x => x());
|
||||||
}
|
}
|
||||||
|
|
||||||
function normalizeToHex(colorString: string): string {
|
function normalizeToHex(colorString: string): string {
|
||||||
|
@ -172,7 +204,10 @@ export async function initThemes() {
|
||||||
|
|
||||||
const themeIndex = theme === "amoled" ? 2 : theme === "light" ? 1 : 0;
|
const themeIndex = theme === "amoled" ? 2 : theme === "light" ? 1 : 0;
|
||||||
|
|
||||||
const semanticColorVal = selectedTheme.data?.semanticColors?.[name]?.[themeIndex];
|
//! As of 192.7, Tabs v2 uses BG_ semantic colors instead of BACKGROUND_ ones
|
||||||
|
const alternativeName = semanticAlternativeMap[name] ?? name;
|
||||||
|
|
||||||
|
const semanticColorVal = (selectedTheme.data?.semanticColors?.[name] ?? selectedTheme.data?.semanticColors?.[alternativeName])?.[themeIndex];
|
||||||
if (name === "CHAT_BACKGROUND" && typeof selectedTheme.data?.background?.alpha === "number") {
|
if (name === "CHAT_BACKGROUND" && typeof selectedTheme.data?.background?.alpha === "number") {
|
||||||
return chroma(semanticColorVal || "black").alpha(1 - selectedTheme.data.background.alpha).hex();
|
return chroma(semanticColorVal || "black").alpha(1 - selectedTheme.data.background.alpha).hex();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue