fix: make themes work
This commit is contained in:
parent
23e5efc446
commit
1876c4a4a6
2 changed files with 27 additions and 12 deletions
|
|
@ -74,7 +74,7 @@ const config = {
|
||||||
constModules: {
|
constModules: {
|
||||||
globals: {
|
globals: {
|
||||||
"bunny-build-info": {
|
"bunny-build-info": {
|
||||||
version: `"v1.4.1"`
|
version: `"v1.4.2"`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -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]];
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue