fix: make themes work

This commit is contained in:
cocobo1 2026-03-06 18:51:46 +02:00
parent 23e5efc446
commit 1876c4a4a6
2 changed files with 27 additions and 12 deletions

View file

@ -74,7 +74,7 @@ const config = {
constModules: { constModules: {
globals: { globals: {
"bunny-build-info": { "bunny-build-info": {
version: `"v1.4.1"` version: `"v1.4.2"`
} }
} }
}, },

View file

@ -2,12 +2,14 @@ import { _colorRef } from "@lib/addons/themes/colors/updater";
import { NativeThemeModule } from "@lib/api/native/modules"; import { NativeThemeModule } from "@lib/api/native/modules";
import { before, instead } from "@lib/api/patcher"; import { before, instead } from "@lib/api/patcher";
import { findByProps } from "@metro"; import { findByProps } from "@metro";
import { byMutableProp } from "@metro/filters";
import { createLazyModule } from "@metro/lazy";
import chroma from "chroma-js"; import chroma from "chroma-js";
const tokenReference = findByProps("SemanticColor"); const tokenReference = findByProps("SemanticColor");
const isThemeModule = createLazyModule(byMutableProp("isThemeDark")); const themeTypes = findByProps("ThemeTypes")?.ThemeTypes;
const origRawColor = { ...tokenReference.RawColor };
const origDarker = themeTypes.DARKER as string;
const origLight = themeTypes.LIGHT as string;
const SEMANTIC_FALLBACK_MAP: Record<string, string> = { const SEMANTIC_FALLBACK_MAP: Record<string, string> = {
"BG_BACKDROP": "BACKGROUND_FLOATING", "BG_BACKDROP": "BACKGROUND_FLOATING",
@ -22,11 +24,20 @@ const SEMANTIC_FALLBACK_MAP: Record<string, string> = {
"BG_SURFACE_RAISED": "BACKGROUND_MOBILE_PRIMARY" "BG_SURFACE_RAISED": "BACKGROUND_MOBILE_PRIMARY"
}; };
const origRawColor = { ...tokenReference.RawColor };
export default function patchDefinitionAndResolver() { export default function patchDefinitionAndResolver() {
const callback = ([theme]: any[]) => theme === _colorRef.key ? [_colorRef.current!.reference] : void 0; const callback = ([theme]: any[]) => theme === _colorRef.key ? [_colorRef.current!.reference] : void 0;
Object.defineProperty(themeTypes, "DARKER", {
configurable: true,
enumerable: true,
get: () => _colorRef.current?.reference === "darker" ? _colorRef.key : origDarker,
});
Object.defineProperty(themeTypes, "LIGHT", {
configurable: true,
enumerable: true,
get: () => _colorRef.current?.reference === "light" ? _colorRef.key : origLight,
});
Object.keys(tokenReference.RawColor).forEach(key => { Object.keys(tokenReference.RawColor).forEach(key => {
Object.defineProperty(tokenReference.RawColor, key, { Object.defineProperty(tokenReference.RawColor, key, {
configurable: true, configurable: true,
@ -34,15 +45,12 @@ export default function patchDefinitionAndResolver() {
get: () => { get: () => {
const ret = _colorRef.current?.raw[key]; const ret = _colorRef.current?.raw[key];
if (ret) return ret; if (ret) return ret;
return origRawColor[key]; return origRawColor[key];
} }
}); });
}); });
const unpatches = [ const unpatches = [
before("isThemeDark", isThemeModule, callback),
before("isThemeLight", isThemeModule, callback),
before("updateTheme", NativeThemeModule, callback), before("updateTheme", NativeThemeModule, callback),
instead("resolveSemanticColor", tokenReference.default.meta ?? tokenReference.default.internal, (args: any[], orig: any) => { instead("resolveSemanticColor", tokenReference.default.meta ?? tokenReference.default.internal, (args: any[], orig: any) => {
if (!_colorRef.current) return orig(...args); if (!_colorRef.current) return orig(...args);
@ -58,8 +66,9 @@ export default function patchDefinitionAndResolver() {
} }
if (semanticDef?.value) { if (semanticDef?.value) {
if (semanticDef.opacity === 1) return semanticDef.value; return semanticDef.opacity === 1
return chroma(semanticDef.value).alpha(semanticDef.opacity).hex(); ? semanticDef.value
: chroma(semanticDef.value).alpha(semanticDef.opacity).hex();
} }
const rawValue = _colorRef.current.raw[colorDef.raw]; const rawValue = _colorRef.current.raw[colorDef.raw];
@ -72,6 +81,12 @@ export default function patchDefinitionAndResolver() {
return orig(...args); return orig(...args);
}), }),
() => { () => {
Object.defineProperty(themeTypes, "DARKER", {
configurable: true, writable: true, value: origDarker
});
Object.defineProperty(themeTypes, "LIGHT", {
configurable: true, writable: true, value: origLight
});
Object.defineProperty(tokenReference, "RawColor", { Object.defineProperty(tokenReference, "RawColor", {
configurable: true, configurable: true,
writable: true, writable: true,
@ -89,4 +104,4 @@ function extractInfo(themeName: string, colorObj: any): [name: string, colorDef:
const colorDef = tokenReference.SemanticColor[propName]; const colorDef = tokenReference.SemanticColor[propName];
return [propName, colorDef[themeName]]; return [propName, colorDef[themeName]];
} }